Hide Your jQuery Source Code

Sam Deering
Tweet

So i just wrote this awesome jQuery script but i dont want anyone to copy it!!! Obviously on most websites you can simply right click > view source and then if your using a browser like firefox simply click on the javascript file and you can view it’s contents. heypresto!

As you all know jQuery is JavaScript so it needs to be interpreted by the browser and as such needs to be visible. However, you can obfuscate/minify your JavaScript so that it becomes practically unreadable.

minifyjscode

Some online tools you can use are:

base64

Tips and Warnings:

  • CTRL+U is the hotkey for viewing the source code of a web page.
  • Disabling right click on the mouse will prevent nothing.
  • Note that if the browser can render the page then source code can be accessed and there is not much you can do to prevent a determined JavaScript code snitch.
  • Attempts to obfuscate code may lead to upto 9% of viewers not being able to use your site to its full potential (this includes search engines).

Other methods

I found this to be a neat little trick for hiding JavaScript code. This function will unload all linked javascript files so that when you view source – you see no javascript files! (Especially helpful when using FF and using web-developer tools – no linked js files are displayed) The files remain resident in memory – allowing for the functions to work.

function unloadJS(scriptName) {
  var head = document.getElementsByTagName('head').item(0);
  var js = document.getElementById(scriptName);
  js.parentNode.removeChild(js);
}

function unloadAllJS() {
  var jsArray = new Array();
  jsArray = document.getElementsByTagName('script');
  for (i = 0; i < jsArray.length; i++){
    if (jsArray[i].id){
      unloadJS(jsArray[i].id)
    }else{
      jsArray[i].parentNode.removeChild(jsArray[i]);
    }
  }       
}

Related posts:

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • Pingback: Hide Your jQuery Source Code « « Big Engine Media Big Engine Media

  • http://comettronik.com/ yoga

    hmm..nice tutorial dude..

  • Pingback: 10 Tips for developing with jQuery in Notepad++ | jQuery4u

  • Pingback: 10 jQuery Security Plugins | jQuery4u

  • Wayne

    Hey

    I’m trying to get your hide javascript code to work.. It’s not working for me.
    Where do you put it?
    How do you call it?

    Thanks…

    • jquery4u

      Hi Wayne, which code are you having trouble with, is it the unloadAllJS() function? Need more information about what your trying to achieve. Sam

      • gffg

        where i have to place these to function to work..and how to call these to function ?

  • http://www.facebook.com/geetbatth Geet Batth

    what if someone tries to save the page..will they be able to get all the javascript functionality online?

    • http://jquery4u.com/ jQuery4u

      Hi Geet, If someone saves the page to their computer (web page complete) then it will save all the .js, .css, images and page HTML so the page will still save JavaScript. However, any externally referenced files will only work if the computer is online, and any domain specific functionality will not work (ie if it’s using js to get the domain name which might be localhost it will be something like file:///C:/). Hope this makes sense.

  • Pingback: Embed Interactive jsFiddle Snippets on your Web Page | jQuery4u

  • santosh

    where can i place this code

    • http://jquery4u.com/ jQuery4u

      Hi Santosh, can you please explain further so I can help.
      Sam

  • toy4fun

    There is a bug at line 10. Should be:
    for (i = 0; i < jsArray.length; i++){

    • http://jquery4u.com/ jQuery4u

      Thanks mate, I’ve fixed it up.
      Sam

  • kingwoodbudo

    Are these the types of techniques used by Google, Twitter and the other AJAX type websites that make their code unreadable when I view source? If they are doing something different what would that be if you know.

    Great information, by the way!

  • Terrizer

    Hi, I don’t get where do i need to insert those function code(unloadJS,unloadalljs). I’ve tried to insert at the beginning and the end of the js file using tag and also I’ve tried to insert at the document.ready function but still doesn’t work. (showing on chrome f12 view sources) pls help me out, thanks

  • http://www.bloggerspice.com/ Rabbi

    Hi I am Mohammad Fazle Rabbi a new blogger http://www.bloggerspice.com/ . I am always try to make some unique design on my blog but every time others are copying my design by viewing blog source code through Firefox. So is there any way to disable source code in Firefox browser only. Because by this visitors can easily can see any selected section code. If anyone know kindly reply me. I will be grateful to you.

    Best Regards

    Mohammad Fazle Rabbi
    Admin
    http://www.bloggerspice.com

    • Yosuaf Syed

      LOL you cant stop anyone to copy your theme you make a theme and i can design the same without seeing source code or even by seeing the image. if you want that no one copy your design on internet there is only one way just donot upload it to internet :D

      • http://jquery4u.com/ jQuery4u

        lol true asif!… however you can make it harder for them to copy…

  • AshleeNiz

    where should I place unloadAllJS() function? , and for using this I want to call .js files in script src right ?

  • kem

    Hellalooya,

    I’m able to apply your technique and it works. Even using save page as… cannot see the source code.
    But when it come to the debugger, every secrete revealed with a few click.

    This will work if you can disable the debugger as well.

    • chaitanya sai

      hi kem can you please tall me where ineed to paste this code

  • chaitanya sai

    hi admin i copied this code to my document.ready() function but this is not working please tell where do i need to paste this code to hide my jquery code

    thanks expecting quick reply