now code obfuscation is basically a method of transforming your code into a new representation that is difficult and nearly impossible for someone to.
Understand now code obfuscation can be really important for javascript because javascript mainly runs on client side so anyone can go ahead and take a look at your code and understand how it works.
Now this may not be an issue for a lot of you but for those of you who want to keep their code harder to copy and prevent people from stealing your work you can use.
Javascript obfuscator tool to do that now you can go ahead and google for javascript code obfuscator and you'll get a lot of tools for that for this video i'm going to use this website.
Called obfuscator.io now this is a free to use tool and here we can see there are some information about this tool and here we can see how it works so you can go ahead and take a.
Output displayed over here you can also upload your javascript file over here by just going to this tab and dragging and dropping your file over here and if you scroll down we can see.
That there are a lot of options we can choose from and if you scroll down even more we can see that there is an explanation for all the options so you can take a look at all of these.
So let's go ahead and start with an example so i have this webpage over here and this is a basic faqs section that we created i had shown you how to create this in one of my.
Previous videos and these are basically a list of questions and if i click on one of them we can see that the answer is displayed over here we can click on the next one.
And we have the answer displayed over here if we click on it once again the answer is collapsed now for this design we had used some javascript so let me go to the source code of this.
Design all right so this is the source Wesdigital
Code and this is the html and we also have the css over here and here we can see we have the javascript file and this is the javascript code now what we're.Going to do is we're going to obfuscate this javascript code and we're going to see whether it works so let's go ahead and go to a blogger website.
And let's create a new post and here for the title i'll just type faqs and let's paste the code over here so first of all let's go to the html view.
And i'll just paste the css over here first so i'll just create a style tag and let's go back to our source code and let's go to the style.css file and let's.
Copy everything from here and let's paste it over here and let's scroll down and let's add the html so just make some space over here.
Let's go back and let's go to the html file and i'll just copy everything inside the body and let's go back and paste it over here.
And the last thing we need to paste is the javascript so first of all let's create a script tag now what we will do over here is that we'll paste the obfuscated code here.
So let's go to the javascript obfuscator tool and let's paste our javascript code over here so let's go back over here to main.js.
File and let's copy everything from here and let's paste it over here all right we have pasted our javascript code over here now let's click on officegate.
And here we can see that this is how our
Code looks after obfuscation and we cannot understand anything so let's copy this code from here and let's go back to our post.And let's paste the javascript over here and now let's click on publish and let's see whether the javascript works so let's click on publish and confirm all right now let's click on weave.
And here we can see we have the faqs displayed over here and let's click on one of these questions and let's see whether the javascript is working and we can see that it is working all.
Right so that's basically how you obfuscate javascript code and add it to your websites now if someone tries to see our.
Javascript and if right click over here and click on inspect and let's scroll down and here we can see we have the script tag and if we open this.
This is how the javascript will look it is almost impossible for someone to understand this code now if you go back to our offer scatter tool and if we scroll down.
Here we can see we have a lot of options over here and you can go ahead and check out these different options but one of the options that i like over here is called domain lock.
Now this option will make sure that your code will only run on a specific domain so let's go over here to our website and let's copy this url and let's paste it over here.
And let's click on plus and now we can see we have this domain name added over here and you can also add a domain log redirect url so even if someone copies your obfuscated code and.
Pastes it in their website it won't run and it will redirect to this blank page over here right now let's scroll up and let's obfuscate it once more so here i'll just click on obfuscate.
And now we have the new code displayed over here so let's copy and paste this into our post let's scroll down and i'll just cut this from here and i'll just paste the new code.
All right now let's click on update now let's go back to our website and let's refresh this page and here we can see everything works all right.
Now let's copy and paste this code into a new website so let's go back and i'll just copy all of this from here and let's go back.
And let's open a new website let's open test one over here which i have created and let's click on new post i'll just name it faqs and i'll just paste the code over here.
Right now let's click on publish and confirm right here we can see that our post has been published now let's click on view and let's see whether the code executes.
And here we can see we are redirected to this blank page whenever we open this post let's open it once more and we are redirected to this blank page.
So that's how you can protect your javascript code and keep your logic from being understood by other people alright so that's basically it for this video if you have any doubts.
You can ask in the comments below and if you like this video please click on the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice.
Day so you.