StaticShield + HTML5

Protect a single page

You should just paste a snippet in that page that you want to password protect and add a staticshield-div to the top level div. That's it. Really!

💡

If your page is very lightweight, includes no heavy javascript, and you are sure that javascript runs before the HTML renders as shown in the demo video below, the staticshield-div is not required!

You can find the snippet in the dashbaord under the Vanilla HTML, JS, CSS section

And also don't forget to add staticshield-div class to the top level div of the page.

Finally a password protected Vanilla HTML, JS, CSS web page looks like

// protected.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>StaticShield + HTML</title>
<link rel="stylesheet" href="style.css" />
<style>
.staticshield-div {
display: none;
}
</style>
<script
src="https://staticshield.vercel.app/script.js"
data-site-id="<DATA-SITE-ID>"
data-cap="CAPTION"
></script>
<noscript>
<meta
http-equiv="refresh"
content="0; url=https://staticshield.vercel.app/errors/noscript"
/></noscript>
</head>
<body>
<!-- ... -->
</body>
</html>
💡

The <DATA-SITE-ID> and <CAPTION> fields will be prefilled in the dashbaord. You will just have to copy paste 😍. You will just have to copy paste 😍. You will just have to copy paste 😍. You will just have to copy paste 😍. You will just have to copy paste 😍

The highlighted part of code snippet is provided by StaticShield and all you have to do is just add that staticshield-div class name to the top level div.

⚠️

If staticshield-div class is not assigned to the top level div, the user will see a flash of password protected content while the page loads initially.

Password protect a whole app

Password protecting an app that contains many pages and made with only HTML is a little difficult and a time consuming one because you will have to add the snippet to all the the HTML pages as shown above.

Password protecting a whole app with many pages is going to be much easier with any Javascript framework of your choice