密码保护静态HTML页面.zip

<p align="center"><img src="preview.png" alt="password prompt preview" width="480"/></p> # StatiCrypt StatiCrypt uses AES-256 to encrypt your HTML file with your long password and return a static page including a password prompt and the javascript decryption logic that 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 _public_ static HTML file, without any back-end** - serving it over Netlify, GitHub pages, etc. (see the detail of [how it works](#how-staticrypt-works)). 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. ## CLI ### Installation Staticrypt is available through npm as a CLI, install with ```bash 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 ...`. ### Examples > These will create a `.staticrypt.json` file in the current directory, see the FAQ as to why. You can prevent it by setting the `--config` flag to "false". **Encrypt a file:** Encrypt `test.html` and create a `test_encrypted.html` file (add `-o my_encrypted_file.html` to change the name of the output file): ```bash staticrypt test.html MY_LONG_PASSWORD ``` **Encrypt a file with the password in an environment variable:** set your long password in the `STATICRYPT_PASSWORD` environment variable ([`.env` files](https://www.npmjs.com/package/dotenv#usage) are supported): ```bash # the password is in the STATICRYPT_PASSWORD env variable staticrypt test.html ``` **Encrypt a file and get a shareable link containing the hashed password** - you can include your file URL or leave blank: ```bash # you can also pass '--share' without specifying the URL to get the `?staticrypt_pwd=...` staticrypt test.html MY_LONG_PASSWORD --share https://example.com/test_encrypted.html # => https://example.com/test_encrypted.html?staticrypt_pwd=5bfbf1343c7257cd7be23ecd74bb37fa2c76d041042654f358b6255baeab898f ``` **Encrypt all html files in a directory** and replace them with encrypted versions (`{}` will be replaced with each file name by the `find` command - if you wanted to move the encrypted files to an `encrypted/` directory, you could use `-o encrypted/{}`): ```bash find . -type f -name "*.html" -exec staticrypt {} MY_LONG_PASSWORD -o {} \; ``` **Encrypt all html files in a directory except** the ones ending in `_encrypted.html`: ```bash find . -type f -name "*.html" -not -name "*_encrypted.html" -exec staticrypt {} MY_LONG_PASSWORD \; ``` ### CLI Reference The password argument is optional if `STATICRYPT_PASSWORD` is set in the environment or `.env` file. Usage: staticrypt <filename> [<password>] [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"] --decrypt-button Label to use for the decrypt button. Default: "DECRYPT". [string] [default: "DECRYPT"] -e, --embed Whether or not to embed crypto-js in the page (or use an external CDN). [boolean] [default: true] -f, --file-template Path to custom HTML template with password prompt. [string] [default: "/code/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 password. [string] [default: "Bad password!"] --noremember Set this flag to remove the "Remember me" checkbox. [boolean] [default: false] -o, --output File name/path for the generated encrypted file. [string] [default: null] --passphrase-placeholder Placeholder to use for the password input. [string] [default: "Password"] -r, --remember Expiration in days of the "Remember me" checkbox that will save the (salted + hashed) password in localStorage when entered by the user. Default: "0", no expiration. [number] [default: 0] --remember-label Label to use for the "Remember me" checkbox. [string] [default: "Remember me"] -s, --salt Set the salt manually. It should be set if you want to use "Remember me" through multiple pages. It needs to be a 32-character-long hexadecimal 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] --short Hide the "short password" warning. [boolean] [default: false] -t, --title Title for the output HTML page. [string] [default: "Protected Page"] ## HOW STATICRYPT WORKS So, how can you password protect html without a back-end? 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 a password, and the javascript will decrypt and load your HTML, all done in the browser. So it basically encrypts your page and puts everything in a user-friendly way to use a password in the new file. ## FAQ ### Is it secure? Simple answer: your file content has been encrypted with AES-256 (CBC), a popular and strong encryption algorithm, you can now upload it in any public place and no one will be able to read it without the password. So if you used a long, strong password, then yes it should be pretty secure. That being said, actual security always depends on a number of factors and on the threat model you want to protect against. Because your full encrypted file is accessible client side, brute-force/dictionary attacks would be easy to do at a really fast pace: **use a long, unusual password**. We recommend 16+ alphanum characters, [Bitwarden](https://bitwarden.com/) is a great open-source password manager if you don't have one already. On the technical aspects: we use AES in CBC mode (see a discussion on why it's appropriate for StatiCrypt in [#19](https://github.com/robinmoisson/staticrypt/issues/19)) and 15k PBKDF2 iterations (it will be 600k when we'll switch to WebCrypto, read a detailed r