PROD-1125 1118 config overrides query cookie window

CHANGELOG.md

@@ -17,6 +17,7 @@ The types of changes are:
 
 ## [Unreleased](https://github.com/ethyca/fides/compare/2.22.0...main)
 - Added support for 3 additional config variables in Fides.js: fidesEmbed, fidesDisableSaveApi, and fidesTcString [#4262](https://github.com/ethyca/fides/pull/4262)
+- Added support for fidesEmbed, fidesDisableSaveApi, and fidesTcString to be passed into Fides.js via query param, cookie, or window object [#4297](https://github.com/ethyca/fides/pull/4297)
 
 ### Added
 - Added a `FidesPreferenceToggled` event to Fides.js to track when user preferences change without being saved [#4253](https://github.com/ethyca/fides/pull/4253)

clients/fides-js/rollup.config.mjs

@@ -14,7 +14,7 @@ const GZIP_SIZE_ERROR_KB = 22; // fail build if bundle size exceeds this
 const GZIP_SIZE_WARN_KB = 15; // log a warning if bundle size exceeds this
 
 // TCF
-const GZIP_SIZE_TCF_ERROR_KB = 41;
+const GZIP_SIZE_TCF_ERROR_KB = 42;
 const GZIP_SIZE_TCF_WARN_KB = 35;
 
 const preactAliases = {

clients/fides-js/src/fides-tcf.ts

@@ -52,6 +52,8 @@ import { shopify } from "./integrations/shopify";
 
 import {
   FidesConfig,
+  FidesOptionOverrides,
+  OverrideOptions,
   PrivacyExperience,
   UserConsentPreference,
 } from "./lib/consent-types";
@@ -60,6 +62,7 @@ import { generateFidesString, initializeCmpApi } from "./lib/tcf";
 import {
   getInitialCookie,
   getInitialFides,
+  getOverrideFidesOptions,
   initialize,
 } from "./lib/initialize";
 import type { Fides } from "./lib/initialize";
@@ -71,6 +74,7 @@ import {
   hasSavedTcfPreferences,
   isNewFidesCookie,
   isPrivacyExperience,
+  tcfConsentCookieObjHasSomeConsentSet,
   transformTcfPreferencesToCookieKeys,
   transformUserPreferenceToBoolean,
 } from "./fides";
@@ -96,6 +100,9 @@ declare global {
       callback: (tcData: TCData, success: boolean) => void,
       parameter?: number | string
     ) => void;
+    config: {
+      fides: OverrideOptions;
+    };
   }
 }
 
@@ -164,6 +171,10 @@ const updateCookie = async (
  * Initialize the global Fides object with the given configuration values
  */
 const init = async (config: FidesConfig) => {
+  const overrideOptions: Partial<FidesOptionOverrides> =
+    getOverrideFidesOptions();
+  // eslint-disable-next-line no-param-reassign
+  config.options = { ...config.options, ...overrideOptions };
   const cookie = getInitialCookie(config);
   if (config.options.fidesString) {
     // If a fidesString is explicitly passed in, we override the associated cookie props, which are then used to
@@ -178,7 +189,7 @@ const init = async (config: FidesConfig) => {
       config.options.debug
     );
   } else if (
-    cookie.tcf_consent &&
+    tcfConsentCookieObjHasSomeConsentSet(cookie.tcf_consent) &&
     !cookie.fides_string &&
     isPrivacyExperience(config.experience) &&
     experienceIsValid(config.experience, config.options)

clients/fides-js/src/fides.ts

@@ -53,14 +53,20 @@ import {
   buildCookieConsentForExperiences,
   isNewFidesCookie,
 } from "./lib/cookie";
-import { FidesConfig, PrivacyExperience } from "./lib/consent-types";
+import {
+  FidesConfig,
+  FidesOptionOverrides,
+  OverrideOptions,
+  PrivacyExperience,
+} from "./lib/consent-types";
 
 import { dispatchFidesEvent } from "./lib/events";
 
 import {
   initialize,
   getInitialCookie,
   getInitialFides,
+  getOverrideFidesOptions,
 } from "./lib/initialize";
 import type { Fides } from "./lib/initialize";
 
@@ -70,6 +76,9 @@ import { getConsentContext } from "./lib/consent-context";
 declare global {
   interface Window {
     Fides: Fides;
+    config: {
+      fides: OverrideOptions;
+    };
   }
 }
 
@@ -95,6 +104,10 @@ const updateCookie = async (
  * Initialize the global Fides object with the given configuration values
  */
 const init = async (config: FidesConfig) => {
+  const overrideOptions: Partial<FidesOptionOverrides> =
+    getOverrideFidesOptions();
+  // eslint-disable-next-line no-param-reassign
+  config.options = { ...config.options, ...overrideOptions };
   const cookie = getInitialCookie(config);
   const initialFides = getInitialFides({ ...config, cookie });
   if (initialFides) {

clients/fides-js/src/lib/consent-constants.ts

@@ -0,0 +1,33 @@
+import { FidesOptionOverrides, OverrideOptions } from "./consent-types";
+
+// Regex to validate a location string, which must:
+// 1) Start with a 2-3 character country code (e.g. "US")
+// 2) Optionally end with a 2-3 character region code (e.g. "CA")
+// 3) Separated by a dash (e.g. "US-CA")
+export const VALID_ISO_3166_LOCATION_REGEX = /^\w{2,3}(-\w{2,3})?$/;
+
+export const FIDES_OVERRIDE_OPTIONS_VALIDATOR_MAP: {
+  fidesOption: keyof FidesOptionOverrides;
+  fidesOptionType: "string" | "boolean";
+  fidesOverrideKey: keyof OverrideOptions;
+  validationRegex: RegExp;
+}[] = [
+  {
+    fidesOption: "fidesEmbed",
+    fidesOptionType: "boolean",
+    fidesOverrideKey: "fides_embed",
+    validationRegex: /^(true|false)$/,
+  },
+  {
+    fidesOption: "fidesDisableSaveApi",
+    fidesOptionType: "boolean",
+    fidesOverrideKey: "fides_disable_save_api",
+    validationRegex: /^(true|false)$/,
+  },
+  {
+    fidesOption: "fidesString",
+    fidesOptionType: "string",
+    fidesOverrideKey: "fides_string",
+    validationRegex: /(.*)/,
+  },
+];

clients/fides-js/src/lib/consent-types.ts

@@ -201,11 +201,16 @@ export type UserGeolocation = {
   region?: string; // "NY"
 };
 
-// Regex to validate a location string, which must:
-// 1) Start with a 2-3 character country code (e.g. "US")
-// 2) Optionally end with a 2-3 character region code (e.g. "CA")
-// 3) Separated by a dash (e.g. "US-CA")
-export const VALID_ISO_3166_LOCATION_REGEX = /^\w{2,3}(-\w{2,3})?$/;
+export type OverrideOptions = {
+  fides_string: string;
+  fides_disable_save_api: boolean;
+  fides_embed: boolean;
+};
+
+export type FidesOptionOverrides = Pick<
+  FidesOptions,
+  "fidesString" | "fidesDisableSaveApi" | "fidesEmbed"
+>;
 
 export enum ButtonType {
   PRIMARY = "primary",

clients/fides-js/src/lib/consent-utils.ts

@@ -9,10 +9,10 @@ import {
   PrivacyNotice,
   UserConsentPreference,
   UserGeolocation,
-  VALID_ISO_3166_LOCATION_REGEX,
 } from "./consent-types";
 import { EXPERIENCE_KEYS_WITH_PREFERENCES } from "./tcf/constants";
 import { TCFPurposeConsentRecord } from "./tcf/types";
+import { VALID_ISO_3166_LOCATION_REGEX } from "./consent-constants";
 
 /**
  * Wrapper around 'console.log' that only logs output when the 'debug' banner

clients/fides-js/src/lib/cookie.ts

@@ -81,6 +81,15 @@ const CODEC: Types.CookieCodecConfig<string, string> = {
   encodeValue: encodeURIComponent,
 };
 
+export const tcfConsentCookieObjHasSomeConsentSet = (
+  tcf_consent: TcfCookieConsent | undefined
+): boolean => {
+  if (!tcf_consent) {
+    return false;
+  }
+  return Object.keys(tcf_consent).some((val) => Object.keys(val).length >= 0);
+};
+
 /**
  * Each cookie will be assigned an autogenerated user/device ID, to match user's
  * consent preferences between the browser and the server. This is a randomly
@@ -118,6 +127,12 @@ export const makeFidesCookie = (consent?: CookieKeyConsent): FidesCookie => {
   };
 };
 
+/**
+ * Retrieve cookie by name
+ */
+export const getCookieByName = (cookieName: string): string | undefined =>
+  getCookie(cookieName, CODEC);
+
 /**
  * Attempt to read, parse, and return the current Fides cookie from the browser.
  * If one doesn't exist, make a new default cookie (including generating a new
@@ -138,7 +153,7 @@ export const getOrMakeFidesCookie = (
   }
 
   // Check for an existing cookie for this device
-  const cookieString = getCookie(CONSENT_COOKIE_NAME, CODEC);
+  const cookieString = getCookieByName(CONSENT_COOKIE_NAME);
   if (!cookieString) {
     debugLog(
       debug,

clients/fides-js/src/lib/initialize.ts

@@ -9,6 +9,7 @@ import {
   CookieKeyConsent,
   CookieMeta,
   FidesCookie,
+  getCookieByName,
   getOrMakeFidesCookie,
   isNewFidesCookie,
   makeConsentDefaultsLegacy,
@@ -20,6 +21,7 @@ import {
   ConsentMethod,
   EmptyExperience,
   FidesConfig,
+  FidesOptionOverrides,
   FidesOptions,
   PrivacyExperience,
   SaveConsentPreference,
@@ -40,6 +42,7 @@ import { updateConsentPreferences } from "./preferences";
 import { resolveConsentValue } from "./consent-value";
 import { initOverlay } from "./consent";
 import { TcfCookieConsent } from "./tcf/types";
+import { FIDES_OVERRIDE_OPTIONS_VALIDATOR_MAP } from "./consent-constants";
 
 export type Fides = {
   consent: CookieKeyConsent;
@@ -143,6 +146,35 @@ const automaticallyApplyGPCPreferences = ({
   }
 };
 
+/**
+ * Gets and validates Fides override options provided through URL query params, cookie or window obj.
+ */
+export const getOverrideFidesOptions = (): Partial<FidesOptionOverrides> => {
+  const overrideOptions: Partial<FidesOptionOverrides> = {};
+  if (typeof window !== "undefined") {
+    const params = new URLSearchParams(document.location.search);
+    FIDES_OVERRIDE_OPTIONS_VALIDATOR_MAP.forEach(
+      ({ fidesOption, fidesOptionType, fidesOverrideKey, validationRegex }) => {
+        // look for override options on URL query params, window obj, and cookie
+        const queryParamOverride: string | null = params.get(fidesOverrideKey);
+        const windowObjOverride: string | boolean | undefined = window.config
+          ?.fides
+          ? window.config?.fides[fidesOverrideKey]
+          : undefined;
+        const cookieOverride: string | undefined =
+          getCookieByName(fidesOverrideKey);
+        const value = queryParamOverride || windowObjOverride || cookieOverride;
+        if (value && validationRegex.test(value.toString())) {
+          // coerce to expected type in FidesOptions
+          overrideOptions[fidesOption] =
+            fidesOptionType === "string" ? value : JSON.parse(value.toString());
+        }
+      }
+    );
+  }
+  return overrideOptions;
+};
+
 /**
  * Get the initial Fides cookie based on legacy consent values
  * as well as any preferences stored in existing cookies