Di sini, JavaScript btoa digunakan untuk menyembunyikan teks, sedangkan atob digunakan untuk mengembalikan teks yang tersembunyi tersebut:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Password Overlay Test</title>
<style>
.body {
padding:10% 0;
text-align:center;
}
.overlay {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:9999;
background-color:black;
color:white;
padding:10% 0;
text-align:center;
}
</style>
</head>
<body>
<div id="protect-body" class="body">Content goes here…</div>
<div id="protect-overlay" class="overlay">
<form action="#">
<input name="answer" type="password" placeholder="Password?"/> <button type="submit">Open</button>
</form>
</div>
<script>
// https://developer.mozilla.org/En/DOM/Window.btoa
// https://developer.mozilla.org/en/DOM/window.atob
// to get the obfuscated text, use `console.log(btoa('your text goes here'))`
// `aSBsb3ZlIHlvdQ==` => `i love you`
(function() {
var o = document.getElementById('protect-overlay');
o.getElementsByTagName('form')[0].onsubmit = function() {
if (this.answer.value === atob('aSBsb3ZlIHlvdQ==')) {
o.style.display = "none"; // passed!
} else {
alert('Wrong password!');
}
return false;
};
})();
</script>
</body>
</html>Demo
Kata kunci: i love you
