Bảo vệ nội dung bài viết bằng mật khẩu

Hôm nay mình sẽ giới thiệu phương pháp giúp bạn giấu toàn bộ hoặc một phần nội dung bài viết, thủ thuật này sử dụng thư viện CryptoJs với AES nên bạn hoàn toàn có thể yên tâm về khả năng mã hóa của nó. Người đọc sẽ không thể biết được nội dung mã hóa nếu không có mật khẩu mở khóa.

Demo:

Mật khẩu là thichnet

Nhập mật khẩu để mở khóa!

Hướng dẫn bảo vệ nội dung bài viết bằng mật khẩu

Bước 1

- Thêm CSS:

<style type='text/css'>
.decrypt-title{font-size:120%;font-weight:bold;text-transform:uppercase;margin:10px 0}
.decrypt-form{text-align:center;font-family:initial;line-height:1.3em;position:relative;z-index:1;background:#FFFFFF;max-width:360px;margin:0 auto 20px;padding:15px 45px;text-align:center;box-shadow:0 0 20px 0 rgba(0,0,0,0.2),0 5px 5px 0 rgba(0,0,0,0.24)}
.decrypt-form input{outline:0;background:#f2f2f2;width:100%;border:0;padding:15px;box-sizing:border-box;font-size:14px;margin:10px 0}
.decrypt-form .decrypt-button{text-transform:uppercase;outline:0;background:#4CAF50;width:100%;display:block;border:0;padding:15px;color:#FFFFFF;font-size:14px;font-weight:bold;cursor:pointer}
.decrypt-alert{color:red}
#decrypt-form{margin:0}
</style>

- Thêm đoạn script sau trước thẻ </body>

<b:if cond='data:view.isSingleItem'>
<script>
var mypass = document.getElementById(&#39;decrypt-box&#39;);
if(mypass != null) {
function downloadJSAtOnload2(){var e=document.createElement(&quot;script&quot;);e.src=&quot;https://thuthuat.github.io/assets/aes_tn.js&quot;;document.body.appendChild(e)}if(window.addEventListener)window.addEventListener(&quot;load&quot;,downloadJSAtOnload2,false);else if(window.attachEvent)window.attachEvent(&quot;onload&quot;,downloadJSAtOnload2);else window.onload=downloadJSAtOnload2;
};
</script>
</b:if>

Bước 2

Chuẩn bị sẵn nội dung cần bảo vệ, nếu là nội dung HTMl thì cần vào trang Convert Code to HTML để chuyển đổi code.

Bước 3

Truy cập cào trang mã hóa Encryption Tool
- Dán nội dung đã chuẩn bị vào ô số 1.
- Nhập mật khẩu vào ô số 2.
- Click nút Encrypt để mã hóa. Kết quả mã hóa sẽ hiển thị ở ô số 4, tuy nhiên ta không cần chú ý ô này lắm.
- Copy tất cả code trong ô số 5, dán vào phần soạn thảo bài viết (HTML) của bạn.
Sau bước này là bạn đã hoàn thành việc ẩn nội dung bài viết bằng mật khẩu, bạn chỉ cần hoàn thiện bài viết và xuất bản để xem kết quả.