Protect Javascript Code From Copying by AJAX Method

In this mini tutorial I will introduce to all of you a method I am using to protect javascript code from copying in my commercial plugins. I do not guarentee this method will protect javascript 100% but it will be better than do nothing.

This method is very simple. I have just combined AJAX method with little server-side script to prevent visitors access javascript file directly.

Now I will use a simple example to explain my idea. Look at a simple HTML page below:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo of Protecting Javascript Code From Copying</title>

<!-- jQuery Library 1.8.3 -->
<script type="text/javascript" src="js/jquery/jquery.min.183.js"></script>

<script type="text/javascript">

$(document).ready(function(e) {    
  function MyJSFunction() {
    alert("This is a commercial script, you can not copy this!");
  }	
  // Show Alert
  MyJSFunction();	
});
</script>
</head>

<body> 
  Demo of Protecting Javascript Code From Copying.
</body>
</html>

 

In the page I have a javascript function ( MyJSFucntion ) that I do not want visitors view it.

When visitors access the page they will see an alert message. Then visitors want to see the javascript code that is used to trigger the alert message so they will use “view page source” or “inspect element” or “firebug” feature of their browsers to view source code and client-side script.

 

 

How can I protect javascript code?

Because I do not want anyone see my javascript code so I will put the javascript code into a php file ( js.php ) then I use AJAX method to load the php file.

js.php content:

<script type="text/javascript">
function MyJSFunction() {
  alert("This is a commercial script, you can not copy this!");
}	
// Show Alert
MyJSFunction();	
</script>

AJAX code to load js.php file in “js/” folder ( for simple I use jQuery ):

<script type="text/javascript">
$(window).load(function() {
  $.ajax({
    url: 'js/js.php',
    type:'POST',
    cache: false,
    success: function(data){
      if(data){
        $('body').append(data);
      }
    }
  }); 
})
</script>

 

Now, when visitors view source code of the page they will not see the javascript code that I put in the js.php file. However, I will not stop at here because some experient visitors may be know the link of js.php file and they can access the file directly then they will see the javascript that I want to protect.

To protect javascript code when visitors access php file directly I use a simple validating method to check referer link. If the referer link is the index page I will allow them to access the javascript code otherwise I will show them another content.

Final js.php file:

<?php
  $referer = $_SERVER['HTTP_REFERER'];
  // Check URL
  if ( $referer=='http://demo.siterepo.com/free/sonhlab-protect-javascript/demo.php' ) {
?>

<script type="text/javascript">
function MyJSFunction() {
  alert("This is a commercial script, you can not copy this!");
}	
// Show Alert
MyJSFunction();	
</script>

<?php }
// If strange url
else { ?>
    Sorry! You can not see this content. Please go to <a href="http://sonhlab.com">SONHLAB.com</a> to see it.<br />
<?php } ?>

Final index page ( demo.php ):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo of Protecting Javascript Code From Copying</title>

<!-- jQuery Library 1.8.3 -->
<script type="text/javascript" src="js/jquery/jquery.min.183.js"></script>

<script type="text/javascript">
$(window).load(function() {
  $.ajax({
    url: 'js/js.php',
    type:'POST',
    cache: false,
    success: function(data){
      if(data){
        $('body').append(data);
      }
    }
  }); 
})
</script>
</head>

<body>
  Demo of Protecting Javascript Code From Copying.
</body>
</html>

 

Finally, the work is completed. Now visitors will not see my javascript code that I want to hide.

Hope this mini tutorial will be useful for you in security mission. If you want a demo code you can download the demo file I included in this tutorial.

 

 

 

Note: In this tutorial I just use a simple validating method to explain to you how to use AJAX to protect javascript code. In real use you may need to combine more validating methods and minify/compress your javascript code for more security.