Show HN: Password-protect a static HTML page

In highschool I realized that my school&#x27;s grading system was using a javascript scheme to control access to grades online:<p>1. Concatenate the username and password, hash the combination<p>2. Name the HTML file with the grades using that hash<p>3. When the user logs in, calculate the hash in Javascript and redirect to that HTML page.<p>In theory, you can only work out the URL of the page if you have the username and password in hand. I&#x27;m sure it was pretty trivially bruteforcable, but aside from that it seemed sort of okay.<p>Until I realized that directory listings were turned on, and the directory that had all the HTML files sometimes had no index.html, thereby rendering the entire obfuscation scheme moot.<p>(n.b. I was too ethical to use this to peek at anyone&#x27;s grades! I did try to report it but it was never clear to whom to report it to, and since every teacher generated these files using their own copy of the program, there was no obvious central place to report this to. A couple of years later online grades were centralized into a different system)

Encrypted page includes javascript from 2 CDNs, one for jQuery and one for &quot;crypto-js&quot;. The jQuery one has an integrity hash, but &quot;crypto-js&quot; does not. Granted, they both use HTTPS...<p>Doesn&#x27;t seem very secure to include external JS on an encrypted page.<p>Why not include those things inline?<p>And why does it need jQuery for a simple 1-input form field that decrypts a string?!

I remember in ~2005-2009 while I was in high school, javascript password-protection was my main interest, since I only had access to free hosts that hosted static files.<p>Most of them just focused on obfuscating the password in the source (most by encoding, the fancy ones through some opaque evals), but I came across one during that time that claimed to use AES and even had a not-insignificant cash prize for defeating it.<p>I really wish I could find that site... would be fun to give a shot at cracking it given what I know now.<p>Anywho, in my search for that site, I found a pretty good tutorial considering it&#x27;s age (1997!) on implementing DES in javascript to achieve something similar[0].<p>[0] <a href="https:&#x2F;&#x2F;www.javacrypt.com&#x2F;Course&#x2F;" rel="nofollow">https:&#x2F;&#x2F;www.javacrypt.com&#x2F;Course&#x2F;</a>

I remember 3-4 years ago when I was working with a major wall street financial company to integrate with their credit card processing gateway, some of the private and sensitive information (contracts, testing reports etc.) had already been communicated with a similar but proprietary AES 256 based encryption on a static HTML page via email attachments as a way of secure communication. The intended recipients would get an invite to their site to register&#x2F;login to get the passphrase to unlock the encrypted static HTML doc. This could have been the standard practices in many financial firms theses days (when they are not using PGP&#x2F;GPG encrypted emails)<p>Edit: redacted the name of company.

It does not seem to work for me on multiple machines. I just get an incomplete HTML file that ends abruptly after the &quot;border-top&quot; CSS line. There is no closing semicolon to the line, the file just ends in the middle of the style element.<p>My input doesn&#x27;t seem to matter, but I used:<p>&lt;html&gt;&lt;body&gt;Hello&lt;&#x2F;body&gt;&lt;&#x2F;html&gt;<p>Password: abcdefg

