@fiduswriter/editor 0.1.0

package/src/documents/access_rights/templates.js

@@ -0,0 +1,178 @@
+import {avatarTemplate, escapeText} from "fwtoolkit"
+
+export const peopleTabTemplate = ({contacts, collaborators}) =>
+    `<div id="my-contacts" class="fw-ar-container">
+        <h3 class="fw-green-title">${gettext("My contacts")}</h3>
+        <table class="fw-data-table">
+            <thead class="fw-data-table-header"><tr><th width="337">${gettext("Contacts")}</th></tr></thead>
+            <tbody class="fw-data-table-body fw-small">
+                ${contactsTemplate({contacts})}
+            </tbody>
+        </table>
+    </div>
+    <span id="add-share-contact" class="fw-button fw-large fw-square fw-light fw-ar-button">
+        <i class="fa-solid fa-caret-right"></i>
+    </span>
+    <div id="share-contact" class="fw-ar-container">
+        <h3 class="fw-green-title">${gettext("My collaborators")}</h3>
+        <table class="fw-data-table tablesorter">
+            <thead class="fw-data-table-header"><tr>
+                    <th width="217">${gettext("Collaborators")}</th>
+                    <th width="50" align="center">${gettext("Rights")}</th>
+                    <th width="50" align="center">${gettext("Delete")}</th>
+            </tr></thead>
+            <tbody class="fw-data-table-body fw-small">
+                ${collaboratorsTemplate({collaborators})}
+            </tbody>
+        </table>
+    </div>`
+
+export const shareLinkTabTemplate = () =>
+    `<div id="share-token-list">
+        <p class="fw-ar-loading">${gettext("Loading…")}</p>
+    </div>
+    <button class="fw-button fw-light" id="create-share-token-btn">
+        <i class="fa-solid fa-plus"></i>&nbsp;${gettext("Create new share link")}
+    </button>`
+
+/** The list of active share-link tokens for a single document */
+export const shareTokenListTemplate = ({tokens}) => {
+    if (!tokens.length) {
+        return `<p class="fw-ar-no-tokens">${gettext("No active share links yet.")}</p>`
+    }
+    return tokens.map(token => shareTokenRowTemplate({token})).join("")
+}
+
+/** A single share-link token row */
+export const shareTokenRowTemplate = ({token}) => {
+    const expiry = token.expires_at
+        ? escapeText(token.expires_at.slice(0, 10))
+        : gettext("never")
+    const note = token.note ? escapeText(token.note) : ""
+    return `<div class="share-token-row" data-token-id="${token.id}">
+        <div class="share-token-meta">
+            <span class="share-token-rights fw-bold">${escapeText(token.rights)}</span>
+            <span class="share-token-expiry">&nbsp;·&nbsp;${gettext("expires")}: ${expiry}</span>
+            ${note ? `<span class="share-token-note">&nbsp;·&nbsp;${note}</span>` : ""}
+        </div>
+        <div class="share-token-url-row">
+            <input class="share-token-url-input" type="text" readonly value="${escapeText(token.share_url)}" />
+            <button class="fw-button fw-light copy-share-token-btn" data-url="${escapeText(token.share_url)}" title="${gettext("Copy link")}">
+                <i class="fa-solid fa-copy"></i>
+            </button>
+            <button class="fw-button fw-light revoke-share-token-btn" data-token-id="${token.id}" title="${gettext("Revoke")}">
+                <i class="fa-solid fa-trash-alt"></i>
+            </button>
+        </div>
+    </div>`
+}
+
+/** Sub-dialog for creating a new share link */
+export const createShareTokenDialogTemplate = (
+    e2ee = false,
+    documentPassword = ""
+) =>
+    `<table class="fw-dialog-table">
+        <tbody>
+            <tr>
+                <th><label for="share-token-rights">${gettext("Rights")}</label></th>
+                <td class="fw-entry-field">
+                    <select id="share-token-rights" class="fw-button fw-light fw-large">
+                        ${
+                            e2ee
+                                ? `<option value="read">${gettext("Read")}</option>
+                               <option value="read-without-comments">${gettext("Read without comments")}</option>
+                               <option value="write">${gettext("Write")}</option>`
+                                : `<option value="read">${gettext("Read")}</option>
+                               <option value="read-without-comments">${gettext("Read without comments")}</option>
+                               <option value="review">${gettext("Review")}</option>
+                               <option value="review-tracked">${gettext("Review tracked")}</option>
+                               <option value="comment">${gettext("Comment")}</option>
+                               <option value="write">${gettext("Write")}</option>
+                               <option value="write-tracked">${gettext("Write tracked")}</option>`
+                        }
+                    </select>
+                    <div class="fw-select-arrow fa-solid fa-caret-down"></div>
+                </td>
+            </tr>
+            <tr>
+                <th><label for="share-token-expires">${gettext("Expires")}</label></th>
+                <td class="fw-entry-field">
+                    <input id="share-token-expires" type="text" class="fw-light" placeholder="${gettext("YYYY-MM-DD or empty")}" pattern="\d{4}-\d{2}-\d{2}" />
+                </td>
+            </tr>
+            <tr>
+                <th><label for="share-token-note">${gettext("Note")}</label></th>
+                <td class="fw-entry-field">
+                    <input id="share-token-note" type="text" class="fw-light" placeholder="${gettext('optional label, e.g. "for reviewers"')}"/>
+                </td>
+            </tr>
+            ${
+                e2ee
+                    ? `<tr>
+                    <th><label for="share-token-password">${gettext("Document password")}</label></th>
+                    <td class="fw-entry-field">
+                        <input id="share-token-password" type="text" class="fw-light" value="${escapeText(documentPassword)}" placeholder="${gettext("Enter the document password to include it in the link")}" autocomplete="off" />
+                        <p class="e2ee-share-warning">
+                            <i class="fa-solid fa-exclamation-triangle"></i>
+                            ${gettext("If you enter the password above, it will be embedded in the link (after #). Anyone with the link can open the document. Only share such links through secure channels.")}
+                        </p>
+                    </td>
+                </tr>`
+                    : ""
+            }
+        </tbody>
+    </table>`
+
+/** The template for an individual row in the left hand side list of users (all contacts) of the access rights dialogue. */
+export const contactsTemplate = ({contacts}) =>
+    contacts
+        .map(
+            contact =>
+                `<tr>
+            <td width="337" data-id="${contact.id}" data-type="${contact.type}" class="fw-checkable fw-checkable-td">
+                <span>${avatarTemplate({user: contact})}</span>
+                <span class="fw-inline">
+                ${
+                    contact.type === "userinvite"
+                        ? `${gettext("Invite")}:&nbsp;`
+                        : ""
+                }
+                    ${escapeText(contact.name)}
+
+                </span>
+            </td>
+        </tr>`
+        )
+        .join("")
+
+/** The template for the right hand side list of users (the collaborators of the current document) of the access rights dialogue. */
+export const collaboratorsTemplate = ({collaborators}) =>
+    collaborators
+        .map(
+            collaborator =>
+                `<tr id="collaborator-${collaborator.holder.type}-${collaborator.holder.id}"
+    data-type="${collaborator.holder.type}" data-id="${collaborator.holder.id}"
+    class="fw-collaborator-tr" data-rights="${collaborator.rights}">
+        <td width="215">
+            <span>${avatarTemplate({user: collaborator.holder})}</span>
+            <span class="fw-inline">${
+                collaborator.holder.type === "userinvite"
+                    ? `${gettext("Invite")}: `
+                    : ""
+            }${escapeText(collaborator.holder.name)}</span>
+        </td>
+        <td width="50" align="center">
+            <div class="fw-inline edit-right-wrapper">
+                <i class="fw-icon-access-right icon-access-${collaborator.rights}"></i>
+                <i class="fa-solid fa-caret-down edit-right"></i>
+            </div>
+        </td>
+        <td width="50" align="center">
+            <span class="delete-collaborator fw-inline" data-rights="delete">
+                <i class="fa-solid fa-trash-alt fw-link-text"></i>
+            </span>
+        </td>
+    </tr>`
+        )
+        .join("")

