Di sini, JavaScript btoa dipakai untuk menyembunyikan teks, sedangkan atob dipakai 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