Swap cross-origin iframe to cross-origin request

I've picked the creative rotation example at random to try out the createWorklet function here. Unlike the previous commit where you can do a straight swap between addModule and createWorklet, in this commit I've removed the iframe completely. Whenever we request a worklet from a different origin we need to set the headers to allow cors and enable cross origin worklets. As I've removed the iframe, I've moved the contents to control the demo into the invoking page directly (using hbs partials). For the sake of the demo I've added the global getContentProducerUrl function to make it easier to check the domain of the content producer for getting the worklet and the ads. Also, as the demo is no longer being styled within the iframe I've copied the css styles to the publisher pages.
GoogleChromeLabs · Aug 6, 2024 · 16c0910 · 16c0910
1 parent 9a97ea0
commit 16c0910
Show file tree

Hide file tree

Showing 10 changed files with 166 additions and 80 deletions.
diff --git a/firebase.json b/firebase.json
@@ -70,6 +70,14 @@
             {
               "key": "Supports-Loading-Mode",
               "value": "fenced-frame"
+            },
+            {
+              "key": "Access-Control-Allow-Origin",
+              "value": "*"
+            },
+            {
+              "key": "Shared-Storage-Cross-Origin-Worklet-Allowed",
+              "value": "?1"
             }
           ]
         }

diff --git a/functions/app/helpers/setup-view.js b/functions/app/helpers/setup-view.js
@@ -25,6 +25,7 @@ module.exports = (app, viewName) => {
     hbs.engine({
       extname: '.hbs',
       layoutsDir: path.join(__dirname + '/../../view'),
+      partialsDir: path.join(__dirname + '/../../view/partials')
     })
   );
 

diff --git a/functions/view/main.hbs b/functions/view/main.hbs
@@ -31,9 +31,16 @@
     <link rel='stylesheet' href='https://unpkg.com/open-props/buttons.min.css' />
     <link rel='stylesheet' href='index.css' />
     <script>
-      function checkSharedStorage() { if (!('sharedStorage' in window)) {
-      document.querySelector('.demo__content').style.display = 'none';
-      document.querySelector('.demo__instructions').style.display = 'inherit'; } }
+      function getContentProducerUrl() {
+        return "{{{contentProducerUrl}}}";
+      }
+      
+      function checkSharedStorage() {
+        if (!('sharedStorage' in window)) {
+          document.querySelector('.demo__content').style.display = 'none';
+          document.querySelector('.demo__instructions').style.display = 'inherit';
+        }
+      }
     </script>
   </head>
 

diff --git a/functions/view/partials/creativeRotationDemoControls.hbs b/functions/view/partials/creativeRotationDemoControls.hbs
@@ -0,0 +1,26 @@
+<div class="demo__controls-section">    
+  <fencedframe id="ad-slot" mode="opaque-ads"></fencedframe>
+  <div class="demo__controls">
+    <h5>Demo control</h5>
+    <div class="demo__buttons-container">
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="resetSharedStorage('sequential')"
+      >
+        Set rotation mode to <br />"Sequential"
+      </button>
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="resetSharedStorage('even-distribution')"
+      >
+        Set rotation mode to <br />"Even distribution"<br />(~33% / ~33% / ~33%)
+      </button>
+      <button
+        class="mdl-button mdl-js-button mdl-button--raised demo__button"
+        onclick="resetSharedStorage('weighted-distribution')"
+      >
+        Set rotation mode to <br />"Weighted distribution"<br />(70% / 20% / 10%)
+      </button>
+    </div>
+  </div>
+</div>
diff --git a/functions/view/publisher-a/creative-rotation.hbs b/functions/view/publisher-a/creative-rotation.hbs
@@ -13,7 +13,7 @@
     <h3>Shared storage - Creative rotation demo</h3>
   </div>
   <div class='demo__content'>
-    <iframe class='demo__dsp-iframe' src='{{{contentProducerUrl}}}/url-selection/creative-rotation.html'></iframe>
+    {{> creativeRotationDemoControls}}
     <card class='demo__description'>
       <h4>Description</h4>
       <p>
@@ -55,6 +55,13 @@
     </p>
   </card>
 </main>
+<script src="{{{contentProducerUrl}}}/url-selection/creative-rotation.js"></script>
 <script defer>
   checkSharedStorage()
+
+  // This button is for resetting the demo, and is not part of the core logic
+  function resetSharedStorage(rotationMode) {
+    window.sharedStorage.set('creative-rotation-mode', rotationMode);
+    console.log(`creative rotation mode set to ${rotationMode}`);
+  }
 </script>
diff --git a/functions/view/publisher-b/creative-rotation.hbs b/functions/view/publisher-b/creative-rotation.hbs
@@ -13,7 +13,7 @@
     <h3>Shared storage - Creative rotation demo</h3>
   </div>
   <div class='demo__content'>
-    <iframe class='demo__dsp-iframe' src='{{{contentProducerUrl}}}/url-selection/creative-rotation.html'></iframe>
+    {{> creativeRotationDemoControls}}
     <card class='demo__description'>
       <h4>Description</h4>
       <p>