package/src/e2ee/encryptor.js

@@ -0,0 +1,228 @@
+/**
+ * E2EE Encryptor - Handles encryption and decryption of document content
+ * for end-to-end encrypted documents.
+ *
+ * Uses AES-GCM (256-bit) for all encryption operations. Each encryption
+ * operation generates a random 12-byte IV (initialization vector) to
+ * ensure that encrypting the same plaintext twice produces different
+ * ciphertext.
+ *
+ * Encrypted data format (Appendix A of the E2EE plan):
+ *   [IV (12 bytes)][Ciphertext (variable length)][Auth Tag (16 bytes, implicit in AES-GCM)]
+ *
+ * When stored as a string (e.g., in JSON fields), the entire structure
+ * is Base64-encoded.
+ */
+export class E2EEEncryptor {
+    /**
+     * Encrypt a string with AES-GCM.
+     *
+     * @param {string} plaintext - The plaintext string to encrypt
+     * @param {CryptoKey} key - An AES-GCM key (from E2EEKeyManager.deriveKey)
+     * @returns {Promise<string>} Base64-encoded string (iv + ciphertext + auth tag)
+     */
+    static async encrypt(plaintext, key) {
+        const iv = crypto.getRandomValues(new Uint8Array(12))
+        const encoded = new TextEncoder().encode(plaintext)
+        const ciphertext = await crypto.subtle.encrypt(
+            {name: "AES-GCM", iv: iv},
+            key,
+            encoded
+        )
+        // Prepend IV to ciphertext for storage
+        const combined = new Uint8Array(iv.length + ciphertext.byteLength)
+        combined.set(iv, 0)
+        combined.set(new Uint8Array(ciphertext), iv.length)
+        return E2EEEncryptor._uint8ArrayToBase64(combined)
+    }
+
+    /**
+     * Decrypt a Base64-encoded AES-GCM ciphertext.
+     *
+     * @param {string} ciphertextBase64 - Base64-encoded (iv + ciphertext + auth tag)
+     * @param {CryptoKey} key - An AES-GCM key (from E2EEKeyManager.deriveKey)
+     * @returns {Promise<string>} The decrypted plaintext string
+     */
+    static async decrypt(ciphertextBase64, key) {
+        const combined = E2EEEncryptor._base64ToUint8Array(ciphertextBase64)
+        const iv = combined.slice(0, 12)
+        const ciphertext = combined.slice(12)
+        const decrypted = await crypto.subtle.decrypt(
+            {name: "AES-GCM", iv: iv},
+            key,
+            ciphertext
+        )
+        return new TextDecoder().decode(decrypted)
+    }
+
+    /**
+     * Encrypt a JSON-serializable object.
+     *
+     * Serializes the object to JSON, then encrypts the JSON string.
+     *
+     * @param {Object} obj - A JSON-serializable object
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<string>} Base64-encoded encrypted data
+     */
+    static encryptObject(obj, key) {
+        return E2EEEncryptor.encrypt(JSON.stringify(obj), key)
+    }
+
+    /**
+     * Decrypt to a JSON-serializable object.
+     *
+     * Decrypts the Base64-encoded ciphertext, then parses the result as JSON.
+     *
+     * @param {string} ciphertextBase64 - Base64-encoded encrypted data
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<Object>} The decrypted and parsed object
+     */
+    static async decryptObject(ciphertextBase64, key) {
+        const plaintext = await E2EEEncryptor.decrypt(ciphertextBase64, key)
+        return JSON.parse(plaintext)
+    }
+
+    /**
+     * Encrypt an ArrayBuffer (for images and other binary data).
+     *
+     * @param {ArrayBuffer} buffer - The binary data to encrypt
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<string>} Base64-encoded encrypted data (iv + ciphertext)
+     */
+    static async encryptBuffer(buffer, key) {
+        const iv = crypto.getRandomValues(new Uint8Array(12))
+        const ciphertext = await crypto.subtle.encrypt(
+            {name: "AES-GCM", iv: iv},
+            key,
+            buffer
+        )
+        // Prepend IV to ciphertext
+        const combined = new Uint8Array(iv.length + ciphertext.byteLength)
+        combined.set(iv, 0)
+        combined.set(new Uint8Array(ciphertext), iv.length)
+        return E2EEEncryptor._uint8ArrayToBase64(combined)
+    }
+
+    /**
+     * Decrypt to an ArrayBuffer.
+     *
+     * @param {string} ciphertextBase64 - Base64-encoded encrypted data
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<ArrayBuffer>} The decrypted binary data
+     */
+    static decryptBuffer(ciphertextBase64, key) {
+        const combined = E2EEEncryptor._base64ToUint8Array(ciphertextBase64)
+        const iv = combined.slice(0, 12)
+        const ciphertext = combined.slice(12)
+        return crypto.subtle.decrypt({name: "AES-GCM", iv: iv}, key, ciphertext)
+    }
+
+    /**
+     * Encrypt an image File/Blob for upload.
+     *
+     * Reads the file as an ArrayBuffer, encrypts it, and returns
+     * a Blob with application/octet-stream type (since the encrypted
+     * data is opaque binary).
+     *
+     * @param {File|Blob} file - The image file to encrypt
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<Blob>} An encrypted Blob with type application/octet-stream
+     */
+    static async encryptImage(file, key) {
+        const buffer = await file.arrayBuffer()
+        const iv = crypto.getRandomValues(new Uint8Array(12))
+        const ciphertext = await crypto.subtle.encrypt(
+            {name: "AES-GCM", iv: iv},
+            key,
+            buffer
+        )
+        // Prepend IV to ciphertext
+        const combined = new Uint8Array(iv.length + ciphertext.byteLength)
+        combined.set(iv, 0)
+        combined.set(new Uint8Array(ciphertext), iv.length)
+        return new Blob([combined], {type: "application/octet-stream"})
+    }
+
+    /**
+     * Decrypt an encrypted image back to an ArrayBuffer.
+     *
+     * @param {string} ciphertextBase64 - Base64-encoded encrypted image data
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<ArrayBuffer>} The decrypted image data
+     */
+    static decryptImage(ciphertextBase64, key) {
+        return E2EEEncryptor.decryptBuffer(ciphertextBase64, key)
+    }
+
+    /**
+     * Decrypt a Base64-encoded ciphertext and return as a Base64 string.
+     *
+     * Useful for decrypting encrypted images that need to be stored
+     * as Base64 data URLs or re-exported.
+     *
+     * @param {string} ciphertextBase64 - Base64-encoded encrypted data
+     * @param {CryptoKey} key - An AES-GCM key
+     * @returns {Promise<string>} Base64-encoded decrypted data
+     */
+    static async decryptBufferToBase64(ciphertextBase64, key) {
+        const buffer = await E2EEEncryptor.decryptBuffer(ciphertextBase64, key)
+        const bytes = new Uint8Array(buffer)
+        let binary = ""
+        for (let i = 0; i < bytes.length; i++) {
+            binary += String.fromCharCode(bytes[i])
+        }
+        return btoa(binary)
+    }
+
+    /**
+     * Decrypt an encrypted image and return a blob URL for display.
+     *
+     * Fetches the encrypted image file from the given URL, decrypts it,
+     * and creates a temporary object URL that can be used as an img src.
+     *
+     * @param {string} imageUrl - The URL of the encrypted image file
+     * @param {CryptoKey} key - An AES-GCM key
+     * @param {string} mimeType - The MIME type of the decrypted image
+     * @returns {Promise<string>} A blob URL for the decrypted image
+     */
+    static async decryptImageToUrl(imageUrl, key, mimeType = "image/png") {
+        const response = await fetch(imageUrl)
+        const arrayBuffer = await response.arrayBuffer()
+        const bytes = new Uint8Array(arrayBuffer)
+        let binary = ""
+        for (let i = 0; i < bytes.length; i++) {
+            binary += String.fromCharCode(bytes[i])
+        }
+        const base64 = btoa(binary)
+        const decrypted = await E2EEEncryptor.decryptBuffer(base64, key)
+        const blob = new Blob([decrypted], {type: mimeType})
+        return URL.createObjectURL(blob)
+    }
+
+    // --- Private helper methods ---
+
+    /**
+     * Convert a Uint8Array to a Base64-encoded string.
+     * @private
+     */
+    static _uint8ArrayToBase64(bytes) {
+        let binary = ""
+        for (let i = 0; i < bytes.length; i++) {
+            binary += String.fromCharCode(bytes[i])
+        }
+        return btoa(binary)
+    }
+
+    /**
+     * Convert a Base64-encoded string to a Uint8Array.
+     * @private
+     */
+    static _base64ToUint8Array(base64) {
+        const binary = atob(base64)
+        const bytes = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) {
+            bytes[i] = binary.charCodeAt(i)
+        }
+        return bytes
+    }
+}

