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.
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!
How To Password Protect A Static HTML Page !!INSTALL!!
Static websites have recent years gained popularity again and many new static site hosting providers have popped up. Advantages of static sites and some primary reasons to go static are that sites are less exposed to malicious attaks, and easily and cheaply can be distributed through a content delivery network (CDN) to increase speed and stability. Distributing dynamic content and databases through a CDN is costly and considerably increases complexity. While there are many advantages of static sites compared to dynamic sites, a common problem is how to password protect parts of or a whole static website.
The longer and more complex answer is yes, it is possible, but there is no straight forward generic solution, and all options come with several disadvantages. Below I have outlined three approaches for password protecting static sites, client-side scripting, serverless computing, and mixing a static site with a dynamic site.
StatiCrypto can be used to password protect an HTML document. The concept is simple and provides strong encryption using AES-256. StaticCrypt encrypts a text string embedded into an HTML file. This text string can consist of any text, including HTML, JavaScript, and CSS. To unencrypt the embedded text, the user needs to type in a password. You cannot use this solution to protect files for download or images. This solution does not scale well and works for a single static HTML page. The user experience is not optimal. If you leave the page and return using the back button or similar, you will have to type in the password again to see the page content.
To use StatiCrypto, go to and paste your text and/or HTML/JavaScript/CSS you want to encrypt. The site will then generate an HTML file embedded with your encrypted content and a web page that prompts for a password. StatiCrypto is also available as a command line interface. Go to this GitHub repository for more information about this option or if you want to get the source code.
Essentially this approach should more appropriately be labeled as security through obscurity. The content you want to protect is not encrypted and is accessible by anyone knowing the URL. This is an easy to implement script if you need to hide pages, but do not mind if the directory eventually gets picked up by a search engine bot or if the content is accessible by anyone becoming aware of the directory URL. Obviously, this approach is not suitable for protecting sensitive data.
Static website hosting providers such as Netlify and Surge offers the opportunity to password-protect static sites. This approach provides real password protection. They serve your static site from a CDN but use a complex CDN setup that also allows some server-side processing behind the scenes.
Hostman offers a free static site hosting package with a free simple password protection feature. The package is intended for development and low traffic sites. The only requirement is that you add a credit card after a trial period. As long as you only use the free packages and features your card will not be charged. The limitations are that you can only create one username/password, and you can only protect the entire site at the root domain and not just a subdirectory.
Technically, this approach does not password protect a static site. If you need to protect a part of your static website and the solutions above, do not fulfil your security needs or use-case, one solution is to host the protected part of your site in a dynamic environment. For example, you can run your public static site at www.example.com, and the protected part of the site at users.example.com using a classic dynamic host processing authentication server-side. If you run your static site using average shared hosting, you will be able to run static sites and dynamic sites side by side. You can also run the static part of the site through a CDN.
An advantage is that website developers have a ton of choices between free and paid off the shelf software for managing password protected web pages. A disadvantage is that running two separate sites will gear up complexity. Typical dynamic environments are served from a specific server. This approach means that a lot of the features of serving a static site through a CDN are lost.
Choosing the solution that fits you the best, depends on your specific use-case, the host you are using, and your budget. Using client-side scripts for simple protection is easy to set up and also work with most hosts. This approach only provides simple, limited and somewhat pseudo protection. Using a static hosting environment supporting password protection is simple and scalable, but is only supported by a few providers at a monthly fee. Using a severless computing environment can provide strong security, but it is more complex to setup, and not supported by all hosts. Mixing a static site with a dynamic site can be an easy, fast, and cheap solution because of the existing body of free and paid software. If your protected site has a lot of visitors you might have to scale up server resources and miss some of the advantages of true static hosting.
But one of the most useful we generally miss while using Static Websites is password protection while many providers offer password protection it generally comes with a price but again we are developers we always try to find a way out. Static websites include JavaScript we will also use a JavaScript library Staticrypt by Robinmoisson to protect our static website.
StatiCrypt generates a static, password-protected page using AES -256 by utilizing a crypto-js library that can be decrypted in-browser you can upload the encrypted page as a normal file in your website and when the file is requested the JavaScript will prompt users for a password, decrypt the page and load your HTML.
I have a static website that I want to protect with a username and/or password like apache's htaccess does but I don't want to host an apache server for it to work. How can I achieve this without frontend javascript?
Use some JavaScript to request a passwort from the user and use this password for decrypting some encrypted string already available within the delivered page and replace the body's content with the decrypted data. There should be some libraries available for encrypting/decrypting data using JavaScript.
As far as I know, anything that goes to frontend will always be visible. so to password protect a static html page you should password protect the file itself or you should prompt for a password from the page where this page is redirected.
If I had to come up with something under these conditions, I'd be thinking of something along the lines of hashing the username and password and using that as the url for a file on the server that contains the actual content of the page and then using JS to load that in.
I have a static site (i.e all html files, no .Net project) that is being hosted in Azure. I'm trying to password protect this site. I've read that I could create a custom authorisation module, which I've done, but I can't install this as I need to run a appcmd.exe command to allow the correct bit of the web.config to be edited.
To get a deeper understanding of how PageCrypt works, try entering an incorrect password. Then right-click and view the source of the page. PageCrypt generated the contents of this page during the build step. Your original page content is encrypted inside a hidden element at the bottom of the HTML document.
What an interesting solution to this problem! I've wondered for a while what ways someone could merge passwords into the trend of static sites, and this is certainly one way to do it. Thanks for sharing.
The goal of fidelius is to provide a simple interface for encrypting and password-protecting your static HTML files, and supporting secure and (optionally) self-contained in-browser authentication and decryption.
In both cases, the desired HTML document format is rendered and then securely encrypted using sodium::data_encrypt(), based on the user-provided password and a nonce. The output file is an HTML document that contains the encrypted content, the nonce, and the machinery to perform secure in-browser authentication and decryption. The correct password is required to reveal the hidden content. The output file can be hosted on any static site hosting service (e.g. GitHub Pages) for browser-side password-protection.
During development, you may wish to set preview = TRUE to bypass the encryption and password-protection steps in order to view the document more quickly. This option pairs very nicely with xaringan::infinite_moon_reader() to view changes in real time.
You may wish to style the aesthetics and text of the password landing page to your own preferences. This can be done simply by passing the stylize() function to the style argument, or by specifying style arguments directly in the YAML frontmatter. 2ff7e9595c
Comments