Encrypted Blog Post

   blog 3 minutes read (About 441 words)  visits

Introduction

Sometimes, we would like to share some encrypted text via a public network, such as publishing a encrypted blog post, so that the people who have the passphrase could see.

In this blog post, I would like to quickly discuss how to create a encrypted blog post that can be viewed with a passphrase on a static website.

Encrypted Blog Post

U2FsdGVkX18CLFMgmJBZdO0WpXHbNB6FB3JwgIZOD/5ufRWC79Antlz/X/nSlYdqA1byzhRuRWDm2XUO1o4UixXuP80s6ymZDv6hWzYbgrNfWS/ZU3bnJhRhhlEjI7Rxovlang6WztUGOdc0XOk4qJWq+zO/6OeRS5/21KMMhkUWVB9ErTXSqsInCBuV2kfKMBT2/F1JjRZakcKqcHNlwSJaxXTTC3s8YDRGkF/p+iHKBXMj7oiGA96wUKfnhmR+2X39YtbQsIpK7zIpuSmFcFpd+ZbgnVv2DL7T/Uqjhgty/HkHaKFJI2MdUiLKwpgT

Decrypted Blog Post

Please enter the password "password123" to view the blog post.



Creating an Encrypted Blog Post

The HTML for an encrypted blog post can be as simple as follows. The encrypted text can be generated from the Online Encryption and Decryption app.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<!DOCTYPE html>
<html>

<head>
    <title>Encrypted Blog Post</title>
</head>

<body>

    <div id="encrypted-blog-post">
        U2FsdGVkX18CLFMgmJBZdO0WpXHbNB6FB3JwgIZOD/5ufRWC79Antlz/X/nSlYdqA1byzhRuRWDm2XUO1o4UixXuP80s6ymZDv6hWzYbgrNfWS/ZU3bnJhRhhlEjI7Rxovlang6WztUGOdc0XOk4qJWq+zO/6OeRS5/21KMMhkUWVB9ErTXSqsInCBuV2kfKMBT2/F1JjRZakcKqcHNlwSJaxXTTC3s8YDRGkF/p+iHKBXMj7oiGA96wUKfnhmR+2X39YtbQsIpK7zIpuSmFcFpd+ZbgnVv2DL7T/Uqjhgty/HkHaKFJI2MdUiLKwpgT
    </div>

    <div>
        <p>
            Please enter the password to view the blog post.
        <p>
        <form id="my_form">
            <p>
                <label for="password">Password: &nbsp;</label>
                <input type="text" id="password" name="password" value="password123"><br>
            </p>
        </form>
        <br>

        <button id="submit-button">
            Submit
        </button>
    </div>

    <br>

    <div id="decrypted-blog-post">
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.1.1/crypto-js.min.js"></script>

    <script>
        function decrypt_function() {
            const form_data = new FormData(document.forms['my_form']);
            const enc_text_area = document.getElementById("encrypted-blog-post");
            const enc_text = enc_text_area.innerText;
            const password = form_data.get("password");

            var dec_text;
            try {
                const dec_bytes = CryptoJS.AES.decrypt(enc_text, password);
                dec_text = dec_bytes.toString(CryptoJS.enc.Utf8);
            } catch (e) {
                dec_text = "Password Incorrect!";
            }
            const src_text_area = document.getElementById("decrypted-blog-post");

            src_text_area.innerHTML = dec_text;
        }

        const decrypt_button = document.getElementById("submit-button");
        decrypt_button.addEventListener("click", decrypt_function);
    </script>

</body>

</html>

Caveats

The encrypted blog post on a static website can always be cracked by brute force approaches. So it is not recommended to put extremely important and private texts there.

References

Encrypted Blog Post

https://leimao.github.io/blog/Encrypted-Blog-Post/

Author

Lei Mao

Posted on

08-14-2022

Updated on

08-14-2022

Licensed under

 

Like this article? Support the author with

Comments

  Follow   Sponsor

Catalogue

×