Add start_time and end_time in page.meta

[joapuiib]

Discussion started on #72.

I've modified this plugin to control in which time range can each page be decrypted, using the attributes start_time and end_time in each page.meta.

Basically, I've added a <div id="mkdocs-encrypted-config"> with a dictionary of config options, which includes start_time and end_time. The dictionary is encrypted with the same key as the content page.

The reason for this instead of a <input hidden> is that in this way is easy changing the config values directly from the HTML.

In the decryption process, I decrypt the config and I check if the current time is between that time range. If so, I let the page be decrypted.

inside_time_range = {% if webcrypto %}await {% endif %}decrypt_config_action(
    username_input, password_input, encrypted_config
);

if (inside_time_range) {
  key = {% if webcrypto %}await {% endif %}decrypt_action(
      username_input, password_input, encrypted_content, decrypted_content
  );
  decryptor_reaction(key, password_input, decrypted_content);
} else {
    let mkdocs_decrypt_msg = document.getElementById('mkdocs-decrypt-msg');
    mkdocs_decrypt_msg.textContent = decryption_failure_timerange_message;
    password_input.value = '';
    password_input.focus();
}

The code is available at: https://github.com/joapuiib/mkdocs-encryptcontent-plugin/tree/feature/time-range

This doesn't provide any kind of added security. It wouldn't be hard to bypass with JS if you know the password of the page, but I think this is enough for me at the moment.

If anyone wants to try to improve it, any help is welcome.

[joapuiib]

@unverbuggt Is there any easy way of extending default plugin behavior without having to have a custom version of the plugin?

[unverbuggt]

I've attached a minimal example here: time-range-test.zip

a page would look like this:

password: test
inject_id: protected
delete_id: teaser

# Decryptable in 2024

This is only decryptable in 2024.

/// html | div#teaser
<input type="hidden" id="start-time" value="2024-01-01T00:00:00.000Z">
<input type="hidden" id="end-time" value="2025-01-01T00:00:00.000Z">
///

/// html | div#protected
## Secret

Well, the princess is another castle.
///

and the html template is modified like this:

@@ -1,6 +1,6 @@
 <div id="mkdocs-encrypted-content" style="display:none">{{ ciphertext_bundle }}</div>
 <div id="mkdocs-decrypted-content">
+    <form id="mkdocs-decrypt-form"{% if form_class %} class="{{ form_class }}"{% endif %} style="display:none">
-    <form id="mkdocs-decrypt-form"{% if form_class %} class="{{ form_class }}"{% endif %}>
         <h1>{{ summary }}</h1>
         {% if encryption_info_message %}<p>{{ encryption_info_message }}</p>{% endif %}
         {%- if obfuscate %}
@@ -14,9 +14,6 @@
         {% if password_button %}<button{% if button_class %} class="{{ button_class }}"{% endif %} id="mkdocs-decrypt-button">{{ password_button_text }}</button>{% endif %}
         <p id="mkdocs-decrypt-msg"></p>
     </form>
+    <div id="mkdocs-decrypt-time" style="display:none">
+        <h1>You came to the right place at the wrong time...</h1>
+    </div>
 </div>

With an added script at the end:

<script>
function checkTimeRange() {
    let start_time = document.getElementById('start-time');
    let end_time = document.getElementById('end-time');
    let mkdocs_decrypt_form = document.getElementById('mkdocs-decrypt-form');
    let mkdocs_decrypt_time = document.getElementById('mkdocs-decrypt-time');
    if (start_time && end_time) {
        let start = new Date(start_time.value).getTime();
        let end = new Date(end_time.value).getTime();
        let now = Date.now();
        if (now >= start && now < end) {
            mkdocs_decrypt_form.style.display = null;
        } else {
            mkdocs_decrypt_time.style.display = null;
        }
    } else {
        mkdocs_decrypt_time.style.display = null;
    }
}
document.addEventListener("DOMContentLoaded", checkTimeRange);
</script>

As said, I think of adding a folder of custom snippets to the project which would include a solution like this.