We can’t protect (X)HTML code 100%, but we can make such of an “obstacle” for those who will try to get the source code of your page. How? With Javascript! See how we can do this below:
Requirements
- Text editor (author’s choice)
- Browser with lastest Javascript support (try Google Chrome)
- Internet Access
Before you start the howto, see the live example here and try to see the HTML source
with your browser.
The HOWTO
To protect the (X)HTML we will obfuscate it using the Voormedia’s HTML Scrambler service.
And we will use this XHTML example code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>HOWTO #3 - Protect HTML source code</title> </head> <body> <p> This is a protected/obfuscated XHTML page, take a look on the source code! </p> </body> </html>
Scrambling it:
<script language="JavaScript" type="text/javascript">
// Copyright © 2005 Voormedia - WWW.VOORMEDIA.COM
var i,y,x="3c21444f43545950452068746d6c205055424c494320222d2f2f5733432f2f445444205848544d4c20312e30205374726963742f2f454e220d0a2022687474703a2f2f7777772e77332e6f72672f54522f7868746d6c312f4454442f7868746d6c312d7374726963742e647464223e0d0a3c68746d6c20786d6c6e733d22687474703a2f2f7777772e77332e6f72672f313939392f7868746d6c2220786d6c3a6c616e673d22656e22206c616e673d22656e223e0d0a203c686561643e0d0a203c6d65746120687474702d65717569763d22436f6e74656e742d547970652220636f6e74656e743d22746578742f68746d6c3b20636861727365743d69736f2d383835392d3122202f3e0d0a203c7469746c653e484f57544f202333202d2050726f746563742048544d4c20736f7572636520636f64653c2f7469746c653e0d0a203c2f686561643e0d0a203c626f64793e0d0a09093c703e0d0a0909095468697320697320612070726f7465637465642f6f6266757363617465640d0a0909095848544d4c20706167652c2074616b652061206c6f6f6b206f6e2074686520736f7572636520636f6465210d0a09093c2f703e0d0a203c2f626f64793e0d0a3c2f68746d6c3e";y='';for(i=0;i<x.length;i+=2){y+=unescape('%'+x.substr(i,2));}document.write(y);
</script>
Now you just need to paste and copy the generated scrambled XHTML code and paste replacing the actual unprotected (X)HTML source.
Remember, you can see the live example here.
See you in the next HOWTO and don’t forget to leave a comment. :-)
Pretty sweet man, thanks for sharing!
Thanks Geno! :)
This way till a newbie can do! thanks for sharing man
Thanks John! :)