feat(insights): encode payload to base64

algolia · Mar 28, 2019 · 6b15b1c · 6b15b1c
1 parent b183fb0
commit 6b15b1c
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 19 deletions.
diff --git a/src/helpers/__tests__/insights-test.ts b/src/helpers/__tests__/insights-test.ts
@@ -17,8 +17,8 @@ describe('insights', () => {
         objectIDs: ['3'],
         eventName: 'Add to Cart',
       })
-    ).toEqual(
-      `data-insights-method="clickedObjectIDsAfterSearch" data-insights-payload='{"objectIDs":["3"],"eventName":"Add to Cart"}'`
+    ).toMatchInlineSnapshot(
+      `"data-insights-method=\\"clickedObjectIDsAfterSearch\\" data-insights-payload=\\"eyJvYmplY3RJRHMiOlsiMyJdLCJldmVudE5hbWUiOiJBZGQgdG8gQ2FydCJ9\\""`
     );
   });
 });
@@ -33,8 +33,8 @@ describe('writeDataAttributes', () => {
           eventName: 'Add to Cart',
         },
       })
-    ).toEqual(
-      `data-insights-method="clickedObjectIDsAfterSearch" data-insights-payload='{"objectIDs":["3"],"eventName":"Add to Cart"}'`
+    ).toMatchInlineSnapshot(
+      `"data-insights-method=\\"clickedObjectIDsAfterSearch\\" data-insights-payload=\\"eyJvYmplY3RJRHMiOlsiMyJdLCJldmVudE5hbWUiOiJBZGQgdG8gQ2FydCJ9\\""`
     );
   });
   it('should reject undefined payloads', () => {
@@ -99,10 +99,13 @@ describe('readDataAttributes', () => {
     let domElement: HTMLElement;
 
     beforeEach(() => {
+      const payload = btoa(
+        JSON.stringify({ objectIDs: ['3'], eventName: 'Add to Cart' })
+      );
       domElement = makeDomElement(
         `<button
         data-insights-method="clickedObjectIDsAfterSearch"
-        data-insights-payload='{"objectIDs":["3"],"eventName":"Add to Cart"}'
+        data-insights-payload="${payload}"
         > Add to Cart </button>`
       );
     });
@@ -130,7 +133,7 @@ describe('readDataAttributes', () => {
       expect(() =>
         readDataAttributes(domElement)
       ).toThrowErrorMatchingInlineSnapshot(
-        `"Unable to parse \`data-insights-payload\`"`
+        `"The insights helper was unable to parse \`data-insights-payload\`"`
       );
     });
   });

diff --git a/src/helpers/insights.ts b/src/helpers/insights.ts
@@ -9,22 +9,24 @@ export function readDataAttributes(
   const method = domElement.getAttribute(
     'data-insights-method'
   ) as InsightsClientMethod;
+
   const serializedPayload = domElement.getAttribute('data-insights-payload');
+
   if (typeof serializedPayload !== 'string') {
     throw new Error(
-      `The insights helper expects data-insights-payload to be a JSON string`
+      `The insights helper expects data-insights-payload to be a base64 encoded JSON string`
     );
   }
+
   try {
     const payload: Partial<InsightsClientPayload> = JSON.parse(
-      serializedPayload
+      atob(serializedPayload)
     );
-    return {
-      method,
-      payload,
-    };
+    return { method, payload };
   } catch (error) {
-    throw new Error('Unable to parse `data-insights-payload`');
+    throw new Error(
+      'The insights helper was unable to parse `data-insights-payload`'
+    );
   }
 }
 
@@ -42,13 +44,16 @@ export function writeDataAttributes({
   if (typeof payload !== 'object') {
     throw new Error(`The insights helper expects payload to be an object.`);
   }
+
   let serializedPayload: string;
+
   try {
-    serializedPayload = JSON.stringify(payload);
+    serializedPayload = btoa(JSON.stringify(payload));
   } catch (error) {
     throw new Error(`Could not JSON serialize the payload object.`);
   }
-  return `data-insights-method="${method}" data-insights-payload='${serializedPayload}'`;
+
+  return `data-insights-method="${method}" data-insights-payload="${serializedPayload}"`;
 }
 
 export default function insights(

diff --git a/src/lib/__tests__/insights-listener-test.tsx b/src/lib/__tests__/insights-listener-test.tsx
@@ -37,11 +37,15 @@ describe('withInsightsListener', () => {
   };
 
   it('should capture clicks performed on inner elements with data-insights-method defined', () => {
+    const payload = btoa(
+      JSON.stringify({ objectIDs: ['1'], eventName: 'Add to Cart' })
+    );
+
     const Hits = () => (
       <div>
         <button
           data-insights-method="clickedObjectIDsAfterSearch"
-          data-insights-payload='{ "objectIDs": ["1"], "eventName": "Add to Cart" }'
+          data-insights-payload={payload}
         >
           Add to Cart
         </button>
@@ -58,11 +62,13 @@ describe('withInsightsListener', () => {
   });
 
   it('should not capture clicks performed on inner elements with no data-insights-method defined', () => {
+    const payload = btoa(
+      JSON.stringify({ objectIDs: ['1'], eventName: 'Add to Cart' })
+    );
+
     const Hits = () => (
       <div>
-        <button data-insights-payload='{ "objectIDs": ["1"], "eventName": "Add to Cart" }'>
-          Add to Cart
-        </button>
+        <button data-insights-payload={payload}>Add to Cart</button>
       </div>
     );