I remember very distinctly about 15 years ago there was a site that had a &quot;members only&quot; page that had some reports that I really wanted (names&#x2F;addresses&#x2F;emails of the members of the org - I wanted a quick and easy lead list for a product I wanted to sell to them). I could see through a simple view source (remember, no chrome dev tools back then) that it wasn&#x27;t some server side check of the password (the members knew it, there was no associated username).<p>They had found some library that would take a password and a desired output and would generate some super crazy javascript looping&#x2F;shifting&#x2F;replacement algorithm that would generate the name of the html page that had the desired content. The report was available openly to the internet, but there were no links to it, just through this algorithm.<p>I spent about 4-5 hours slowly but surely reverse engineering the algorithm so I could figure out what the page name was. There was an immense sense of satisfaction that came with being able to look at those reports.

Back in the day we used to use Apache basic authentication for this, that was before single page apps. Not you do have jwt that is explicitly designed to handle things like offline progressive web app logins.

Oooh, this is pretty cool. All that it needs is a cli utility so I can plug it in my scripts, and I can just tell my static site generator to encrypt specific pages while building.

Thank you for inspiration. I&#x27;ve created nodejs module to encrypt files. Now wondering if we can make webpack bundle-loader that will load encrypted chunks. How cool would be that? What u guys think?

I did something like this some time ago, to send reports securely to people who&#x27;d never heard of PGP.<p>What I like about my implementation is that it has a tamper proof clear text message included with the encrypted payload. And everything (images and JS) is inline, so nothing external needed.<p><a href="http:&#x2F;&#x2F;ivo.palli.nl&#x2F;encryption&#x2F;encryption2.html" rel="nofollow">http:&#x2F;&#x2F;ivo.palli.nl&#x2F;encryption&#x2F;encryption2.html</a>

If only the web server software could do this for you...

Simple and useful. The perfect &quot;Show HN&quot;.

A feeling of saying &quot;what is this familiar thing&quot;:<p><a href="http:&#x2F;&#x2F;www.acme.com&#x2F;software&#x2F;securepage&#x2F;" rel="nofollow">http:&#x2F;&#x2F;www.acme.com&#x2F;software&#x2F;securepage&#x2F;</a><p>(2010 or earlier, basically does similar trick, from the authors of thttpd, mini_httpd and micro_httpd!)

I wrote a little web app very similar to this last year: <a href="https:&#x2F;&#x2F;hypervault.github.io&#x2F;" rel="nofollow">https:&#x2F;&#x2F;hypervault.github.io&#x2F;</a>. The difference is mine was mostly focused on file encryption.

That&#x27;s a fun toy.. and a great example of how easy it is to get crypto wrong. I&#x27;m just guessing here, but you are probably missing some key derivation like PBKDF2.<p>Edit: For this something like tweetnacl is probably more foolproof, checkout: <a href="https:&#x2F;&#x2F;github.com&#x2F;dchest&#x2F;tweetnacl-js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;dchest&#x2F;tweetnacl-js</a><p>Or libsodium which can also be compiled to pure js: <a href="https:&#x2F;&#x2F;github.com&#x2F;jedisct1&#x2F;libsodium.js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;jedisct1&#x2F;libsodium.js</a>

Reminds me of this: <a href="https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10901745" rel="nofollow">https:&#x2F;&#x2F;news.ycombinator.com&#x2F;item?id=10901745</a><p>Similar, but uses files instead of HTML text.

Interesting. What is the use case for this versus HTTP basic auth?

Pretty pretty neat. I built [something pretty similar](<a href="https:&#x2F;&#x2F;devpost.com&#x2F;software&#x2F;cryptopostal" rel="nofollow">https:&#x2F;&#x2F;devpost.com&#x2F;software&#x2F;cryptopostal</a>) to give my address to family &amp; friends during the holidays. Includes a node generator to make your own. Enjoy :)<p>[video demo](<a href="https:&#x2F;&#x2F;youtu.be&#x2F;zevMEiR2CZY" rel="nofollow">https:&#x2F;&#x2F;youtu.be&#x2F;zevMEiR2CZY</a>)

This would be neat if you could build a wrapper of this around GitHub pages. Then you could finally use GitHub pages sites for private content!<p>Also, as a non-security person, just how secure is this? Like is it used more for &quot;eh, I don&#x27;t really want something to see this, but it&#x27;s not the end of the world if they do&quot; or more like &quot;yeah, use this for extremely secure content, it&#x27;s safe.&quot;

I had built something along these lines. Not really encrypting the page. But allowing you to send each other Base64 data: <a href="http:&#x2F;&#x2F;cloak.websrvr.in&#x2F;" rel="nofollow">http:&#x2F;&#x2F;cloak.websrvr.in&#x2F;</a> . I had built it to circumvent enterprise email servers which don&#x27;t allow sending binaries. Which is kind of ironic because email sends attachments as Base64.

And no one mentions TiddlyWiki[0]...<p>[0] <a href="http:&#x2F;&#x2F;tiddlywiki.com&#x2F;" rel="nofollow">http:&#x2F;&#x2F;tiddlywiki.com&#x2F;</a>

I did something similar to this for redacting HTML pages a while back, although I never fully polished it: <a href="https:&#x2F;&#x2F;github.com&#x2F;alexbecker&#x2F;redact-js" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;alexbecker&#x2F;redact-js</a><p>It&#x27;s not something I&#x27;d use for serious security applications, but fun for interactive fiction.

This is cool! To really make the overhead tiny, include an inplace implementation of XTEA (under 1KB decryption).<p>XTEA is not a military grade algo (but there&#x27;s only been a partial attack on reduced rounds). All in all the overhead can come in under 2KB in all.

Not sure, but this might be useful and&#x2F;or interesting to some HN&#x27;ers<p><a href="https:&#x2F;&#x2F;github.com&#x2F;ezWebDevTools&#x2F;ezCryptoJS" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;ezWebDevTools&#x2F;ezCryptoJS</a>

It&#x27;s pretty cool. I entertain the idea of doing this and hadn&#x27;t thought of it ever, but how do you see it being used if I can&#x27;t use it with a python&#x2F;node.js API to deploy pages on the fly?

Rubber hose encryption would be a neat add here!

This is essentially what encrypted pastebins do (but they usually put the key&#x2F;password in the URL hash).

That is awesome!<p>I would love to see it worked out in a way that it would output different content depending on password.

In 2017, one ought to use browsers&#x27; native crypto API instead of doing crypto in js...

Seems very cool, but I don&#x27;t see the use-case. Anyone can help me?

For some reason it doesn&#x27;t work with password 123

Now make a WP plugin and you&#x27;re set!

There&#x27;s basic authentication for protecting static web pages. It&#x27;s no better or worse than any other password scheme.

I could see some other nifty concept coming alive because of this.

From the source code I was unable to deduce what KDF and Block mode is used with it. Does anybody know what does it use? crypto-js seems to support multiple different KDFs and Block modes.