Client-Side HTML Password Protect

This tool lets you securely password-protect an HTML file. Unlike other password-protection tools, this tool:

  1. Has no server-side components (this tool and its password-protected pages run entirely in javascript).
  2. Uses strong encryption, so the password-protection cannot be bypassed.

All you need to do is choose an HTML file and a password, and your page will be password-protected.

Live Demo  (pssst... the live demo password is "hunter2")

Instructions

Step 1. Choose HTML file

Step 2. Choose password

Password:
Confirm:

Passwords don't match, try again.

Step 3. Protect!

Done! Check your downloads!


FAQ

How can this be secure if it's client-side? Can't people just bypass the password?

The HTML gets encrypted using the password, so it is unreadable without the password. An attacker could extract the encrypted document, but it would be an unusable mess until they decrypt it, which can only be done with the original password.

How do I know you're not keeping track of passwords I enter into this tool?

View the source code for this tool (in your browser and/or on GitHub) and you can see for yourself that the password never leaves your computer!

Why would I want to use this instead of a .htaccess user/password prompt?

Standard user/password prompts require you have some sort of privileged access to the server. With Apache for instance, you need to be able to add a .htaccess file to the directory you want to protect. Since this tool produces a standard HTML file, you can host it literally anywhere, even places that don't give you access to the server configuration.

Does this encrypt all the CSS/Javascript/Images or only the HTML itself?

This tool only encrypts the HTML document itself. If you inline your CSS/JS, or if you convert your images to data uris, then they will be encrypted too. Otherwise they will just be linked. Since the HTML itself is encrypted though, a visitor without the password will not be able see the URLs of any of the linked resources.

What sort of crypto do you use?

Certainly not my own! This tool uses the CryptoJS library for its encryption. First, an encryption key is derived from the password using PBKDF2 and a random salt with 100 rounds. Then the HTML is encrypted using AES256.


More Info

Project by Maximillian Laumeister. The source code and license are available on GitHub.

DISCLAIMER

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.