2005-08-17: While your HTML, CSS and JavaScript code may be copyrighted, most people feel that general techniques employing these file formats are something one can legitimately learn by studying other sites. And in practice, it is quite difficult to effectively copy-protect HTML, CSS or JavaScript. The right-mouse-button menu, the "View Source" option on the "View" menu, and the "Save Page As..." option on the "File" menu can all be used to access the source code of a web page. The right mouse button can be blocked, but that doesn't stop "View Source" or "Save Page As..." and it causes problems for legitimate users. So we don't recommend it.

Still, it's annoying when someone steals your entire CSS layout and all of your DHTML JavaScript code without so much as a thank-you. Certainly you can discourage such behavior by placing a copyright notice in a comment in all HTML, .css (style sheet) and .js (external JavaScript) files.

These three types of files have different syntaxes for creating comments that are ignored by the browser, but visible to anyone reading your code. In an HTML page, your notice might look like this:

<!-- Copyright 2005, example.com. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. -->

In a CSS file, your notice will look like this:

/* Copyright 2005, example.com. All Rights Reserved. We will take legal action against those who copy our HTML content, CSS style sheets and JavaScript functions. */

And in a JavaScript .js file, your notice will look like this:

// Copyright 2005, example.com. All Rights Reserved.
// We will take legal action against those who copy our HTML content,
// CSS style sheets and JavaScript functions.

That's a good step to remind those who may not realize it that your source code is not "up for grabs." But is there a more drastic solution? Well, yes: you can "obfuscate" your source code, making it almost impossible to read. The toughest obfuscation programs rewrite your page so that the source code is kept in scrambled-up, encrypted form, and a short JavaScript program unscrambles it and inserts it into the page. But even these can be defeated by highly skilled users who know JavaScript. A talented JavaScript programmer can always figure out a way to extract the original HTML from a page scrambled by a product like HTML Guardian.

Also, obfuscation comes at a price: obfuscated source code that others can't read isn't legible to you either. So you will have to keep a "pretty" version of your page for your private use in updating the page, and run the obfuscation program every time you make a change to your page.

But that's not the worst part: a ferociously obfuscated web page cannot be indexed correctly by search engines. In case you're not already clear on how important that is, it means that no one can find your website. And that's not an acceptable price to pay to protect your HTML code.

There is, however, one compromise technique that doesn't break search engines: removing newlines and unnecessary whitespace. Removing carriage returns so that the entire page becomes a single line is enough to frustrate casual thieves.

When removing carriage returns, bear these rules in mind:

1. You can't have comments in JavaScript code if you remove all carriage returns, because comments in JavaScript run from // to the end of a line. Once you remove all carrige returns, there is only one line, and the rest of your program gets commented out.

2. If you use the <pre> element in your HTML, be aware that removing carriage returns within <pre> will alter the appearance of your page, turning all of the content of <pre> into one line from the web browser user's point of view.

3. Carriage returns inside <textarea> are also significant.

In general, we don't recommend trying too hard to copy protect your HTML, JavaScript and CSS -- the cost is higher than the benefit, and in the end clever users can find ways around all of the copy protection schemes. But removing unnecessary whitespace is the best option for those who must have some protection for their source code. Just be sure to keep a "clean" copy for your own use. When you make edits in the future, you won't want to deal with a single line of 8,000 characters, either.

Legal Note: yes, you may use sample HTML, Javascript, PHP and other code presented above in your own projects. You may not reproduce large portions of the text of the article without our express permission.

Got a LiveJournal account? Keep up with the latest articles in this FAQ by adding our syndicated feed to your friends list!

---