diff --git a/packages/scripts/dist/interfaces/options.d.ts b/packages/scripts/dist/interfaces/options.d.ts index 1646b529..b20b0b5e 100644 --- a/packages/scripts/dist/interfaces/options.d.ts +++ b/packages/scripts/dist/interfaces/options.d.ts @@ -50,7 +50,10 @@ export interface Options { fieldOptInSelectorTargetLocation?: string; fieldClearSelectorTarget?: string; fieldClearSelectorTargetLocation?: string; + fieldClearLabel?: string; checked?: boolean; + encryptData?: boolean; + hide?: boolean; }; StickyNSG?: boolean; StickyPrepopulation?: false | { diff --git a/packages/scripts/dist/remember-me.d.ts b/packages/scripts/dist/remember-me.d.ts index 3dd43413..f7e7ef2a 100644 --- a/packages/scripts/dist/remember-me.d.ts +++ b/packages/scripts/dist/remember-me.d.ts @@ -2,6 +2,7 @@ import { EnForm, RememberMeEvents } from "./events"; export declare class RememberMe { _form: EnForm; _events: RememberMeEvents; + private _frequency; private remoteUrl; private cookieName; private fieldNames; @@ -9,14 +10,18 @@ export declare class RememberMe { private cookieExpirationDays; private iframe; private rememberMeOptIn; + private encryptData; + private hide; private fieldDonationAmountRadioName; private fieldDonationAmountOtherName; private fieldDonationRecurrPayRadioName; + private fieldDonationRecurrFreqRadioName; private fieldDonationAmountOtherCheckboxID; private fieldOptInSelectorTarget; private fieldOptInSelectorTargetLocation; private fieldClearSelectorTarget; private fieldClearSelectorTargetLocation; + private fieldClearLabel; constructor(options: { remoteUrl?: string; cookieName?: string; @@ -25,12 +30,16 @@ export declare class RememberMe { fieldDonationAmountRadioName?: string; fieldDonationAmountOtherName?: string; fieldDonationRecurrPayRadioName?: string; + fieldDonationRecurrFreqRadioName?: string; fieldDonationAmountOtherCheckboxID?: string; fieldOptInSelectorTarget?: string; fieldOptInSelectorTargetLocation?: string; fieldClearSelectorTarget?: string; fieldClearSelectorTargetLocation?: string; + fieldClearLabel?: string; checked?: boolean; + encryptData?: boolean; + hide?: boolean; }); private updateFieldData; private insertClearRememberMeLink; @@ -43,6 +52,42 @@ export declare class RememberMe { private saveCookieToRemote; private readCookie; private saveCookie; + /** + * Reads and decrypts the local (non-remote) Remember Me cookie using + * browser-native AES-GCM (Web Crypto), with the key held in localStorage + * on this device. If the key is absent (different device or cleared + * storage) or decryption otherwise fails, the field data is left empty + * and the component falls back to the normal, no-autofill experience. + */ + private readCookieEncrypted; + /** + * Encrypts the current fieldData with AES-GCM (Web Crypto) and stores the + * base64-encoded result in the local cookie. If encryption isn't possible + * (e.g. Web Crypto unavailable), nothing is written. + */ + private saveCookieEncrypted; + private clearCookieEncrypted; + /** + * Retrieves the per-device AES-GCM encryption key. A random secret + * generated once per device and held in localStorage — never written + * to the cookie, so it never travels with the transported value. + */ + private getEncryptionKey; + /** + * Encrypts a plaintext string with AES-GCM and returns the base64-encoded + * IV + ciphertext, ready for storage. Returns null if a key isn't + * available (e.g. Web Crypto unsupported). + */ + private encryptPayload; + /** + * Decrypts a base64-encoded IV + ciphertext payload previously produced by + * encryptPayload. Returns null (rather than throwing) if the key is + * missing or decryption otherwise fails, so callers can gracefully fall + * back to the standard, no-autofill experience. + */ + private decryptPayload; + private arrayBufferToBase64; + private base64ToArrayBuffer; private readFields; private setFieldValue; private clearFields; @@ -57,5 +102,25 @@ export declare class RememberMe { * @param overwrite - A boolean indicating whether to overwrite the existing value of the fields. Defaults to false. */ private writeFields; + /** + * SwapAmounts replaces the donationAmt radio DOM nodes ~1 second after page + * load (triggered by DonationFrequency.load() setTimeout). When that happens + * the selection the RememberMe just wrote gets wiped out. + * + * This method subscribes to the first onFrequencyChange event and, after a + * short delay to let SwapAmounts finish its DOM update, re-applies only the + * donation amount. It unsubscribes immediately so it only fires once. + * + * To avoid overwriting a manual donor interaction, the handler checks + * whether the current amount selection is empty/wiped (as SwapAmounts does) + * OR still matches what writeFields originally set. If the donor already + * picked a different amount, we skip re-application. + */ + private reapplyDonationAmtAfterSwap; + /** + * Returns the currently selected donation amount value, or null if nothing + * is selected. Checks both predefined radio buttons and the "Other" text input. + */ + private getCurrentSelectedAmount; private isJson; } diff --git a/packages/scripts/dist/remember-me.js b/packages/scripts/dist/remember-me.js index ba8e0535..3bbad453 100644 --- a/packages/scripts/dist/remember-me.js +++ b/packages/scripts/dist/remember-me.js @@ -1,11 +1,26 @@ +var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) { + function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); } + return new (P || (P = Promise))(function (resolve, reject) { + function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } + function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } } + function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); } + step((generator = generator.apply(thisArg, _arguments || [])).next()); + }); +}; import * as cookie from "./cookie"; -import { EnForm, RememberMeEvents } from "./events"; +import { EnForm, RememberMeEvents, DonationFrequency } from "./events"; const tippy = require("tippy.js").default; +// localStorage key used to cache the per-device AES-GCM encryption key. +// A random secret generated once per device and held in localStorage. +const RM_ENCRYPTION_KEY_STORAGE_NAME = "engrid-remember-me-key"; export class RememberMe { constructor(options) { this._form = EnForm.getInstance(); this._events = RememberMeEvents.getInstance(); + this._frequency = DonationFrequency.getInstance(); this.iframe = null; + this.encryptData = options.encryptData ? options.encryptData : false; + this.hide = options.hide ? options.hide : false; this.remoteUrl = options.remoteUrl ? options.remoteUrl : null; this.cookieName = options.cookieName ? options.cookieName @@ -25,6 +40,10 @@ export class RememberMe { options.fieldDonationRecurrPayRadioName ? options.fieldDonationRecurrPayRadioName : "transaction.recurrpay"; + this.fieldDonationRecurrFreqRadioName = + options.fieldDonationRecurrFreqRadioName + ? options.fieldDonationRecurrFreqRadioName + : "transaction.recurrfreq"; this.fieldDonationAmountOtherCheckboxID = options.fieldDonationAmountOtherCheckboxID ? options.fieldDonationAmountOtherCheckboxID @@ -43,11 +62,18 @@ export class RememberMe { options.fieldClearSelectorTargetLocation ? options.fieldClearSelectorTargetLocation : "before"; + this.fieldClearLabel = options.fieldClearLabel + ? options.fieldClearLabel + : "(clear autofill)"; this.fieldData = {}; if (this.useRemote()) { this.createIframe(() => { if (this.iframe && this.iframe.contentWindow) { - this.iframe.contentWindow.postMessage(JSON.stringify({ key: this.cookieName, operation: "read" }), "*"); + this.iframe.contentWindow.postMessage(JSON.stringify({ + key: this.cookieName, + operation: "read", + encryptData: this.encryptData, + }), "*"); this._form.onSubmit.subscribe(() => { if (this.rememberMeOptIn) { this.readFields(); @@ -66,7 +92,9 @@ export class RememberMe { data.key && data.value !== undefined && data.key === this.cookieName) { - this.updateFieldData(data.value); + if (data.value !== null) { + this.updateFieldData(data.value); + } this.writeFields(); let hasFieldData = Object.keys(this.fieldData).length > 0; if (!hasFieldData) { @@ -74,10 +102,37 @@ export class RememberMe { } else { this.insertClearRememberMeLink(); + this.reapplyDonationAmtAfterSwap(); } } }); } + else if (this.encryptData) { + // Same flow as the unencrypted branch below, but the cookie payload is + // AES-GCM encrypted/decrypted (browser-native Web Crypto), so reading + // the cookie is asynchronous. A failed decrypt (foreign device or + // cleared localStorage) leaves fieldData empty and silently falls back + // to the standard, no-autofill experience. + this.readCookieEncrypted().then(() => { + let hasFieldData = Object.keys(this.fieldData).length > 0; + if (!hasFieldData) { + this.insertRememberMeOptin(); + } + else { + this.insertClearRememberMeLink(); + } + this.writeFields(); + if (hasFieldData) { + this.reapplyDonationAmtAfterSwap(); + } + this._form.onSubmit.subscribe(() => { + if (this.rememberMeOptIn) { + this.readFields(); + this.saveCookieEncrypted(); + } + }); + }); + } else { this.readCookie(); let hasFieldData = Object.keys(this.fieldData).length > 0; @@ -88,6 +143,9 @@ export class RememberMe { this.insertClearRememberMeLink(); } this.writeFields(); + if (hasFieldData) { + this.reapplyDonationAmtAfterSwap(); + } this._form.onSubmit.subscribe(() => { if (this.rememberMeOptIn) { this.readFields(); @@ -97,24 +155,31 @@ export class RememberMe { } } updateFieldData(jsonData) { - if (jsonData) { - let data = JSON.parse(jsonData); - for (let i = 0; i < this.fieldNames.length; i++) { - if (data[this.fieldNames[i]] !== undefined) { - this.fieldData[this.fieldNames[i]] = decodeURIComponent(data[this.fieldNames[i]]); - } + if (!jsonData) + return; + let data; + try { + data = JSON.parse(jsonData); + } + catch (e) { + // Payload is not valid JSON (e.g. corrupted or unexpected ciphertext). + // Fall back silently to the no-autofill experience. + return; + } + for (let i = 0; i < this.fieldNames.length; i++) { + if (data[this.fieldNames[i]] !== undefined) { + this.fieldData[this.fieldNames[i]] = decodeURIComponent(data[this.fieldNames[i]]); } } } insertClearRememberMeLink() { let clearRememberMeField = document.getElementById("clear-autofill-data"); if (!clearRememberMeField) { - const clearAutofillLabel = "clear autofill"; clearRememberMeField = document.createElement("a"); clearRememberMeField.setAttribute("id", "clear-autofill-data"); clearRememberMeField.classList.add("label-tooltip"); clearRememberMeField.setAttribute("style", "cursor: pointer;"); - clearRememberMeField.innerHTML = `(${clearAutofillLabel})`; + clearRememberMeField.innerHTML = this.fieldClearLabel; const targetField = this.getElementByFirstSelector(this.fieldClearSelectorTarget); if (targetField) { if (this.fieldClearSelectorTargetLocation === "after") { @@ -131,6 +196,9 @@ export class RememberMe { if (this.useRemote()) { this.clearCookieOnRemote(); } + else if (this.encryptData) { + this.clearCookieEncrypted(); + } else { this.clearCookie(); } @@ -202,6 +270,9 @@ export class RememberMe { } }); } + if (this.hide) { + rememberMeOptInField.classList.add("hide"); + } tippy("#rememberme-learn-more-toggle", { content: rememberMeInfo }); } } @@ -251,6 +322,7 @@ export class RememberMe { value: this.fieldData, operation: "write", expires: this.cookieExpirationDays, + encryptData: this.encryptData, }), "*"); } } @@ -262,6 +334,142 @@ export class RememberMe { expires: this.cookieExpirationDays, }); } + /** + * Reads and decrypts the local (non-remote) Remember Me cookie using + * browser-native AES-GCM (Web Crypto), with the key held in localStorage + * on this device. If the key is absent (different device or cleared + * storage) or decryption otherwise fails, the field data is left empty + * and the component falls back to the normal, no-autofill experience. + */ + readCookieEncrypted() { + return __awaiter(this, void 0, void 0, function* () { + const raw = cookie.get(this.cookieName); + if (!raw) { + return; + } + const decrypted = yield this.decryptPayload(raw); + if (decrypted) { + this.updateFieldData(decrypted); + } + }); + } + /** + * Encrypts the current fieldData with AES-GCM (Web Crypto) and stores the + * base64-encoded result in the local cookie. If encryption isn't possible + * (e.g. Web Crypto unavailable), nothing is written. + */ + saveCookieEncrypted() { + return __awaiter(this, void 0, void 0, function* () { + const encrypted = yield this.encryptPayload(JSON.stringify(this.fieldData)); + if (encrypted) { + cookie.set(this.cookieName, encrypted, { + expires: this.cookieExpirationDays, + }); + } + }); + } + clearCookieEncrypted() { + this.fieldData = {}; + this.saveCookieEncrypted(); + } + /** + * Retrieves the per-device AES-GCM encryption key. A random secret + * generated once per device and held in localStorage — never written + * to the cookie, so it never travels with the transported value. + */ + getEncryptionKey() { + return __awaiter(this, void 0, void 0, function* () { + if (!window.crypto || !window.crypto.subtle) { + return null; + } + const storedKey = window.localStorage.getItem(RM_ENCRYPTION_KEY_STORAGE_NAME); + if (storedKey) { + try { + return yield window.crypto.subtle.importKey("raw", this.base64ToArrayBuffer(storedKey), { name: "AES-GCM", length: 256 }, false, ["encrypt", "decrypt"]); + } + catch (e) { + return null; + } + } + try { + const key = yield window.crypto.subtle.generateKey({ name: "AES-GCM", length: 256 }, true, ["encrypt", "decrypt"]); + const exported = yield window.crypto.subtle.exportKey("raw", key); + window.localStorage.setItem(RM_ENCRYPTION_KEY_STORAGE_NAME, this.arrayBufferToBase64(exported)); + return key; + } + catch (e) { + return null; + } + }); + } + /** + * Encrypts a plaintext string with AES-GCM and returns the base64-encoded + * IV + ciphertext, ready for storage. Returns null if a key isn't + * available (e.g. Web Crypto unsupported). + */ + encryptPayload(plaintext) { + return __awaiter(this, void 0, void 0, function* () { + const key = yield this.getEncryptionKey(); + if (!key) { + return null; + } + const iv = window.crypto.getRandomValues(new Uint8Array(12)); + const ciphertext = yield window.crypto.subtle.encrypt({ name: "AES-GCM", iv }, key, new TextEncoder().encode(plaintext)); + const combined = new Uint8Array(iv.length + ciphertext.byteLength); + combined.set(iv); + combined.set(new Uint8Array(ciphertext), iv.length); + return this.arrayBufferToBase64(combined); + }); + } + /** + * Decrypts a base64-encoded IV + ciphertext payload previously produced by + * encryptPayload. Returns null (rather than throwing) if the key is + * missing or decryption otherwise fails, so callers can gracefully fall + * back to the standard, no-autofill experience. + */ + decryptPayload(encryptedBase64) { + return __awaiter(this, void 0, void 0, function* () { + const key = yield this.getEncryptionKey(); + if (!key) { + return null; + } + let combined; + try { + combined = new Uint8Array(this.base64ToArrayBuffer(encryptedBase64)); + } + catch (e) { + return null; + } + if (combined.length < 13) { + return null; + } + const iv = combined.slice(0, 12); + const ciphertext = combined.slice(12); + try { + const decrypted = yield window.crypto.subtle.decrypt({ name: "AES-GCM", iv }, key, ciphertext); + return new TextDecoder().decode(decrypted); + } + catch (e) { + return null; + } + }); + } + arrayBufferToBase64(buffer) { + let binary = ""; + const bytes = buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer); + for (let i = 0; i < bytes.byteLength; i++) { + binary += String.fromCharCode(bytes[i]); + } + return window.btoa(binary); + } + base64ToArrayBuffer(base64) { + const binary = window.atob(base64); + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + return bytes.buffer; + } readFields() { for (let i = 0; i < this.fieldNames.length; i++) { let fieldSelector = "[name='" + this.fieldNames[i] + "']"; @@ -272,6 +480,17 @@ export class RememberMe { if (type === "radio" || type === "checkbox") { field = document.querySelector(fieldSelector + ":checked"); } + // When the donation amount radio is set to "Other", save the actual + // custom value from the .other text input instead of "Other". + if (this.fieldNames[i] === this.fieldDonationAmountRadioName && + field && + field.value.toLowerCase() === "other") { + const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']"); + if (otherField && otherField.value) { + this.fieldData[this.fieldNames[i]] = encodeURIComponent(otherField.value); + continue; + } + } this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value); } else if (field.tagName === "SELECT") { @@ -355,17 +574,36 @@ export class RememberMe { field.click(); } } + else if (this.fieldNames[i] === this.fieldDonationRecurrFreqRadioName) { + // recurrfreq is a radio group — find the specific radio with the saved value and click it + const savedValue = this.fieldData[this.fieldNames[i]]; + if (savedValue) { + const freqRadio = document.querySelector(fieldSelector + "[value='" + CSS.escape(savedValue) + "']"); + if (freqRadio) { + freqRadio.click(); + } + } + } else if (this.fieldDonationAmountRadioName === this.fieldNames[i]) { - field = document.querySelector(fieldSelector + - "[value='" + - this.fieldData[this.fieldNames[i]] + - "']"); + const savedAmt = this.fieldData[this.fieldNames[i]]; + const escapedAmt = CSS.escape(savedAmt); + field = document.querySelector(fieldSelector + "[value='" + escapedAmt + "']"); if (field) { + // Saved value matches a predefined radio option — just click it field.click(); } else { - field = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']"); - this.setFieldValue(field, this.fieldData[this.fieldNames[i]], true); + // No matching radio: the value is a custom amount. + // Click the "Other" radio first so the text input becomes active, + // then fill in the numeric value. + const otherRadio = document.querySelector(fieldSelector + "[value='Other'], " + + fieldSelector + "[value='other'], " + + fieldSelector + "[value='OTHER']"); + if (otherRadio) { + otherRadio.click(); + } + const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']"); + this.setFieldValue(otherField, savedAmt, true); } } else { @@ -378,6 +616,74 @@ export class RememberMe { } } } + /** + * SwapAmounts replaces the donationAmt radio DOM nodes ~1 second after page + * load (triggered by DonationFrequency.load() setTimeout). When that happens + * the selection the RememberMe just wrote gets wiped out. + * + * This method subscribes to the first onFrequencyChange event and, after a + * short delay to let SwapAmounts finish its DOM update, re-applies only the + * donation amount. It unsubscribes immediately so it only fires once. + * + * To avoid overwriting a manual donor interaction, the handler checks + * whether the current amount selection is empty/wiped (as SwapAmounts does) + * OR still matches what writeFields originally set. If the donor already + * picked a different amount, we skip re-application. + */ + reapplyDonationAmtAfterSwap() { + const savedAmt = this.fieldData[this.fieldDonationAmountRadioName]; + if (!savedAmt) + return; + // Capture the amount that writeFields just set so we can detect manual changes + const amountAtRegistration = this.getCurrentSelectedAmount(); + const handler = () => { + // SwapAmounts calls _amount.load() after swapList — give it a tick to settle + window.setTimeout(() => { + const currentAmt = this.getCurrentSelectedAmount(); + // Only re-apply if the selection is now empty (DOM was swapped out) + // or still matches what we originally wrote. If the donor manually + // selected a different amount, respect their choice. + const selectionWiped = currentAmt === null || currentAmt === ""; + const selectionUnchanged = currentAmt === amountAtRegistration; + if (!selectionWiped && !selectionUnchanged) { + return; + } + const fieldSelector = "[name='" + this.fieldDonationAmountRadioName + "']"; + const escapedAmt = CSS.escape(savedAmt); + let radio = document.querySelector(fieldSelector + "[value='" + escapedAmt + "']"); + if (radio) { + radio.click(); + } + else { + // Custom amount: click "Other" radio then fill the text input + const otherRadio = document.querySelector(fieldSelector + "[value='Other'], " + + fieldSelector + "[value='other'], " + + fieldSelector + "[value='OTHER']"); + if (otherRadio) + otherRadio.click(); + const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']"); + this.setFieldValue(otherField, savedAmt, true); + } + }, 200); + }; + // Subscribe once: fires on the first frequency change then auto-unsubscribes + this._frequency.onFrequencyChange.one(handler); + } + /** + * Returns the currently selected donation amount value, or null if nothing + * is selected. Checks both predefined radio buttons and the "Other" text input. + */ + getCurrentSelectedAmount() { + const fieldSelector = "[name='" + this.fieldDonationAmountRadioName + "']"; + const checkedRadio = document.querySelector(fieldSelector + ":checked"); + if (!checkedRadio) + return null; + if (checkedRadio.value.toLowerCase() === "other") { + const otherField = document.querySelector("input[name='" + this.fieldDonationAmountOtherName + "']"); + return otherField ? otherField.value : null; + } + return checkedRadio.value; + } isJson(str) { try { JSON.parse(str); diff --git a/packages/scripts/src/interfaces/options.ts b/packages/scripts/src/interfaces/options.ts index c3d53a7a..0999fbbd 100644 --- a/packages/scripts/src/interfaces/options.ts +++ b/packages/scripts/src/interfaces/options.ts @@ -54,7 +54,10 @@ export interface Options { fieldOptInSelectorTargetLocation?: string; fieldClearSelectorTarget?: string; fieldClearSelectorTargetLocation?: string; + fieldClearLabel?: string; checked?: boolean; + encryptData?: boolean; + hide?: boolean; }; StickyNSG?: boolean; StickyPrepopulation?: false | { fields: string[] }; diff --git a/packages/scripts/src/remember-me.ts b/packages/scripts/src/remember-me.ts index 7259cb6e..20e80cb3 100644 --- a/packages/scripts/src/remember-me.ts +++ b/packages/scripts/src/remember-me.ts @@ -1,14 +1,19 @@ import * as cookie from "./cookie"; -import { EnForm, RememberMeEvents } from "./events"; +import { EnForm, RememberMeEvents, DonationFrequency } from "./events"; const tippy = require("tippy.js").default; interface DataObj { [key: string]: string; } +// localStorage key used to cache the per-device AES-GCM encryption key. +// A random secret generated once per device and held in localStorage. +const RM_ENCRYPTION_KEY_STORAGE_NAME = "engrid-remember-me-key"; + export class RememberMe { public _form: EnForm = EnForm.getInstance(); public _events: RememberMeEvents = RememberMeEvents.getInstance(); + private _frequency: DonationFrequency = DonationFrequency.getInstance(); private remoteUrl: string | null; private cookieName: string; @@ -17,16 +22,20 @@ export class RememberMe { private cookieExpirationDays: number; private iframe: HTMLIFrameElement | null; private rememberMeOptIn: boolean; + private encryptData: boolean; + private hide: boolean; private fieldDonationAmountRadioName: string; private fieldDonationAmountOtherName: string; private fieldDonationRecurrPayRadioName: string; + private fieldDonationRecurrFreqRadioName: string; private fieldDonationAmountOtherCheckboxID: string; private fieldOptInSelectorTarget: string; private fieldOptInSelectorTargetLocation: string; private fieldClearSelectorTarget: string; private fieldClearSelectorTargetLocation: string; + private fieldClearLabel: string; constructor(options: { remoteUrl?: string; @@ -36,14 +45,20 @@ export class RememberMe { fieldDonationAmountRadioName?: string; fieldDonationAmountOtherName?: string; fieldDonationRecurrPayRadioName?: string; + fieldDonationRecurrFreqRadioName?: string; fieldDonationAmountOtherCheckboxID?: string; fieldOptInSelectorTarget?: string; fieldOptInSelectorTargetLocation?: string; fieldClearSelectorTarget?: string; fieldClearSelectorTargetLocation?: string; + fieldClearLabel?: string; checked?: boolean; + encryptData?: boolean; + hide?: boolean; }) { this.iframe = null; + this.encryptData = options.encryptData ? options.encryptData : false; + this.hide = options.hide ? options.hide : false; this.remoteUrl = options.remoteUrl ? options.remoteUrl : null; this.cookieName = options.cookieName @@ -65,6 +80,10 @@ export class RememberMe { options.fieldDonationRecurrPayRadioName ? options.fieldDonationRecurrPayRadioName : "transaction.recurrpay"; + this.fieldDonationRecurrFreqRadioName = + options.fieldDonationRecurrFreqRadioName + ? options.fieldDonationRecurrFreqRadioName + : "transaction.recurrfreq"; this.fieldDonationAmountOtherCheckboxID = options.fieldDonationAmountOtherCheckboxID ? options.fieldDonationAmountOtherCheckboxID @@ -86,13 +105,21 @@ export class RememberMe { ? options.fieldClearSelectorTargetLocation : "before"; + this.fieldClearLabel = options.fieldClearLabel + ? options.fieldClearLabel + : "(clear autofill)"; + this.fieldData = {}; if (this.useRemote()) { this.createIframe( () => { if (this.iframe && this.iframe.contentWindow) { this.iframe.contentWindow.postMessage( - JSON.stringify({ key: this.cookieName, operation: "read" }), + JSON.stringify({ + key: this.cookieName, + operation: "read", + encryptData: this.encryptData, + }), "*" ); this._form.onSubmit.subscribe(() => { @@ -118,17 +145,44 @@ export class RememberMe { data.value !== undefined && data.key === this.cookieName ) { - this.updateFieldData(data.value); + if (data.value !== null) { + this.updateFieldData(data.value); + } this.writeFields(); let hasFieldData = Object.keys(this.fieldData).length > 0; if (!hasFieldData) { this.insertRememberMeOptin(); } else { this.insertClearRememberMeLink(); + this.reapplyDonationAmtAfterSwap(); } } } ); + } else if (this.encryptData) { + // Same flow as the unencrypted branch below, but the cookie payload is + // AES-GCM encrypted/decrypted (browser-native Web Crypto), so reading + // the cookie is asynchronous. A failed decrypt (foreign device or + // cleared localStorage) leaves fieldData empty and silently falls back + // to the standard, no-autofill experience. + this.readCookieEncrypted().then(() => { + let hasFieldData = Object.keys(this.fieldData).length > 0; + if (!hasFieldData) { + this.insertRememberMeOptin(); + } else { + this.insertClearRememberMeLink(); + } + this.writeFields(); + if (hasFieldData) { + this.reapplyDonationAmtAfterSwap(); + } + this._form.onSubmit.subscribe(() => { + if (this.rememberMeOptIn) { + this.readFields(); + this.saveCookieEncrypted(); + } + }); + }); } else { this.readCookie(); let hasFieldData = Object.keys(this.fieldData).length > 0; @@ -138,6 +192,9 @@ export class RememberMe { this.insertClearRememberMeLink(); } this.writeFields(); + if (hasFieldData) { + this.reapplyDonationAmtAfterSwap(); + } this._form.onSubmit.subscribe(() => { if (this.rememberMeOptIn) { this.readFields(); @@ -147,26 +204,31 @@ export class RememberMe { } } private updateFieldData(jsonData: string) { - if (jsonData) { - let data = JSON.parse(jsonData); - for (let i = 0; i < this.fieldNames.length; i++) { - if (data[this.fieldNames[i]] !== undefined) { - this.fieldData[this.fieldNames[i]] = decodeURIComponent( - data[this.fieldNames[i]] - ); - } + if (!jsonData) return; + let data: DataObj; + try { + data = JSON.parse(jsonData); + } catch (e) { + // Payload is not valid JSON (e.g. corrupted or unexpected ciphertext). + // Fall back silently to the no-autofill experience. + return; + } + for (let i = 0; i < this.fieldNames.length; i++) { + if (data[this.fieldNames[i]] !== undefined) { + this.fieldData[this.fieldNames[i]] = decodeURIComponent( + data[this.fieldNames[i]] + ); } } } private insertClearRememberMeLink() { let clearRememberMeField = document.getElementById("clear-autofill-data"); if (!clearRememberMeField) { - const clearAutofillLabel = "clear autofill"; clearRememberMeField = document.createElement("a"); clearRememberMeField.setAttribute("id", "clear-autofill-data"); clearRememberMeField.classList.add("label-tooltip"); clearRememberMeField.setAttribute("style", "cursor: pointer;"); - clearRememberMeField.innerHTML = `(${clearAutofillLabel})`; + clearRememberMeField.innerHTML = this.fieldClearLabel; const targetField = this.getElementByFirstSelector( this.fieldClearSelectorTarget @@ -184,6 +246,8 @@ export class RememberMe { this.clearFields(["supporter.country" /*, 'supporter.emailAddress'*/]); if (this.useRemote()) { this.clearCookieOnRemote(); + } else if (this.encryptData) { + this.clearCookieEncrypted(); } else { this.clearCookie(); } @@ -276,6 +340,10 @@ export class RememberMe { }); } + if (this.hide) { + rememberMeOptInField.classList.add("hide"); + } + tippy("#rememberme-learn-more-toggle", { content: rememberMeInfo }); } } else if (this.rememberMeOptIn) { @@ -337,6 +405,7 @@ export class RememberMe { value: this.fieldData, operation: "write", expires: this.cookieExpirationDays, + encryptData: this.encryptData, }), "*" ); @@ -350,6 +419,154 @@ export class RememberMe { expires: this.cookieExpirationDays, }); } + /** + * Reads and decrypts the local (non-remote) Remember Me cookie using + * browser-native AES-GCM (Web Crypto), with the key held in localStorage + * on this device. If the key is absent (different device or cleared + * storage) or decryption otherwise fails, the field data is left empty + * and the component falls back to the normal, no-autofill experience. + */ + private async readCookieEncrypted(): Promise { + const raw = cookie.get(this.cookieName); + if (!raw) { + return; + } + const decrypted = await this.decryptPayload(raw); + if (decrypted) { + this.updateFieldData(decrypted); + } + } + /** + * Encrypts the current fieldData with AES-GCM (Web Crypto) and stores the + * base64-encoded result in the local cookie. If encryption isn't possible + * (e.g. Web Crypto unavailable), nothing is written. + */ + private async saveCookieEncrypted(): Promise { + const encrypted = await this.encryptPayload(JSON.stringify(this.fieldData)); + if (encrypted) { + cookie.set(this.cookieName, encrypted, { + expires: this.cookieExpirationDays, + }); + } + } + private clearCookieEncrypted() { + this.fieldData = {}; + this.saveCookieEncrypted(); + } + /** + * Retrieves the per-device AES-GCM encryption key. A random secret + * generated once per device and held in localStorage — never written + * to the cookie, so it never travels with the transported value. + */ + private async getEncryptionKey(): Promise { + if (!window.crypto || !window.crypto.subtle) { + return null; + } + const storedKey = window.localStorage.getItem( + RM_ENCRYPTION_KEY_STORAGE_NAME + ); + if (storedKey) { + try { + return await window.crypto.subtle.importKey( + "raw", + this.base64ToArrayBuffer(storedKey), + { name: "AES-GCM", length: 256 }, + false, + ["encrypt", "decrypt"] + ); + } catch (e) { + return null; + } + } + try { + const key = await window.crypto.subtle.generateKey( + { name: "AES-GCM", length: 256 }, + true, + ["encrypt", "decrypt"] + ); + const exported = await window.crypto.subtle.exportKey("raw", key); + window.localStorage.setItem( + RM_ENCRYPTION_KEY_STORAGE_NAME, + this.arrayBufferToBase64(exported) + ); + return key; + } catch (e) { + return null; + } + } + /** + * Encrypts a plaintext string with AES-GCM and returns the base64-encoded + * IV + ciphertext, ready for storage. Returns null if a key isn't + * available (e.g. Web Crypto unsupported). + */ + private async encryptPayload(plaintext: string): Promise { + const key = await this.getEncryptionKey(); + if (!key) { + return null; + } + const iv = window.crypto.getRandomValues(new Uint8Array(12)); + const ciphertext = await window.crypto.subtle.encrypt( + { name: "AES-GCM", iv }, + key, + new TextEncoder().encode(plaintext) + ); + const combined = new Uint8Array(iv.length + ciphertext.byteLength); + combined.set(iv); + combined.set(new Uint8Array(ciphertext), iv.length); + return this.arrayBufferToBase64(combined); + } + /** + * Decrypts a base64-encoded IV + ciphertext payload previously produced by + * encryptPayload. Returns null (rather than throwing) if the key is + * missing or decryption otherwise fails, so callers can gracefully fall + * back to the standard, no-autofill experience. + */ + private async decryptPayload( + encryptedBase64: string + ): Promise { + const key = await this.getEncryptionKey(); + if (!key) { + return null; + } + let combined: Uint8Array; + try { + combined = new Uint8Array(this.base64ToArrayBuffer(encryptedBase64)); + } catch (e) { + return null; + } + if (combined.length < 13) { + return null; + } + const iv = combined.slice(0, 12); + const ciphertext = combined.slice(12); + try { + const decrypted = await window.crypto.subtle.decrypt( + { name: "AES-GCM", iv }, + key, + ciphertext + ); + return new TextDecoder().decode(decrypted); + } catch (e) { + return null; + } + } + private arrayBufferToBase64(buffer: ArrayBuffer | Uint8Array): string { + let binary = ""; + const bytes = + buffer instanceof Uint8Array ? buffer : new Uint8Array(buffer); + for (let i = 0; i < bytes.byteLength; i++) { + binary += String.fromCharCode(bytes[i]); + } + return window.btoa(binary); + } + private base64ToArrayBuffer(base64: string): ArrayBuffer { + const binary = window.atob(base64); + const bytes = new Uint8Array(binary.length); + for (let i = 0; i < binary.length; i++) { + bytes[i] = binary.charCodeAt(i); + } + return bytes.buffer; + } private readFields() { for (let i = 0; i < this.fieldNames.length; i++) { let fieldSelector = "[name='" + this.fieldNames[i] + "']"; @@ -362,6 +579,23 @@ export class RememberMe { fieldSelector + ":checked" ) as HTMLInputElement; } + // When the donation amount radio is set to "Other", save the actual + // custom value from the .other text input instead of "Other". + if ( + this.fieldNames[i] === this.fieldDonationAmountRadioName && + field && + field.value.toLowerCase() === "other" + ) { + const otherField = document.querySelector( + "input[name='" + this.fieldDonationAmountOtherName + "']" + ) as HTMLInputElement; + if (otherField && otherField.value) { + this.fieldData[this.fieldNames[i]] = encodeURIComponent( + otherField.value + ); + continue; + } + } this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value); } else if (field.tagName === "SELECT") { this.fieldData[this.fieldNames[i]] = encodeURIComponent(field.value); @@ -447,24 +681,42 @@ export class RememberMe { if (this.fieldData[this.fieldNames[i]] === "Y") { field.click(); } + } else if (this.fieldNames[i] === this.fieldDonationRecurrFreqRadioName) { + // recurrfreq is a radio group — find the specific radio with the saved value and click it + const savedValue = this.fieldData[this.fieldNames[i]]; + if (savedValue) { + const freqRadio = document.querySelector( + fieldSelector + "[value='" + CSS.escape(savedValue) + "']" + ) as HTMLInputElement; + if (freqRadio) { + freqRadio.click(); + } + } } else if (this.fieldDonationAmountRadioName === this.fieldNames[i]) { + const savedAmt = this.fieldData[this.fieldNames[i]]; + const escapedAmt = CSS.escape(savedAmt); field = document.querySelector( - fieldSelector + - "[value='" + - this.fieldData[this.fieldNames[i]] + - "']" + fieldSelector + "[value='" + escapedAmt + "']" ) as HTMLInputElement; if (field) { + // Saved value matches a predefined radio option — just click it field.click(); } else { - field = document.querySelector( + // No matching radio: the value is a custom amount. + // Click the "Other" radio first so the text input becomes active, + // then fill in the numeric value. + const otherRadio = document.querySelector( + fieldSelector + "[value='Other'], " + + fieldSelector + "[value='other'], " + + fieldSelector + "[value='OTHER']" + ) as HTMLInputElement; + if (otherRadio) { + otherRadio.click(); + } + const otherField = document.querySelector( "input[name='" + this.fieldDonationAmountOtherName + "']" ) as HTMLInputElement; - this.setFieldValue( - field, - this.fieldData[this.fieldNames[i]], - true - ); + this.setFieldValue(otherField, savedAmt, true); } } else { this.setFieldValue( @@ -479,6 +731,90 @@ export class RememberMe { } } } + /** + * SwapAmounts replaces the donationAmt radio DOM nodes ~1 second after page + * load (triggered by DonationFrequency.load() setTimeout). When that happens + * the selection the RememberMe just wrote gets wiped out. + * + * This method subscribes to the first onFrequencyChange event and, after a + * short delay to let SwapAmounts finish its DOM update, re-applies only the + * donation amount. It unsubscribes immediately so it only fires once. + * + * To avoid overwriting a manual donor interaction, the handler checks + * whether the current amount selection is empty/wiped (as SwapAmounts does) + * OR still matches what writeFields originally set. If the donor already + * picked a different amount, we skip re-application. + */ + private reapplyDonationAmtAfterSwap() { + const savedAmt = this.fieldData[this.fieldDonationAmountRadioName]; + if (!savedAmt) return; + + // Capture the amount that writeFields just set so we can detect manual changes + const amountAtRegistration = this.getCurrentSelectedAmount(); + + const handler = () => { + // SwapAmounts calls _amount.load() after swapList — give it a tick to settle + window.setTimeout(() => { + const currentAmt = this.getCurrentSelectedAmount(); + + // Only re-apply if the selection is now empty (DOM was swapped out) + // or still matches what we originally wrote. If the donor manually + // selected a different amount, respect their choice. + const selectionWiped = currentAmt === null || currentAmt === ""; + const selectionUnchanged = currentAmt === amountAtRegistration; + if (!selectionWiped && !selectionUnchanged) { + return; + } + + const fieldSelector = + "[name='" + this.fieldDonationAmountRadioName + "']"; + const escapedAmt = CSS.escape(savedAmt); + let radio = document.querySelector( + fieldSelector + "[value='" + escapedAmt + "']" + ) as HTMLInputElement; + if (radio) { + radio.click(); + } else { + // Custom amount: click "Other" radio then fill the text input + const otherRadio = document.querySelector( + fieldSelector + "[value='Other'], " + + fieldSelector + "[value='other'], " + + fieldSelector + "[value='OTHER']" + ) as HTMLInputElement; + if (otherRadio) otherRadio.click(); + const otherField = document.querySelector( + "input[name='" + this.fieldDonationAmountOtherName + "']" + ) as HTMLInputElement; + this.setFieldValue(otherField, savedAmt, true); + } + }, 200); + }; + + // Subscribe once: fires on the first frequency change then auto-unsubscribes + this._frequency.onFrequencyChange.one(handler); + } + + /** + * Returns the currently selected donation amount value, or null if nothing + * is selected. Checks both predefined radio buttons and the "Other" text input. + */ + private getCurrentSelectedAmount(): string | null { + const fieldSelector = + "[name='" + this.fieldDonationAmountRadioName + "']"; + const checkedRadio = document.querySelector( + fieldSelector + ":checked" + ) as HTMLInputElement; + if (!checkedRadio) return null; + if ( + checkedRadio.value.toLowerCase() === "other" + ) { + const otherField = document.querySelector( + "input[name='" + this.fieldDonationAmountOtherName + "']" + ) as HTMLInputElement; + return otherField ? otherField.value : null; + } + return checkedRadio.value; + } private isJson(str: string) { try { JSON.parse(str); diff --git a/reference-materials/docs/rememberme.md b/reference-materials/docs/rememberme.md index 41d5ea97..1491e538 100644 --- a/reference-materials/docs/rememberme.md +++ b/reference-materials/docs/rememberme.md @@ -20,6 +20,8 @@ To enable, add a 'RememberMe' property to the 'options' object in your engrid th **fieldClearSelectorTargetLocation**: A string that is set to either 'before' or 'after'. Defaults to 'before'. +**fieldClearLabel**: A string containing the text for the "Clear Autofill" link that appears when data is being auto-filled. Defaults to `(clear autofill)`. + **cookieName**: String dictating the name of the cookie stores the autofill data. Defaults to 'engrid-autofill'. **cookieExpirationDays**: Number of days for the cookie expiration. Defaults to 365. @@ -30,8 +32,14 @@ To enable, add a 'RememberMe' property to the 'options' object in your engrid th **fieldDonationRecurrPayRadioName**: A string containing the name of the Engaging Networks frequency field. You can probably let this stay defaulted. Defaults to 'transaction.recurrpay' +**fieldDonationRecurrFreqRadioName**: A string containing the name of the Engaging Networks recurring frequency radio buttons. You can probably let this stay defaulted. Defaults to 'transaction.recurrfreq' + **fieldDonationAmountOtherCheckboxID**: This is deprecated and will be removed. +**hide**: Boolean. If set to `true`, the Remember Me opt-in element is rendered with the `hide` CSS class, effectively keeping it invisible while still allowing the component to function. Useful when clients want autofill behavior without displaying the opt-in checkbox to the donor. Defaults to `false`. + +**encryptData**: Boolean. If set to true, the saved form details are encrypted with browser-native AES-GCM (Web Crypto) before being stored, and the resulting bytes are base64-encoded. This applies to both the local cookie and the remote-iframe cookie. The encryption key is randomly generated once per device and kept in `localStorage` (never written to the cookie itself, so it never travels with the transported value). In remote mode, the key and store live in the iframe's origin, so multiple sites sharing that remote origin (e.g. FWW and FWA) share them automatically — however, note that this relies on localStorage access within the cross-origin iframe, which is subject to Chrome's third-party storage partitioning (see known limitations). If the key is missing or decryption otherwise fails (a different device, or cleared storage), the component silently discards the data and falls back to the normal, no-autofill experience. Defaults to false. When enabled with `remoteUrl`, the remote page must implement the matching encrypt/decrypt protocol (see the "Sample Remote URL Page Markup" section below for a reference starting point). + --- **Sample Remote URL Page Markup to be used as a cookie repository**