HTML Hyperlink Obfuscation with Client Script

Illustrates a simple way to use key-generated XOR obfuscation / deobfuscation of hyperlinks so that when a user hovers over a link it will appear meaningless.

Recently I read a newsgroup post where the user had some reports that they had hyperlinks to and they wanted to obfuscate the "href" attribute so that visitors would be unable to hover their mouse over such a link and find out the actual URL.

I remembered that I had already done something similar to this so I tracked it down and resurrected the client-script code to handle hyperlinks.

This is NOT encryption - it's only obfuscation or "hiding".  If you really need encryption, there are both server and client -side implementations of various encryption algorithms.

But if you just need a quick way to obscure the real endpoint target of an <A HREF hyperlink, this method is both quick and easy.

I use a variation of the XOR character-by-character encryption algorithm to transform a hyperlink into a string of hex numbers. XOR is useful because it is bidirectional - the same algorithm will either encrypt or decrypt a string, provided that the "key" is the same.

Here's the code for a complete sample page:


var key="pigscanfly";
function Obfuscate (strText){
 var newText="";
 var temp=0;
 // create hash from key =< 255 for XOR operation
 for(var q=0;q<key.length;q++)
temp = temp %256; // must be 0 to 255
var xOr=parseInt(temp);
for (var i=0;i<strText.length;i++)
   newText+= IntToHex(strText.charCodeAt(i)^xOr);
return newText;

function DeObfuscate (strText){
var newText="";
var temp=0;
// create hash from key =<255 for XOR operation
for(var q=0;q<key.length;q++)
temp = temp %256;
var xOr= parseInt(temp);
var temp;
for (var i=0;i<strText.length;i+=2)
  newText+= String.fromCharCode(temp^xOr);
return newText;
function IntToHex(n) {
var result = n.toString(16);
return result;
<textarea rows=10 cols=100 id=stuff></textarea><BR/>
<input type=button value=Obfuscate onclick="stuff.innerText=Obfuscate(stuff.innerText);" />
<input type=button value=DeObfuscate onclick="stuff.innerText=DeObfuscate(stuff.innerText);" />
<h3>Sample obfuscated link:</h3>
<a href='javascript:document.location.href=DeObfuscate("5c4040440e1b1b4343431a4d555c5b5b1a575b59");'>GO WHERE?</a>
You can see above that the provided key "pigscanfly" is concatenated in a for loop and then modulo 256 is applied to keep the XOR operand in the required range of 0 to 255 (the ASCII Charset).

The technique for applying the result to a link looks like this:

<a href='javascript:document.location.href=DeObfuscate("5c4040440e1b1b4343431a4d555c5b5b1a575b59");'>GO WHERE?</a>

You can mouse over the above in a page and it will be quite meaningless, but when you click on the link it will still take you to

Here is a link to the actual test page (you can view source on it to get all the code).

If you are inclined to extend this concept, it would not be too difficult to create an "ObfuscatedHyperlink" ASP.NET custom control that derives from asp:Hyperlink, and stick the required javascript in as an embedded resource. You would fill in the NavigateUrl property with the actual target url but the overridden property in the control would call the client-script method(s) above and render it as an obfuscated link. I have no particular use for this at present so I leave this as an exercise for the reader.
By Peter Bromberg   Popularity  (2153 Views)