Staticrypt
Password protect a static HTML page, decrypted in-browser in JS with no dependency. No server logic needed.
Install / Use
/learn @robinmoisson/StaticryptREADME
StatiCrypt
Safely encrypt and password protect the content of your public static HTML file, to be decrypted in-browser without any back-end - to serve it over static hosting like Netlify, GitHub pages, etc. (see a live example).
StatiCrypt uses AES-256 and WebCrypto to encrypt your HTML file with your long password, and returns a static HTML page showing a password prompt that you can now safely upload anywhere, the page containing your encrypted content and decryption happening in javascript client side (see the details of how it works).
👉️ You can encrypt a file online in your browser (client side) at robinmoisson.github.io/staticrypt, or use the CLI to do it in your terminal or build process.
🌱 Supporting: If you want to support StatiCrypt development you can do so by clicking on the sponsor button (you can also come study meditation with me, or use my other tool to translate books). See how donations are used. Thank you for your support!
<a href="https://github.com/sponsors/robinmoisson"><img src="https://user-images.githubusercontent.com/5664025/234358001-65dfb967-19ab-49da-a8f5-27deca92ceb1.png" alt="Sponsor" /></a>
CLI
Migration: v3 brings many improvements, a clearer CLI and simpler password_template over v2. See the migration guide from v2 to v3. v3 uses WebCrypto which is only available in HTTPS or localhost contexts, so if you need to use it in HTTP you'll need to use v2.
Installation
Staticrypt is available through npm as a CLI, install with
npm install staticrypt
You can then run it with npx staticrypt .... You can also install globally with npm install -g staticrypt and then just call staticrypt ... from anywhere.
Examples
These examples will create a
.staticrypt.jsonfile in the current directory (here's why). This file isn't secret and you don't need to protect it. You can prevent this by setting the--configflag tofalse(a string).
Encrypt a file
Encrypt test.html and create a encrypted/test.html file (use -d my_directory to change the output directory):
# this will prompt you for the password, which won't stay in your terminal command history
staticrypt test.html
# you can also pass the password as an argument
staticrypt test.html -p <long-password>
Encrypt a file with the password in an environment variable
Set your long password in the STATICRYPT_PASSWORD environment variable (.env files are supported):
# the password is in the STATICRYPT_PASSWORD env variable, you won't be prompted
staticrypt test.html
Encrypt multiple HTML files at once
This will put the HTML files in an encrypted directory, created where you run the staticrypt command. Non-HTML files will be copied as-is from the input directory, so you can easily overwrite it with the encrypted directory if you want.
# this will encrypt test_A.html and test_B.html
staticrypt test_A.html test_B.html
# => encrypted files are in encrypted/test_A.html and encrypted/test_B.html
# you can also use the -r flag to recursively encrypt all files in a directory
staticrypt dir_to_encrypt -r
# => encrypted files are in encrypted/dir_to_encrypt/...
# if you don't want to include the directory name in the output path, you can use
# `dir_to_encrypt/*` instead. `-r` will include potential subdirectories as well
staticrypt dir_to_encrypt/* -r
# => encrypted files are in encrypted/...
Replace all the files in a folder with encrypted ones
# 'dir_to_encrypt/*' as argument will select all the files in the directory ('-r' recursively),
# and the '-d dir_to_encrypt' will put them in the same directory, overwriting the files
staticrypt dir_to_encrypt/* -r -d dir_to_encrypt
Get a shareable auto-decrypt link
The link contains the hashed password, that will auto-decrypt the file - you can include your file URL or leave blank. (⚠️ you should keep your .staticrypt.json so the salt is the same each time you encrypt, or re-encrypting will invalidate the link):
# you can also pass '--share' without specifying the URL to get the `#staticrypt_pwd=...`
staticrypt test.html --share https://example.com/encrypted.html
# => https://example.com/encrypted.html#staticrypt_pwd=5bfbf1343c7257cd7be23ecd74bb37fa2c76d041042654f358b6255baeab898f
# add --share-remember to auto-enable "Remember-me" - useful if you want send one link to
# autodecrypt multiple pages (you can also just append '&remember_me')
staticrypt test.html --share --share-remember
# => #staticrypt_pwd=5bfbf1343c7257cd7be23ecd74bb37fa2c76d041042654f358b6255baeab898f&remember_me
Pin the salt to use staticrypt in your CI or build step
If you want want the "Remember-me" or share features to work accross multiple pages or multiple successive deployment, the salt needs to stay the same (see why). If you run StatiCrypt in a CI step, you can pin the salt in two ways:
-
either commit the
.staticrypt.jsonconfig file - you can generate a random salt and config file on your local machine with:staticrypt --salt -
or hardcode the salt in the encryption command in the CI script:
staticrypt test.html --salt 12345678901234567890123456789012
See an example of how to use StatiCrypt in a CI build step in this community project: a-nau/password-protected-website-template
Customize the password prompt
Customize the HTML to have the encrypted page match your style (see the FAQ for a full custom template):
# use your own custom template
staticrypt test.html -t my/own/password_template.html
# or customize the default template
staticrypt test.html \
--template-color-primary "#fd45a4" \
--template-title "My custom title" \
--template-instructions "To unlock this file, you should..." \
# ...
Decrypt files from the CLI
Decrypt files you encrypted earlier with StatiCrypt straight from the CLI by including the --decrypt flag. (So if you want, you can keep only the encrypted files.) The -r|--recursive flag and output -d|--directory option work the same way as when encrypting (default name for the output directory is decrypted):
staticrypt encrypted/test.html --decrypt
# => decrypted file is in decrypted/test.html
CLI Reference
The password argument is optional if STATICRYPT_PASSWORD is set in the environment or .env file.
Usage: staticrypt <filename> [<filename> ...] [options]
Options:
--help Show help [boolean]
--version Show version number [boolean]
-c, --config Path to the config file. Set to "false" to
disable.[string] [default: ".staticrypt.json"]
-d, --directory Name of the directory where the generated
files will be saved. If the '--decrypt' flag
is set, default will be 'decrypted'.
[string] [default: "encrypted"]
--decrypt Include this flag to decrypt files instead of
encrypt. [boolean] [default: false]
-p, --password The password to encrypt your file with. Leave
empty to be prompted for it. If
STATICRYPT_PASSWORD is set in the env, we'll
use that instead. [string] [default: null]
-r, --recursive Whether to recursively encrypt the input
directory. [boolean] [default: false]
--remember Integer: expiration in days of the "Remember
me" checkbox that will save the (salted +
hashed) password in localStorage when entered
by the user. Set to "false" to hide the box.
Default: "0", no expiration. [default: 0]
-s, --salt Generate a config file or set the salt
manually. Pass a 32-character-long hexadecimal
string to use as salt, or leave empty to
generate, display and save to config a random
salt. This won't overwrite an existing config
file. [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.
