Allow for CORS preflight cacheability by passing passport through custom header (#166)

Author: zapo

lib/core/network.ts

@@ -2,6 +2,8 @@ import type { ResolvedConfig } from "../config";
 import { default as buildInfo } from "../build.json";
 import { LocalStorage } from "./storage";
 
+const identityHeaderName = "X-Optable-Visitor";
+
 function buildRequest(path: string, config: ResolvedConfig, init?: RequestInit): Request {
   const { site, host, cookies } = config;
 
@@ -24,21 +26,24 @@ function buildRequest(path: string, config: ResolvedConfig, init?: RequestInit):
     url.searchParams.set("tcf", config.consent.tcf);
   }
 
+  const requestInit: RequestInit = { ...init };
+
   if (cookies) {
+    requestInit.credentials = "include";
     url.searchParams.set("cookies", "yes");
   } else {
     const ls = new LocalStorage(config);
     const pass = ls.getPassport();
     url.searchParams.set("cookies", "no");
-    url.searchParams.set("passport", pass ? pass : "");
-  }
 
-  const requestInit: RequestInit = { ...init };
-  requestInit.credentials = "include";
-
-  const request = new Request(url.toString(), requestInit);
+    if (pass) {
+      const headers = new Headers(requestInit.headers);
+      headers.set(identityHeaderName, pass);
+      requestInit.headers = headers;
+    }
+  }
 