@@ -55,6 +55,13 @@
     </p>
   </card>
 </main>
+<script src="{{{contentProducerUrl}}}/url-selection/creative-rotation.js"></script>
 <script defer>
   checkSharedStorage()
+
+  // This button is for resetting the demo, and is not part of the core logic
+  function resetSharedStorage(rotationMode) {
+    window.sharedStorage.set('creative-rotation-mode', rotationMode);
+    console.log(`creative rotation mode set to ${rotationMode}`);
+  }
 </script>
diff --git a/sites/content-producer/url-selection/creative-rotation.html b/sites/content-producer/url-selection/creative-rotation.html
diff --git a/sites/content-producer/url-selection/creative-rotation.js b/sites/content-producer/url-selection/creative-rotation.js
@@ -16,20 +16,20 @@
 
 // For demo purposes. The hostname is used to determine the usage of
 // development localhost URL vs production URL
-const contentProducerUrl = window.location.host;
+const contentProducerUrl = window.getContentProducerUrl();
 
 // Ad confg with the URL of the ad, a probability weight for rotation, and the clickthrough rate.
 const DEMO_AD_CONFIG = [
   {
-    url: `https://${contentProducerUrl}/ads/ad-1.html`,
+    url: `${contentProducerUrl}/ads/ad-1.html`,
     weight: 0.7,
   },
   {
-    url: `https://${contentProducerUrl}/ads/ad-2.html`,
+    url: `${contentProducerUrl}/ads/ad-2.html`,
     weight: 0.2,
   },
   {
-    url: `https://${contentProducerUrl}/ads/ad-3.html`,
+    url: `${contentProducerUrl}/ads/ad-3.html`,
     weight: 0.1,
   },
 ];
@@ -47,7 +47,9 @@ async function seedStorage() {
 
 async function injectAd() {
   // Load the worklet module
-  await window.sharedStorage.worklet.addModule('creative-rotation-worklet.js');
+  const creativeRotationWorklet = await window.sharedStorage.createWorklet(
+    `${contentProducerUrl}/url-selection/creative-rotation-worklet.js`
+  );
 
   // Initially set the storage to sequential mode for the demo
   seedStorage();
@@ -58,7 +60,7 @@ async function injectAd() {
   const resolveToConfig = typeof window.FencedFrameConfig !== 'undefined';
 
   // Run the URL selection operation to determine the next ad that should be rendered
-  const selectedUrl = await window.sharedStorage.selectURL('creative-rotation', urls, {
+  const selectedUrl = await creativeRotationWorklet.selectURL('creative-rotation', urls, {
     data: DEMO_AD_CONFIG,
     resolveToConfig
   });

diff --git a/sites/publisher-a/index.css b/sites/publisher-a/index.css
@@ -105,3 +105,51 @@ card {
     background-color: var(--orange-9);
   }
 }
+
+.demo__controls-section {
+  width: 300px;
+}
+#ad-slot {
+  height: 250px;
+  border: none;
+}
+
+#button-slot {
+  height: 100px;
+  border: none;
+}
+
+.demo__card,
+.demo__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-2);
+  background: var(--surface-3);
+  border: 1px solid var(--surface-1);
+  padding: var(--size-3);
+  margin: var(--size-3) 0;
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-2);
+  margin-top: 0;
+}
+
+.demo__controls h5 {
+  margin-bottom: var(--size-2);
+}
+
+.demo__buttons-container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.demo__button {
+  zoom: 90%;
+  /* max-width: var(--size-13); */
+  --_bg: linear-gradient(var(--indigo-5), var(--indigo-7));
+  --_border: var(--indigo-6);
+  --_text: var(--indigo-0);
+  --_ink-shadow: 0 1px 0 var(--indigo-9);
+  margin: 5px;
+}
diff --git a/sites/publisher-b/index.css b/sites/publisher-b/index.css
@@ -101,3 +101,52 @@ card {
     background-color: var(--orange-9);
   }
 }
+
+.demo__controls-section {
+  width: 300px;
+}
+
+#ad-slot {
+  height: 250px;
+  border: none;
+}
+
+#button-slot {
+  height: 100px;
+  border: none;
+}
+
+.demo__card,
+.demo__controls {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--size-2);
+  background: var(--surface-3);
+  border: 1px solid var(--surface-1);
+  padding: var(--size-3);
+  margin: var(--size-3) 0;
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-2);
+  margin-top: 0;
+}
+
+.demo__controls h5 {
+  margin-bottom: var(--size-2);
+}
+
+.demo__buttons-container {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+}
+
+.demo__button {
+  zoom: 90%;
+  /* max-width: var(--size-13); */
+  --_bg: linear-gradient(var(--indigo-5), var(--indigo-7));
+  --_border: var(--indigo-6);
+  --_text: var(--indigo-0);
+  --_ink-shadow: 0 1px 0 var(--indigo-9);
+  margin: 5px;
+}