Encrypt html with password

StatiCrypt

StatiCrypt uses AES-256 with WebCrypto to encrypt your html string with your long password, in your browser (client side).

Download your encrypted string in a HTML page with a password prompt you can upload anywhere (see example).

The tool is also available as a CLI on NPM and is open source on GitHub.

► HOW IT WORKS

Disclaimer if you are an at-risk activist, or have extra sensitive banking data, you should probably use something else!

StatiCrypt generates 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.

The page is encrypted with AES-256 in CBC mode (see why this mode is appropriate for StatiCrypt in #19). The password is hashed with PBKDF2 (599k iterations with SHA-256, plus 1k with SHA-1 for legacy reasons (see #159), for the added recommended total of 600k) and used to encrypt the page.

Читайте также:  Примеры карточки товара html css

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 easy to do at a really fast pace: use a long, unusual password!
=> To be safe, we recommend 16+ alphanum characters, and using a password manager like the open-source Bitwarden.

Feel free to contribute or report any thought to the GitHub project.

Источник

PageCrypt — Password Protect HTML

This tool lets you securely password-protect an HTML file. Unlike other password-protection tools, this tool:

  1. Has no server-side components (this tool and its password-protected pages run entirely in javascript).
  2. Uses strong encryption, so the password-protection cannot be bypassed.

All you need to do is choose an HTML file and a password, and your page will be password-protected.

Live Demo (pssst. the live demo password is «hunter2»)

Instructions

Passwords don’t match, try again.

Done! Check your downloads!

Suggested donation is $5 for personal use, or $10-20 for businesses. Honor system!

FAQ

Why do the resulting password-protected HTML documents only work when served via HTTPS?

Due to browser limitations, PageCrypt protected pages only work if served over a secure HTTPS connection (or if the .html file is opened directly from disk). This is because of some technical stuff involving SubtleCrypto and Secure Contexts. To produce html files that work over insecure HTTP connections, please use the legacy version of PageCrypt, which produces larger, less strongly protected documents.

How can this be secure if it’s client-side? Can’t people just bypass the password?

The HTML gets encrypted using the password, so it is unreadable without the password. An attacker could extract the encrypted document, but it would be an unusable mess until they decrypt it, which can only be done with the original password.

How do I know you’re not keeping track of passwords I enter into this tool?

View the source code for this tool (in your browser and/or on GitHub) and you can see for yourself that the password never leaves your computer!

Why would I want to use this instead of a .htaccess user/password prompt?

Standard user/password prompts require you have some sort of privileged access to the server. With Apache for instance, you need to be able to add a .htaccess file to the directory you want to protect. Since this tool produces a standard HTML file, you can host it literally anywhere, even places that don’t give you access to the server configuration.

This means you can use this tool to password-protect files without using .htaccess!

Does this encrypt all the CSS/Javascript/Images or only the HTML itself?

This tool only encrypts the HTML document itself. If you inline your CSS/JS, or if you convert your images to data uris, then they will be encrypted too. Otherwise they will just be linked. Since the HTML itself is encrypted though, a visitor without the password will not be able see the URLs of any of the linked resources.

What sort of crypto do you use?

This tool uses the SubtleCrypto JavaScript API for its encryption. First, an encryption key is derived from the password using PBKDF2 and a random salt with 100,000 rounds. Then the HTML is encrypted using AES256.

Is there a way to automate this or use it as a software library?

See Samuel Plumppu’s rewrite of PageCrypt, which includes CLI and NPM automation, and NodeJS API support.

Finally, see Brent Scott’s R-wrapper for PageCrypt. From the project page: «It is very common for R users to knit Rmarkdown documents to HTML docs. This provides an easy way to PageCrypt those documents without leaving R.»

More Info

Project by Maximillian Laumeister. The source code and license are available on GitHub.

THE SOFTWARE IS PROVIDED «AS IS», WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Источник

Password Protect Static Sites with PageCrypt

Render takes your infrastructure problems away and gives you a battle-tested, powerful, and cost-effective cloud with an outstanding developer experience. Focus on building your apps, shipping fast, and delighting your customers, and leave your cloud infrastructure to us.

Password protecting static sites is tricky. You could use window.prompt() to ask a site visitor to enter a password before the site content is revealed, but a resourceful visitor will quickly get around this with right-click, view source (or curl or numerous other ways). All of the site’s HTML, CSS, and JavaScript are served to the web browser, and they constitute the entirety of the site.

If you are using a backend API that the static site pulls data from (like many single-page apps do these days), you could require authentication for API requests, but this doesn’t protect the HTML, CSS, and JavaScript.

In trying to find a good solution for this for Render users, we discovered PageCrypt. It’s a free, open source library that allows you to password protect these static assets securely. Let’s investigate how PageCrypt works and test it out!

  • Only encrypts a single HTML file by default
  • Only supports a single shared password (no per-user passwords)

What is it, and how does it work?

PageCrypt is a novel solution to password protecting HTML without a backend. It’s a library you can use as part of your site’s build step or as a command line tool. It uses the Web Crypto API — currently supported by all major browsers — and a password to encrypt an HTML page, which you can then host on any static hosting platform, including Render! An HTML page encrypted with PageCrypt prompts the viewer for a password. Upon entering the correct password, the page is decrypted and its content replaces the password prompt.

A screenshot of a PageCrypt-encrypted HTML page in Google Chrome's elements inspector.

After the correct password is entered, your page content is decrypted and shown.

To make it easier for users to access password protected pages, PageCrypt also allows you to create a “magic link” that decrypts the page without prompting the user for a password. The format for the magic link is https://# , placing the password in a URI fragment. Check out the project’s README section about magic links to better understand the security implications. When your browser goes to a URL containing a URI fragment, the fragment isn’t sent across the internet, but it does remain in the browser’s history.

It would be interesting to extend PageCrypt to do a number of things:

  • Automate the inlining of CSS, JavaScript, and image files
  • Encrypt multiple HTML files
  • Encrypt multiple files, including CSS, JavaScript, and image files

If you do end up extending it in your build process, let me know!

This version of PageCrypt is a rewrite of an older version of PageCrypt. That older version also inspired a few spin-offs that you might find useful:

  • Python CLI for PageCrypt
  • PowerShell CLI for PageCrypt
  • R-wrapper for PageCrypt
  • StatiCrypt — A separate but similar project

Now try it out yourself! You can deploy the code to Render for free. The README provides step-by-step instructions.

Chris Castle

At the time of writing, Chris Castle was a Developer Advocate at Render.

Источник

Оцените статью