PHP password protection for a HTML-file
To password protect a HTML-document 'somefile.html' using PHP but without changing its HTML-extension or configuring the server to interpret HTML as PHP, we can do the following:
1.
In somefile.html, we put the following at the very top of the body section:
<!-- Remove the iframe if you don't want password protection -->
<iframe src="phpprotection.php" id="phpprotection" style="position: absolute; left:0; top: 0; width: 100vw; height: 100vh; background: white; z-index: 10000" frameborder="0" scrolling="no"></iframe>
2.
In phpprotection.php we put:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>
<body>
<?php
$pass = $_POST['pass'];
//change password to your liking
if(!($pass == "secretpassword"))
{
echo '<form method="POST" action="'.$_SERVER['REQUEST_URI'].'">
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: arial; font-size: 20px; line-height: 40px">
<div style="display: inline-block; width: 150px">Password:</div> <input type="password" name="pass" style="border: 1px solid black; width: 200px; height: 30px; font-family: arial; font-size: 16px; padding-left: 10px" required>
<div style="height: 20px"> </div>
<input type="submit" name="submit" value="Login" style="font-family: arial; font-size: 16px;" ></div>
</form>
</body>
</html>';
exit();
}
//change password to your liking
if($pass == "secretpassword")
{
echo '<script>top.document.getElementById("phpprotection").style.height=0; top.document.getElementById("phpprotection").style.width=0; top.document.getElementById("phpprotection").style.display="none"; </script>';
}
?>
</body>
</html>
Put both files in the same same folder.