4 ms·

How to password protect a static HTML page with no JavaScript

AHOHA 3y ago
Nice, I used different tools before and sharing it here if anyone is interested. - Static sites password (1) - Link lock, to lock the url (2) (1) https://github.com/matteobrusa/Password-protection-for-static-pages https://github.com/matteobrusa/Password-protection-for-stati... (2) https://jstrieb.github.io/link-lock/create/ https://jstrieb.github.io/link-lock/create/
- bawolff 3y ago
  If you actually want to do this and are not just looking for the cute hack, you should obviously use http auth. The font method that this post is about is cute but definitely not secure in the slightest.
- egberts1 3y ago
  OP talks about avoiding JavaScript. Your examples make use of JavaScript.
  - AHOHA 3y ago
    Where did I say that it's without js? It's alternative way
ajsnigrutin 3y ago
Am I too old, or why can't you do that with a simple .htaccess?
- ksherlock 3y ago
  Asking the real question. I guess you might want to do it on somebody else's server (GitHub pages, etc).
- shortcake27 3y ago
  You could, but it wouldn’t be agnostic. That requires Apache or a server that’s compatible with .htaccess (eg LiteSpeed).
  - deaddodo 3y ago
    All of the big web servers have some mechanism for implementing server side basic auth (which I assume OP is referencing with ".htaccess". Nginx for instance: https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-http-basic-authentication/ https://docs.nginx.com/nginx/admin-guide/security-controls/c...
- AHOHA 3y ago
  If you have access to server, definitely there are a lot of ways, htaccess is one.
- capableweb 3y ago
  Well, it seems this hack is focused on "password" protecting the page fully client-side, meaning no headers or server auth, while .htaccess would rely on the server. The authors hacky way have the benefit of also password-protecting the contents if you CTRL+S the page in the browser as .html, and send it to someone else.
  - deleted 3y ago
    [deleted]
- mock-possum 3y ago
  That isn’t just html though is it Edit - oh that wasn’t the rule I guess
downvotetruth 3y ago
Seems relatively simpler to use checkbox input and associated Turing completeness (https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...) to input a pass pattern, which could be derived from (ASCII) encoded pass text. A "CSSassembler" to transpile one shot input C programs into HTML+CSS would make a good Obfuscated C entry...
- Dylan16807 3y ago
  That's a manually iterated turing machine. By that I mean: one way to implement turing completeness is arithmetic+looping. In this situation the CSS provides the arithmetic, and the user has to provide the looping. This means it only sort of counts as turing complete, and it's unusably slow for calculations. Especially because rule 110 is on the edge of technical capability and rarely usable even in an optimized environment.
  - downvotetruth 3y ago
    There is no "sort of" Turing complete. CSS3+HTML is complete with the "cranking" system. The theoretical infinite tape of Turing machines is not physically constructable and the more precise (but implied with the Turing concept) name is "linear bounded automaton" see also: https://accodeing.com/blog/2015/duty-calls-css3-is-not-proven-to-be-turing-complete https://accodeing.com/blog/2015/duty-calls-css3-is-not-prove... Also agree that these are not something to be considered to be efficient or optimized, but would rather be a proof of concept.
    - Dylan16807 3y ago
      > CSS3+HTML is complete with the "cranking" system. This statement is correct. The question is whether it's legitimate to omit "with the cranking system" when you talk about the turing completeness, or to treat it as negligible. Because it does a lot more than an actual crank.
      - downvotetruth 3y ago
dec0dedab0de 3y ago
This is pretty neat, but the simple answer is to name the file the password.
- capableweb 3y ago
  That's more like a access password in order to access the file, not a password within the file to protect itself, like this hack does.
  - dec0dedab0de 3y ago
    Yeah, this is a cool hack. I was just giving a cheap answer to the headline. Kind of like pointing out that the shortest quine in many languages is a blank file.
seer 3y ago
Hah, I’m too old. Still remember the time when basic http auth was a big thing, and you read articles like “how to do password authentication “dynamically”… I guess its a good thing that people have gone through hype and now are in search for a smaller more focused tool. I wonder why standard committees don’t seem to be working on a auth solution that doesn’t require code and is more just markup/server config, but with modern things like passkeys and stuff… or maybe I’ve missed something obvious.
- dec0dedab0de 3y ago
  Every time I have to make an auth page I get mad that basic auth sucks, because it really should be built into the browser. If I had to guess, I would say that the web was supposed to be stateless, and cookies/local storage were tacked on after the fact to give it state, so by the time WebApps became more common than web pages people were already used to custom login pages.
  - deaddodo 3y ago
    > because it really should be built into the browser. It is? And I imagine that's why it "sucks" for you, since I think you actually mean it should be built-in to the HTML / Styling of the site. But that would defeat the purpose, to a degree.
    - dec0dedab0de 3y ago
      Sorry, I may have worded that a bit weird. I meant that basic auth sucks, so we can't use it and take advantage of the login built in the browser. Basic auth sucks because it sends the password for every request, and for get requests it shows in the url, and ends up in logs and whatnot. I don't care about styling at all.
      - bawolff 3y ago
        > Basic auth sucks because it sends the password for every request, Normal auth sends a cookie every request. That is really the same. You have to do state somehow. > and for get requests it shows in the url This is not true
TJSomething 3y ago
Given the Turing completeness of fonts, you might be able to do actual encryption with a custom font that has a key baked in.
ochronus 3y ago
ChatGPT says hello: Yes, this text is encrypted using a simple Caesar cipher, specifically ROT13. The ROT13 ("rotate by 13 places") is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. It's an example of the Caesar cipher, developed in ancient Rome. When I apply ROT13 decryption to your text, the result is: "This is my super secret text. No one can read it. Not even Caesar himself! If you want to understand how this incredibly strong and foolproof encryption works" --- cool hack, though, TIL!
egberts1 3y ago
This method is most useful for sending unscanned links thru your emails. That is, to avoid having your "not-so-secret" link having your "secret content" from being scanned by their "content" scanners or conversation "recorders" (as often mandated by SEC and Feds). While it can easily be used for nefarious purposes, it does have valid usages such as sending license info, one-shot correspondence, crash dump, or anything that can be legally pastebin.

Nice, I used different tools before and sharing it here if anyone is interested. - Static sites password (1) - Link lock, to lock the url (2) (1) https://github.com/matteobrusa/Password-protection-for-static-pages https://github.com/matteobrusa/Password-protection-for-stati... (2) https://jstrieb.github.io/link-lock/create/ https://jstrieb.github.io/link-lock/create/

bawolff 3y ago
If you actually want to do this and are not just looking for the cute hack, you should obviously use http auth. The font method that this post is about is cute but definitely not secure in the slightest.
egberts1 3y ago
OP talks about avoiding JavaScript. Your examples make use of JavaScript.
- AHOHA 3y ago
  Where did I say that it's without js? It's alternative way

ajsnigrutin 3y ago

Am I too old, or why can't you do that with a simple .htaccess?

ksherlock 3y ago
Asking the real question. I guess you might want to do it on somebody else's server (GitHub pages, etc).
shortcake27 3y ago
You could, but it wouldn’t be agnostic. That requires Apache or a server that’s compatible with .htaccess (eg LiteSpeed).
- deaddodo 3y ago
  All of the big web servers have some mechanism for implementing server side basic auth (which I assume OP is referencing with ".htaccess". Nginx for instance: https://docs.nginx.com/nginx/admin-guide/security-controls/configuring-http-basic-authentication/ https://docs.nginx.com/nginx/admin-guide/security-controls/c...
AHOHA 3y ago
If you have access to server, definitely there are a lot of ways, htaccess is one.
capableweb 3y ago
Well, it seems this hack is focused on "password" protecting the page fully client-side, meaning no headers or server auth, while .htaccess would rely on the server. The authors hacky way have the benefit of also password-protecting the contents if you CTRL+S the page in the browser as .html, and send it to someone else.
- deleted 3y ago
  [deleted]
mock-possum 3y ago
That isn’t just html though is it Edit - oh that wasn’t the rule I guess

downvotetruth 3y ago

Seems relatively simpler to use checkbox input and associated Turing completeness (https://accodeing.com/blog/2015/css3-proven-to-be-turing-complete https://accodeing.com/blog/2015/css3-proven-to-be-turing-com...) to input a pass pattern, which could be derived from (ASCII) encoded pass text. A "CSSassembler" to transpile one shot input C programs into HTML+CSS would make a good Obfuscated C entry...

Dylan16807 3y ago
That's a manually iterated turing machine. By that I mean: one way to implement turing completeness is arithmetic+looping. In this situation the CSS provides the arithmetic, and the user has to provide the looping. This means it only sort of counts as turing complete, and it's unusably slow for calculations. Especially because rule 110 is on the edge of technical capability and rarely usable even in an optimized environment.
- downvotetruth 3y ago
  There is no "sort of" Turing complete. CSS3+HTML is complete with the "cranking" system. The theoretical infinite tape of Turing machines is not physically constructable and the more precise (but implied with the Turing concept) name is "linear bounded automaton" see also: https://accodeing.com/blog/2015/duty-calls-css3-is-not-proven-to-be-turing-complete https://accodeing.com/blog/2015/duty-calls-css3-is-not-prove... Also agree that these are not something to be considered to be efficient or optimized, but would rather be a proof of concept.
  - Dylan16807 3y ago
    > CSS3+HTML is complete with the "cranking" system. This statement is correct. The question is whether it's legitimate to omit "with the cranking system" when you talk about the turing completeness, or to treat it as negligible. Because it does a lot more than an actual crank.
    - downvotetruth 3y ago

dec0dedab0de 3y ago

This is pretty neat, but the simple answer is to name the file the password.

capableweb 3y ago
That's more like a access password in order to access the file, not a password within the file to protect itself, like this hack does.
- dec0dedab0de 3y ago
  Yeah, this is a cool hack. I was just giving a cheap answer to the headline. Kind of like pointing out that the shortest quine in many languages is a blank file.

seer 3y ago

Hah, I’m too old. Still remember the time when basic http auth was a big thing, and you read articles like “how to do password authentication “dynamically”… I guess its a good thing that people have gone through hype and now are in search for a smaller more focused tool. I wonder why standard committees don’t seem to be working on a auth solution that doesn’t require code and is more just markup/server config, but with modern things like passkeys and stuff… or maybe I’ve missed something obvious.

dec0dedab0de 3y ago
Every time I have to make an auth page I get mad that basic auth sucks, because it really should be built into the browser. If I had to guess, I would say that the web was supposed to be stateless, and cookies/local storage were tacked on after the fact to give it state, so by the time WebApps became more common than web pages people were already used to custom login pages.
- deaddodo 3y ago
  > because it really should be built into the browser. It is? And I imagine that's why it "sucks" for you, since I think you actually mean it should be built-in to the HTML / Styling of the site. But that would defeat the purpose, to a degree.
  - dec0dedab0de 3y ago
    Sorry, I may have worded that a bit weird. I meant that basic auth sucks, so we can't use it and take advantage of the login built in the browser. Basic auth sucks because it sends the password for every request, and for get requests it shows in the url, and ends up in logs and whatnot. I don't care about styling at all.
    - bawolff 3y ago
      > Basic auth sucks because it sends the password for every request, Normal auth sends a cookie every request. That is really the same. You have to do state somehow. > and for get requests it shows in the url This is not true

TJSomething 3y ago

Given the Turing completeness of fonts, you might be able to do actual encryption with a custom font that has a key baked in.

ochronus 3y ago

ChatGPT says hello: Yes, this text is encrypted using a simple Caesar cipher, specifically ROT13. The ROT13 ("rotate by 13 places") is a simple letter substitution cipher that replaces a letter with the 13th letter after it in the alphabet. It's an example of the Caesar cipher, developed in ancient Rome. When I apply ROT13 decryption to your text, the result is: "This is my super secret text. No one can read it. Not even Caesar himself! If you want to understand how this incredibly strong and foolproof encryption works" --- cool hack, though, TIL!

egberts1 3y ago

This method is most useful for sending unscanned links thru your emails. That is, to avoid having your "not-so-secret" link having your "secret content" from being scanned by their "content" scanners or conversation "recorders" (as often mandated by SEC and Feds). While it can easily be used for nefarious purposes, it does have valid usages such as sending license info, one-shot correspondence, crash dump, or anything that can be legally pastebin.