-  return request;
+  return new Request(url.toString(), requestInit);
 }
 
 async function fetch<T>(path: string, config: ResolvedConfig, init?: RequestInit): Promise<T> {
@@ -51,16 +56,9 @@ async function fetch<T>(path: string, config: ResolvedConfig, init?: RequestInit
     throw new Error(data.error);
   }
 
-  if (data.passport) {
+  if (response.headers.has(identityHeaderName)) {
     const ls = new LocalStorage(config);
-    ls.setPassport(data.passport);
-
-    // We delete the passport attribute from the returned payload. This is because
-    // the targeting edge handler was initially made to return targeting data directly
-    // in the form of 'key values' on the returned JSON payload -- if we don't delete
-    // the `passport` attribute here, it may end up sent as targeting data to ad servers.
-    // Not the end of the world, but something we want to avoid due to passport size.
-    delete data.passport;
+    ls.setPassport(response.headers.get(identityHeaderName) || "");
   }
 
   return data;

lib/sdk.test.ts

@@ -64,6 +64,7 @@ const defaultConfig = {
 
 describe("Breaking change detection: if typescript complains or a test fails it's likely a breaking change has occurred.", () => {
   beforeEach(() => localStorage.clear());
+  afterEach(() => jest.clearAllMocks());
 
   test("TEST SHOULD NEVER NEED TO BE UPDATED, UNLESS MAJOR VERSION UPDATE: constructor with cookies and initPassport set", async () => {
     new OptableSDK({
@@ -232,7 +233,7 @@ describe("behavior testing of", () => {
       expect.objectContaining({
         method: "POST",
         _bodyText: '["c:a1a335b8216658319f96a4b0c718557ba41dd1f5"]',
-        url: `${TEST_BASE_URL}/identify?osdk=web-0.0.0-experimental&cookies=no&passport=`,
+        url: `${TEST_BASE_URL}/identify?osdk=web-0.0.0-experimental&cookies=no`,
       })
     );
 
@@ -241,8 +242,9 @@ describe("behavior testing of", () => {
     expect(fetchSpy).toHaveBeenLastCalledWith(
       expect.objectContaining({
         method: "POST",
+        headers: { map: expect.objectContaining({ "x-optable-visitor": "PASSPORT" }) },
         _bodyText: '["c:a1a335b8216658319f96a4b0c718557ba41dd1f6"]',
-        url: `${TEST_BASE_URL}/identify?osdk=web-0.0.0-experimental&cookies=no&passport=PASSPORT`,
+        url: `${TEST_BASE_URL}/identify?osdk=web-0.0.0-experimental&cookies=no`,
       })
     );
   });
@@ -465,4 +467,38 @@ describe("behavior testing of", () => {
       })
     );
   });
+
+  test("passport is passed along", async () => {
+    const fetchSpy = jest.spyOn(window, "fetch");
+
+    const buildRes = (passport) => ({
+      headers: new Headers({ "Content-Type": "application/json", "X-Optable-Visitor": passport }),
+      ok: true,
+      json: () => Promise.resolve({}),
+    });
+
+    fetchSpy.mockImplementationOnce(() => Promise.resolve(buildRes("one")));
+    fetchSpy.mockImplementationOnce(() => Promise.resolve(buildRes("two")));
+    fetchSpy.mockImplementationOnce(() => Promise.resolve(buildRes("three")));
+
+    const sdk = new OptableSDK({ ...defaultConfig, initPassport: true, cookies: false });
+
+    let request;
+
+    await sdk.init;
+    request = fetchSpy.mock.lastCall[0];
+    expect(request.headers.get("X-Optable-Visitor")).toBe(null);
+
+    await sdk.identify("c:id").catch(() => {});
+    request = fetchSpy.mock.lastCall[0];
+    expect(request.headers.get("X-Optable-Visitor")).toBe("one");
+
+    await sdk.identify("c:id").catch(() => {});
+    request = fetchSpy.mock.lastCall[0];
+    expect(request.headers.get("X-Optable-Visitor")).toBe("two");
+
+    await sdk.identify("c:id").catch(() => {});
+    request = fetchSpy.mock.lastCall[0];
+    expect(request.headers.get("X-Optable-Visitor")).toBe("three");
+  });
 });

lib/test/handlers.ts

@@ -9,10 +9,10 @@ import { ResolveResponse } from "edge/resolve";
 
 const ok200 = {
   status: 200,
-};
-
-const passport: EdgePassport = {
-  passport: "PASSPORT",
+  headers: new Headers({
+    "X-Optable-Visitor": "PASSPORT",
+    "Content-Type": "application/json",
+  }),
 };
 
 const handlers = [
@@ -23,11 +23,11 @@ const handlers = [
       auctionConfig: null,
       getTopicsURL: "https://ads.optable.co/ca/topics/v1/get?origin=70cc15ee-484c-4d26-8868-c949a5c084b8",
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 
   http.post(`${TEST_BASE_URL}/identify`, async ({}) => {
-    return HttpResponse.json({ ...passport }, ok200);
+    return HttpResponse.json({}, ok200);
   }),
 
   http.post(`${TEST_BASE_URL}/uid2/token`, async ({}) => {
@@ -39,22 +39,22 @@ const handlers = [
       RefreshExpires: 2734462312780,
       RefreshResponseKey: "gdsfgfsd",
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 
   http.post(`${TEST_BASE_URL}/witness`, async ({}) => {
-    return HttpResponse.json({ ...passport }, ok200);
+    return HttpResponse.json({}, ok200);
   }),
 
   http.post(`${TEST_BASE_URL}/profile`, async ({}) => {
-    return HttpResponse.json({ ...passport }, ok200);
+    return HttpResponse.json({}, ok200);
   }),
 
   http.get(`${TEST_BASE_URL}/v1/resolve`, async ({}) => {
     const data: ResolveResponse = {
       clusters: [],
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 
   http.post(`${TEST_BASE_URL}/v1/tokenize`, async ({}) => {
@@ -64,22 +64,22 @@ const handlers = [
         ext: undefined,
       },
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 
   http.get(`${TEST_BASE_URL}/v2/targeting`, async ({}) => {
     const data: TargetingResponse = {
       audience: [],
       user: [],
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 
   http.get(`${TEST_BASE_URL}/v1/resolve`, async ({}) => {
     const data: ResolveResponse = {
       clusters: [],
     };
-    return HttpResponse.json({ ...data, ...passport }, ok200);
+    return HttpResponse.json({ ...data }, ok200);
   }),
 ];