Skip to content

Commit

Permalink
add share feature
Browse files Browse the repository at this point in the history
  • Loading branch information
robinmoisson committed Nov 20, 2022
1 parent 7e9578d commit 76e972e
Show file tree
Hide file tree
Showing 8 changed files with 94 additions and 37 deletions.
69 changes: 40 additions & 29 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,12 @@

# StatiCrypt

StatiCrypt uses AES-256 to encrypt your HTML file with your passphrase and return a static page with a password prompt you can safely upload anywhere (see [example](https://robinmoisson.github.io/staticrypt/)).
StatiCrypt uses AES-256 to encrypt your HTML file with your passphrase and return a static page including a password prompt and the javascript decryption logic you can safely upload anywhere (see [what the page looks like](https://robinmoisson.github.io/staticrypt/example/example_encrypted.html)).

This means you can password protect the content of your static HTML file while still having the whole file completely public, without any back-end - serving it over Netlify, GitHub pages, etc.
This means you can **password protect the content of your _public_ static HTML file, without any back-end** - serving it over Netlify, GitHub pages, etc. (see [how it works](#how-can-we-password-protect-html-without-a-back-end?)).

You can encrypt a file online in your browser (client side) at https://robinmoisson.github.io/staticrypt, or use the CLI to do it in your build process.

## HOW IT WORKS

StatiCrypt use the [crypto-js](https://github.com/brix/crypto-js) library to generate a static, password protected page that can be decrypted in-browser: just send or upload the generated page to a place serving static content (github pages, for example) and you're done: the javascript will prompt users for password, decrypt the page and load your HTML.

It basically encrypts your page and puts everything with a user-friendly way to use a password in the new file.

AES-256 is state of the art but brute-force/dictionary attacks would be trivial to do at a really fast pace: **use a long, unusual passphrase**.

**Disclaimer:** The concept is simple and should work ok but I am not a cryptographer, if you have sensitive banking or crypto data you might want to use something else. :)

You can report thoughts and issues to the [GitHub project](https://robinmoisson.github.io/staticrypt) but be warned I might be extremely slow to respond (though the community might help). If a serious security issue is reported I'll try to fix it quickly.

## CLI

Staticrypt is available through npm as a CLI, install with `npm install -g staticrypt` (with or without the `-g` flag). If without the `-g` flag, you can call the command with `npx staticrypt ...`.
Expand Down Expand Up @@ -62,15 +50,17 @@ find . -type f -name "*.html" -not -name "*_encrypted.html" -exec staticrypt {}
[boolean] [default: true]
-f, --file-template Path to custom HTML template with passphrase
prompt.
[string] [default: "/geek/staticrypt/cli/password_template.html"]
[string] [default: "/geek/staticrypt/lib/password_template.html"]
-i, --instructions Special instructions to display to the user.
[string] [default: ""]
--label-error Error message to display on entering wrong
passphrase. [string] [default: "Bad password!"]
--noremember Set this flag to remove the "Remember me"
checkbox. [boolean] [default: false]
-o, --output File name / path for generated encrypted file.
[string] [default: null]
--passphrase-placeholder Placeholder to use for the passphrase input.
[string] [default: "Passphrase"]
[string] [default: "Password"]
-r, --remember Expiration in days of the "Remember me" checkbox
that will save the (salted + hashed) passphrase
in localStorage when entered by the user.
Expand All @@ -84,36 +74,39 @@ find . -type f -name "*.html" -not -name "*_encrypted.html" -exec staticrypt {}
string.
Include the empty flag to generate a random salt
you can use: "statycrypt -s". [string]
--share Get a link containing your hashed password that
will auto-decrypt the page. Pass your URL as a
value to append "?staticrypt_pwd=<hashed_pwd>",
or leave empty to display the hash to append.
[string]
-t, --title Title for output HTML page.
[string] [default: "Protected Page"]

## HOW STATICRYPT WORKS

So, how can we password protect html without a back-end?

### "Remember me" checkbox
StatiCrypt uses the [crypto-js](https://github.com/brix/crypto-js) library to generate a static, password protected page that can be decrypted in-browser. You can then just send or upload the generated page to a place serving static content (github pages, for example) and you're done: the page will prompt users for password, and the javascript will decrypt and load your HTML, all done in browser.

The CLI will add a "Remember me" checkbox on the password prompt by default (`--noremember` to disable). If the user checks it, the (salted + hashed) passphrase will be stored in their browser's localStorage and the page will attempt to auto-decrypt when they come back.
So it basically encrypts your page and puts everything with a user-friendly way to use a password in the new file.

If no value is provided the stored passphrase doesn't expire, you can also give it a value in days for how long should the store value be kept with `-r NUMBER_OF_DAYS`. If the user reconnects to the page after the expiration date the stored value will be cleared.
You can report thoughts and issues to the [GitHub project](https://robinmoisson.github.io/staticrypt) but be warned I might be quite slow to respond (though the community might help). If a serious security issue is reported I'll try to fix it quickly.

#### "Logging out"

You can clear StatiCrypt values in localStorage (effectively "logging out") at any time by appending `staticrypt_logout` to the URL query parameters (`mysite.com?staticrypt_logout`).

#### Encrypting multiple pages
## FAQ

This allows encrypting multiple page on a single domain with the same password: if you check "Remember me", you'll have to enter you password once then all the pages on that domain will automatically decrypt their content. Because the hashed value is stored in the browser's localStorage, this will only work if all the pages are on the same domain name.
### Is it secure?

#### Is it secure?
The protected file has been encrypted with AES-256 (CBC), a very popular encryption algorithm, and you can now upload your file in any public place without anyone being able to read it.

In case the value stored in browser becomes compromised an attacker can decrypt the page, but because it's stored salted and hashed this should still protect against password reuse attack if you've used the passphrase on other websites (of course, please use a unique passphrase nonetheless).
Actual security always depends on a number of factors - because your full encrypted file is accessible in browser, brute-force/dictionary attacks would be trivial to do at a really fast pace: **use a long, unusual passphrase**.

## FAQ
**Important disclaimer:** I am not a cryptographer, and though the concept is simple and I try my best to implement it correctly it is easy to unknowingly weaken cryptography in subtle ways. If you are an at-risk activist profile or have sensitive banking or crypto data to protect, you might want to use something else!

### Can I customize the password prompt?

Yes! Just copy `cli/password_template.html`, modify it to suit your style and point to your template file with the `-f path/to/my/file.html` flag. Be careful to not break the encrypting javascript part, the variables replaced by StatiCrypt are between curly brackets: `{salt}`.

### Can I prevent the "Remember me" checkbox?
### Can I remove the "Remember me" checkbox?

If you don't want the checkbox to be included, you can add the `--noremember` flag to disable it.

Expand All @@ -131,6 +124,24 @@ If you don't want StatiCrypt to create or use the config file, you can set `--co

The salt isn't secret, so you don't need to worry about hiding the config file.

### How does the "Remember me" checkbox works?

The CLI will add a "Remember me" checkbox on the password prompt by default (`--noremember` to disable). If the user checks it, the (salted + hashed) passphrase will be stored in their browser's localStorage and the page will attempt to auto-decrypt when they come back.

If no value is provided the stored passphrase doesn't expire, you can also give it a value in days for how long should the store value be kept with `-r NUMBER_OF_DAYS`. If the user reconnects to the page after the expiration date the stored value will be cleared.

#### "Logging out"

You can clear StatiCrypt values in localStorage (effectively "logging out") at any time by appending `staticrypt_logout` to the URL query parameters (`mysite.com?staticrypt_logout`).

#### Encrypting multiple pages

This allows encrypting multiple page on a single domain with the same password: if you check "Remember me", you'll have to enter you password once then all the pages on that domain will automatically decrypt their content. Because the hashed value is stored in the browser's localStorage, this will only work if all the pages are on the same domain name.

#### Is the "Remember me" checkbox secure?

In case the value stored in browser becomes compromised an attacker can decrypt the page, but because it's stored salted and hashed this should still protect against password reuse attack if you've used the passphrase on other websites (of course, please use a unique passphrase nonetheless).

## Contributing

### Source Directories
Expand Down
18 changes: 17 additions & 1 deletion cli/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ const yargs = Yargs.usage("Usage: staticrypt <filename> <passphrase> [options]")
describe: 'Label to use for the "Remember me" checkbox.',
default: "Remember me",
})
// do not give a default option to this 'remember' parameter - we want to see when the flag is included with no
// do not give a default option to this parameter - we want to see when the flag is included with no
// value and when it's not included at all
.option("s", {
alias: "salt",
Expand All @@ -94,6 +94,14 @@ const yargs = Yargs.usage("Usage: staticrypt <filename> <passphrase> [options]")
'can use: "statycrypt -s".',
type: "string",
})
// do not give a default option to this parameter - we want to see when the flag is included with no
// value and when it's not included at all
.option("share", {
describe:
'Get a link containing your hashed password that will auto-decrypt the page. Pass your URL as a value to append '
+ '"?staticrypt_pwd=<hashed_pwd>", or leave empty to display the hash to append.',
type: "string",
})
.option("t", {
alias: "title",
type: "string",
Expand Down Expand Up @@ -157,6 +165,14 @@ if (isUsingconfigFile && config.salt !== salt) {
const input = namedArgs._[0].toString(),
passphrase = namedArgs._[1].toString();

// display the share link with the hashed password if the --share flag is set
if (isOptionSetByUser("share", yargs)) {
const url = namedArgs.share || "";
const hashedPassphrase = cryptoEngine.hashPassphrase(passphrase, salt);

console.log(url + "?staticrypt_pwd=" + hashedPassphrase);
}

// get the file content
let contents;
try {
Expand Down
19 changes: 17 additions & 2 deletions example/example_encrypted.html
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,7 @@
var decode = codec.init(cryptoEngine).decode;

// variables to be filled when generating the file
var encryptedMsg = 'a0686ab0d1f652fd473e8f0a876c78ae62e4869bbc1cfaf913557165a0d917c95f0dafd66b6d96b99ebead24c65aeb7bU2FsdGVkX1+p3jQV07SFDxuUhlQ4LlOK4ai/CejVGCLUDDUMe3bgXU9EOh/HFiw6qc93Akgbwxppf5RE5j4e58Z/xgKXOrgbOBJKQ80b3KO6sLZiaq3CbrBpMVk/PF+o+xLxxTy07n8hwj7CvMfTtev5BoNxintzmNRS2VdZ8bVuHTcOWVkZw039Ups6RX1TSpFqJBvWguOnvdrmnnG8ZA==',
var encryptedMsg = '478627e72cfebfb4f084f81acf8deab7db7b07bf68df85054f6c6048c3eea0674520fcff67d494506f45f5c35883f4b0U2FsdGVkX19dot7XcHBLAjG0qZT6Fwy5aRIHtguHbX+6vD3gyK+UwhoDPtzxR9DRDMtOtfPirCuq2cHm1z1U6CwFAzeVTFXaaUZ8NeJmLUg+KoKEYAY0cld9hFft17qWjBMjLjTEPAmx22i4ZIqKkDOLHc6DMTSs2OQ7gw+4ym36KvL4G2zIJbVJ88p7N/UjfG+IcseGbyie4Dzc5h9v/Q==',
salt = 'b93bbaf35459951c47721d1f3eaeb5b9',
labelError = 'Bad password!',
isRememberEnabled = true,
Expand Down Expand Up @@ -437,9 +437,24 @@
return false;
}

function decryptOnLoadFromQueryParam() {
var queryParams = new URLSearchParams(window.location.search);
var hashedPassphrase = queryParams.get("staticrypt_pwd");

if (hashedPassphrase) {
return decryptAndReplaceHtml(hashedPassphrase);
}

return false;
}

// try to automatically decrypt on load if there is a saved password
window.onload = function () {
var hasDecrypted = decryptOnLoadFromRememberMe();
var hasDecrypted = decryptOnLoadFromQueryParam();

if (!hasDecrypted) {
hasDecrypted = decryptOnLoadFromRememberMe();
}

// if we didn't decrypt anything, show the password prompt. Otherwise the content has already been replaced, no
// need to do anything
Expand Down
2 changes: 1 addition & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ <h4>
Embed crypto-js into your file
<small>
<abbr class="text-muted"
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN (some adblockers might think it's a crypto miner).">
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN.">
(?)
</abbr>
</small>
Expand Down
17 changes: 16 additions & 1 deletion lib/password_template.html
Original file line number Diff line number Diff line change
Expand Up @@ -305,9 +305,24 @@
return false;
}

function decryptOnLoadFromQueryParam() {
var queryParams = new URLSearchParams(window.location.search);
var hashedPassphrase = queryParams.get("staticrypt_pwd");

if (hashedPassphrase) {
return decryptAndReplaceHtml(hashedPassphrase);
}

return false;
}

// try to automatically decrypt on load if there is a saved password
window.onload = function () {
var hasDecrypted = decryptOnLoadFromRememberMe();
var hasDecrypted = decryptOnLoadFromQueryParam();

if (!hasDecrypted) {
hasDecrypted = decryptOnLoadFromRememberMe();
}

// if we didn't decrypt anything, show the password prompt. Otherwise the content has already been replaced, no
// need to do anything
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "staticrypt",
"version": "2.1.1",
"version": "2.2.0",
"description": "Based on the [crypto-js](https://github.com/brix/crypto-js) library, StatiCrypt uses AES-256 to encrypt your input with your passphrase and put it in a HTML file with a password prompt that can decrypted in-browser (client side).",
"main": "index.js",
"files": [
Expand Down
2 changes: 1 addition & 1 deletion scripts/index_template.html
Original file line number Diff line number Diff line change
Expand Up @@ -181,7 +181,7 @@ <h4>
Embed crypto-js into your file
<small>
<abbr class="text-muted"
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN (some adblockers might think it's a crypto miner).">
title="Leave checked to include crypto-js into your file so you can decrypt it offline. Uncheck to load crypto-js from a CDN.">
(?)
</abbr>
</small>
Expand Down

0 comments on commit 76e972e

Please sign in to comment.