package/src/e2ee/key-manager.js

@@ -0,0 +1,202 @@
+/**
+ * E2EE Key Manager - Handles key derivation and salt generation for
+ * end-to-end encrypted documents.
+ *
+ * Uses PBKDF2 with SHA-256 to derive a 256-bit AES-GCM key from a
+ * user-supplied password and a server-stored salt. The salt and
+ * iteration count are stored on the server as part of the Document
+ * model (Document.e2ee_salt and Document.e2ee_iterations),
+ * so the user only needs the password to decrypt from any device.
+ *
+ * The key is marked as non-extractable for security — it cannot be
+ * read back from the CryptoKey object once created.
+ */
+export class E2EEKeyManager {
+    /**
+     * Derive an AES-GCM key from a password and salt using PBKDF2.
+     *
+     * @param {string} password - The user-supplied password
+     * @param {Uint8Array} salt - The salt (16 bytes), fetched from the server
+     *   as part of the document data (get_doc_data or subscribe)
+     * @param {number} [iterations=600000] - PBKDF2 iteration count
+     *   (OWASP 2023 recommendation for PBKDF2-SHA256)
+     * @returns {Promise<CryptoKey>} A non-extractable AES-GCM 256-bit key
+     */
+    static async deriveKey(password, salt, iterations = 600000) {
+        const encoder = new TextEncoder()
+        const keyMaterial = await crypto.subtle.importKey(
+            "raw",
+            encoder.encode(password),
+            "PBKDF2",
+            false,
+            ["deriveKey"]
+        )
+
+        const key = await crypto.subtle.deriveKey(
+            {
+                name: "PBKDF2",
+                salt: salt,
+                iterations: iterations,
+                hash: "SHA-256"
+            },
+            keyMaterial,
+            {name: "AES-GCM", length: 256},
+            true, // extractable — required for sessionStorage caching
+            ["encrypt", "decrypt"]
+        )
+
+        return key
+    }
+
+    /**
+     * Store an AES-GCM key in sessionStorage for the current browser session.
+     * The key is exported as raw bytes and Base64-encoded before storage.
+     *
+     * @param {number} documentId - The document ID
+     * @param {CryptoKey} key - The AES-GCM key to store
+     */
+    static async storeKeyInSession(documentId, key) {
+        const raw = await crypto.subtle.exportKey("raw", key)
+        const base64 = btoa(String.fromCharCode(...new Uint8Array(raw)))
+        sessionStorage.setItem(`e2ee_key_${documentId}`, base64)
+    }
+
+    /**
+     * Retrieve an AES-GCM key from sessionStorage.
+     *
+     * @param {number} documentId - The document ID
+     * @returns {Promise<CryptoKey|null>} The imported key, or null if not found
+     */
+    static getKeyFromSession(documentId) {
+        const base64 = sessionStorage.getItem(`e2ee_key_${documentId}`)
+        if (!base64) {
+            return null
+        }
+        const binary = atob(base64)
+        const raw = new Uint8Array(binary.length)
+        for (let i = 0; i < binary.length; i++) {
+            raw[i] = binary.charCodeAt(i)
+        }
+        return crypto.subtle.importKey(
+            "raw",
+            raw,
+            {name: "AES-GCM", length: 256},
+            true,
+            ["encrypt", "decrypt"]
+        )
+    }
+
+    /**
+     * Remove a cached key from sessionStorage.
+     *
+     * @param {number} documentId - The document ID
+     */
+    static clearKeyFromSession(documentId) {
+        sessionStorage.removeItem(`e2ee_key_${documentId}`)
+    }
+
+    /**
+     * Clear all cached E2EE keys from sessionStorage.
+     * Should be called on sign-out or session expiration.
+     */
+    static clearAllKeysFromSession() {
+        for (let i = sessionStorage.length - 1; i >= 0; i--) {
+            const key = sessionStorage.key(i)
+            if (key && key.startsWith("e2ee_key_")) {
+                sessionStorage.removeItem(key)
+            }
+        }
+    }
+
+    /**
+     * Generate a new random salt (16 bytes).
+     *
+     * Used when creating a new E2EE document or changing the password.
+     * The generated salt is sent to the server and stored in
+     * Document.e2ee_salt. The salt is not a secret — its purpose
+     * is to ensure that two documents with the same password produce
+     * different derived keys (preventing rainbow table attacks).
+     *
+     * @returns {Uint8Array} A 16-byte random salt
+     */
+    static generateSalt() {
+        return crypto.getRandomValues(new Uint8Array(16))
+    }
+
+    /**
+     * Resolve a document password to an AES-GCM key.
+     *
+     * If the password is a valid base64/base64url-encoded 32-byte string
+     * (43 or 44 characters), it is treated as a raw DEK and imported
+     * directly without PBKDF2. Otherwise, the key is derived via PBKDF2.
+     *
+     * @param {string} password - The document password
+     * @param {Uint8Array} salt - The salt (16 bytes)
+     * @param {number} [iterations=600000] - PBKDF2 iteration count
+     * @returns {Promise<CryptoKey>} The AES-GCM key
+     */
+    static resolvePasswordToKey(password, salt, iterations = 600000) {
+        // Try to interpret as raw base64/base64url DEK first
+        if (password.length === 44 || password.length === 43) {
+            let decoded = null
+            try {
+                decoded = atob(password)
+            } catch (_e) {
+                // Try base64url with padding conversion
+                try {
+                    let base64 = password.replace(/-/g, "+").replace(/_/g, "/")
+                    while (base64.length % 4) {
+                        base64 += "="
+                    }
+                    decoded = atob(base64)
+                } catch (_e2) {
+                    // Not valid base64url either
+                }
+            }
+            if (decoded && decoded.length === 32) {
+                const raw = new Uint8Array(decoded.length)
+                for (let i = 0; i < decoded.length; i++) {
+                    raw[i] = decoded.charCodeAt(i)
+                }
+                return crypto.subtle.importKey(
+                    "raw",
+                    raw,
+                    {name: "AES-GCM", length: 256},
+                    true,
+                    ["encrypt", "decrypt"]
+                )
+            }
+        }
+        // Fall back to PBKDF2 derivation
+        return E2EEKeyManager.deriveKey(password, salt, iterations)
+    }
+
+    /**
+     * Store the document password in sessionStorage.
+     *
+     * @param {number} documentId - The document ID
+     * @param {string} password - The document password
+     */
+    static storePasswordInSession(documentId, password) {
+        sessionStorage.setItem(`e2ee_password_${documentId}`, password)
+    }
+
+    /**
+     * Retrieve the document password from sessionStorage.
+     *
+     * @param {number} documentId - The document ID
+     * @returns {string|null} The password, or null if not found
+     */
+    static getPasswordFromSession(documentId) {
+        return sessionStorage.getItem(`e2ee_password_${documentId}`)
+    }
+
+    /**
+     * Remove a cached password from sessionStorage.
+     *
+     * @param {number} documentId - The document ID
+     */
+    static clearPasswordFromSession(documentId) {
+        sessionStorage.removeItem(`e2ee_password_${documentId}`)
+    }
+}