Main Page Content
Restricting Access to Your JavaScript libraries
Rated 3.18 (Ratings: 9) (Add your rating)
Log in to add a comment
(17 comments so far)
Want more?
- More articles in Site Development
- More articles by georgec
George
User since: April 21, 2003
Last login: April 21, 2003
Articles written: 2
Restricting access to JavaScript libraries to designated domains
JavaScript libraries allow us to separate script from page, so multiple pages can all utilize the same script simply by linking to it:
<script src="greatscript.js"></script>
Just to refresh our memories, "myscript.js" should contain the script itself minus the surrounding <script></script> tags, and saved as a text file (but with .js extension).
Now, the nature of JS libraries means that they're not only accessible by your site/domain, but anyone's. Like an image, a library could potentially be utilized by any site that decides they like your script but not the bandwidth associated with it. Specifically, they would simply use a syntax like the following on their page:
<script src="http://www.yourdomain.com/greatscript.js"></script>
This can become a headache, especially if the library is very large.
Using JavaScript to restrict access to JS libraries to designated domains
First stop- using JavaScript to safe guard JavaScript! You may already know that the language is capable of determining the current URL in the location field of the browser, through the property
document.location.href//returns the URL in the location field of browser
With that in mind, all we need is a piece of code that compares this URL with a list of permitted ones, and if non of the later matches the former, we know the library is being accessed from an outside source (and take appropriate action). Suffice it to say such a code will need to be added directly inside the library in question in order to take effect.
Lets turn theory into reality. The below code will prevent unauthorized domains from referencing the containing JavaScript library:
//Beginning of "test.js" file
var accepted_domains=new Array("wsabstract.com","javascriptkit.com")
var domaincheck=document.location.href //retrieve the current URL of user browser
var accepted_ok=false //set acess to false by default
if (domaincheck.indexOf("http")!=-1){ //if this is a http request
for (r=0;r<accepted_domains.length;r++){
if (domaincheck.indexOf(accepted_domains[r])!=-1){ //if a match is found
accepted_ok=true //set access to true, and break out of loop
break
}
}
}
else
accepted_ok=true
if (!accepted_ok){
alert("You\'re not allowed to directly link to this .js file on our server!")
history.back(-1)
}
/////rest of your libray
"
"
"
We first define an array to hold a list of the "permitted" domains. Then, we enlist the JavaScript property document.location.href to get the current URL of the user's browser. Now we have both of our key witnesses in our custody- the list of permitted domains, plus the current URL (which includes domain) of the page. All that's left to do is to compare the two, and only allow the library to proceed "loading" if there is a match (if one of accepted_domain's values is contained within domaincheck). This is done using a for loop.
Notice how the code above checks to see if the document's URL contains "http" first before proceeding with the match making. The purpose of this is so that offline accessing of the JavaScript library is left out of the scrutinization process- obviously there's no point in restricting access of a library when it's accessed offline, especially if you want to be able to test the library out on your hard drive!
Using JavaScript to limit access to a library is perfectly viable, but it does have its shortcomings. Obviously you'll need to make physical changes to your library. Then there's the repetitious work involved if you ever want to apply the restriction to all JS libraries on your site. Another solution for this- if you can handle it- is via server side scripting, specifically, .htaccess. Let's look at that now.
Using .htaccess instead for the task
In the tutorial Comprehensive Guide to .htaccess, it featured a magical little file called .htaccess of your server (you may or may not have access to it, depending on your web host), and how it can enable everything from custom 404 pages, password protection of directories, to disabling hot linking of images on your server. Well, faced with our current challenge, we simply need to elaborate on that last point a bit, so instead of- or apart from- images, JavaScript libraries are included within the list of files not to be accessed from outside your site.
Take a look at the below code, which is all that's needed to accomplish the task using .htaccess:
RewriteEngine on
RewriteCond %{HTTP_REFERER} !^$
RewriteCond %{HTTP_REFERER} !^http://(www\.)?wsabstract.com/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://(www\.)?javascriptkit.com/.*$ [NC]
RewriteRule \.(js|gif|jpg)$ - [F]
Notice "js" in the last line, which adds .js files, along with .gif and .jpg to the type of files only the domains listed above can access. The code should be saved inside your .htaccess file, and dropped into your web page directory.
