prebid-universal-creative 1.15.0 → 1.17.0

package/integ-test/spec/native_legacy_spec.js

@@ -0,0 +1,213 @@
+import {test, expect} from '../fixtures/test.js';
+
+test.describe('Legacy native', () => {
+
+    const TRACKER_URL = 'https://www.tracker.com/';
+    const TRACKERS = Object.fromEntries(
+        ['imp', 'js', 'click'].map(ttype => [ttype, `${TRACKER_URL}${ttype}`])
+    )
+
+    const TEMPLATE = `
+        <div id="the-ad">
+          <a class="clickUrl" href="##hb_native_linkurl##">Click</a>
+          <img class="image" width="100" src="##hb_native_image##" />
+          <div class="title pb-click">##hb_native_title##</div>
+          <div class="body">##hb_native_body##</div>
+        </div>    
+    `;
+
+    const RENDERER_URL = 'https://www.custom-renderer.com/renderer.js';
+
+    function customRenderer(data) {
+        const assets = Object.fromEntries(data.map((d) => [d.key, d.value]))
+        return `
+         <div id="the-ad">
+          <a class="clickUrl" href="${assets.clickUrl}">Click</a>
+          <img class="image" width="100" src="${assets.image}" />
+          <div class="title pb-click">${assets.title}</div>
+          <div class="body">${assets.body}</div>            
+         </div>
+        `
+    }
+
+
+    const ASSETS = {
+        image: {
+            value: 'https://prebid.org/wp-content/uploads/2021/02/Prebid-Logo-RGB-Full-Color-Medium.svg',
+            expect(e) {
+                return e.toHaveAttribute('src', this.value)
+            }
+        },
+        title: {
+            value: 'Ad title',
+            expect(e) {
+                return e.toHaveText(this.value)
+            }
+        },
+        body: {
+            value: 'Ad body',
+            expect(e) {
+                return e.toHaveText(this.value)
+            }
+        },
+        clickUrl: {
+            value: 'https://some-link.com',
+            expect(e) {
+                return e.toHaveAttribute('href', this.value)
+            }
+        }
+    }
+
+    let trackersFired;
+
+    test.beforeEach(async ({page}) => {
+        trackersFired = {};
+        await page.route((u) => u.href.startsWith(TRACKER_URL), async (route, req) => {
+            const ttype = req.url().substring(TRACKER_URL.length);
+            trackersFired[ttype] = true;
+            await route.fulfill({});
+        });
+        await page.route((u) => u.href.startsWith(RENDERER_URL), async (route) => {
+            await route.fulfill({
+                contentType: 'application/javascript',
+                body: `window.renderAd = ${customRenderer.toString()};`
+            })
+        })
+    });
+
+
+    function bidResponse(native) {
+        return {
+            ad: null,
+            adId: 'mock-ad',
+            native
+        }
+    }
+
+    function getCreative(isBanner, isTemplateInCreative, isSafeFrame) {
+        if (!isBanner) {
+            return isTemplateInCreative ? 'native-legacy' : 'native-no-template'
+        } else {
+            return (isTemplateInCreative ? 'native-banner-legacy' : 'native-banner-no-template') + (isSafeFrame ? '' : '-no-frame');
+        }
+    }
+
+
+    Object.entries({
+        'legacy response': {
+            ...Object.fromEntries(Object.entries(ASSETS).map(([name, asset]) => [name, asset.value])),
+            javascriptTrackers: [`<script src="${TRACKERS.js}"></script>`],
+            impressionTrackers: [TRACKERS.imp],
+            clickTrackers: [TRACKERS.click],
+        },
+        'ortb response': {
+            ortb: {
+                ver: '1.2',
+                link: {
+                    url: ASSETS.clickUrl.value,
+                    clicktrackers: [
+                        TRACKERS.click
+                    ],
+                },
+                jstracker: `<script src="${TRACKERS.js}"></script>`,
+                eventtrackers: [
+                    {
+                        url: TRACKERS.imp,
+                        event: 1,
+                        method: 1
+                    }
+                ],
+                assets: [
+                    {
+                        id: 0,
+                        img: {
+                            url: ASSETS.image.value,
+                        }
+                    },
+                    {
+                        id: 1,
+                        title: {
+                            text: ASSETS.title.value
+                        }
+                    },
+                    {
+                        id: 2,
+                        data: {
+                            value: ASSETS.body.value
+                        }
+                    }
+                ]
+            }
+        }
+    }).forEach(([t, native]) => {
+        test.describe(t, () => {
+            Object.entries({
+                'native proper': false,
+                'native in banner': true
+            }).forEach(([t, isBanner]) => {
+                test.describe(t, () => {
+                    Object.entries({
+                        'template in creative': {
+                            isTemplateInCreative: true,
+                        },
+                        'adTemplate': {
+                            adTemplate: TEMPLATE
+                        },
+                        'custom renderer': {
+                            rendererUrl: RENDERER_URL
+                        }
+                    }).forEach(([t, {isTemplateInCreative, adTemplate, rendererUrl}]) => {
+                        test.describe(t, () => {
+                            Object.entries({
+                                'safeframe': true,
+                                'non safeframe': false,
+                            }).forEach(([t, isSafeFrame]) => {
+                                if (!isSafeFrame && !isBanner) return; // there's no option to run GAM native ads without safeframe
+
+                                test.describe(t, () => {
+                                    test.beforeEach(async ({page}) => {
+                                        await page.goto(`native_legacy.html?creative=${getCreative(isBanner, isTemplateInCreative, isSafeFrame)}&banner=${isBanner}&bidResponse=${encodeURIComponent(JSON.stringify(bidResponse({...native, adTemplate, rendererUrl})))}`);
+                                    });
+
+                                    test('should display ad', async ({crossLocator}) => {
+                                        await expect(await crossLocator('#the-ad')).toBeVisible();
+                                    });
+
+                                    test('should fill in assets', async ({crossLocator}) => {
+                                        await Promise.all(Object.entries(ASSETS).map(async ([name, a]) => await a.expect(expect(await crossLocator(`#the-ad .${name}`)))))
+                                    });
+
+                                    // TODO: should this emit AD_RENDER_SUCCEEDED? see https://github.com/prebid/prebid-universal-creative/issues/182
+                                    ['bidWon'].forEach(ev => {
+                                        test(`should emit '${ev}'`, async ({expectEvent}) => {
+                                            await expectEvent(event => event.eventType === ev && event.args.adId === 'mock-ad')
+                                        })
+                                    });
+
+                                    ['js', 'imp'].forEach(ttype => {
+                                        test(`should fire ${ttype} trackers`, async () => {
+                                            await expect.poll(() => trackersFired[ttype]).toBeTruthy();
+                                        })
+                                    })
+
+                                    test('should fire click trackers', async ({crossLocator, browserName}, testInfo) => {
+                                        if (browserName === 'webkit' && testInfo.project.use.headless !== false) {
+                                            // webkit does not like this test. It passes locally in headed mode:
+                                            //  $ npx run playwright test --headed --workers 1 --project webkit -g "should fire click trackers"
+                                            // but I am unable to get headed tests to work on the pipeline
+                                            // (e.g. https://app.circleci.com/pipelines/github/prebid/prebid-universal-creative/309/workflows/b9bafe18-e2b3-4081-a2f0-e74b33575b56/jobs/573)
+                                            return;
+                                        }
+                                        const el = await crossLocator('#the-ad .pb-click');
+                                        await el.click();
+                                        await expect.poll(() => trackersFired.click).toBeTruthy();
+                                    });
+                                });
+                            });
+                        });
+                    });
+                });
+            });
+        });
+    });
+});

package/karma.conf.maker.js

@@ -3,7 +3,7 @@ const webpackConf = require('./webpack.conf');
 const karmaConstants = require('karma').constants;
 const path = require('path');
 
-function setBrowsers(karmaConf, browserstack, watchMode) {
+function setBrowsers(karmaConf, browserstack) {
   if (browserstack) {
     karmaConf.browserStack = {
       username: process.env.BROWSERSTACK_USERNAME,
@@ -12,8 +12,6 @@ function setBrowsers(karmaConf, browserstack, watchMode) {
     }
     karmaConf.customLaunchers = require('./browsers.json')
     karmaConf.browsers = Object.keys(karmaConf.customLaunchers);
-  } else if (watchMode) {
-    karmaConf.browsers = ['Chrome'];
   }
 }
 
@@ -29,7 +27,7 @@ function setReporters(karmaConf, codeCoverage, browserstack) {
       suppressPassed: true
     };
   }
-  
+
   if (codeCoverage) {
     karmaConf.reporters.push('coverage-istanbul');
     karmaConf.coverageIstanbulReporter = {
@@ -41,7 +39,7 @@ function setReporters(karmaConf, codeCoverage, browserstack) {
           urlFriendlyName: true, // simply replaces spaces with _ for files/dirs
         }
       }
-    }  
+    }
   }
 }
 
@@ -149,6 +147,6 @@ module.exports = function(codeCoverage, browserstack, watchMode) {
     captureTimeout: 4 * 60 * 1000, // default 60000
   }
   setReporters(config, codeCoverage, browserstack);
-  setBrowsers(config, browserstack, watchMode);
+  setBrowsers(config, browserstack);
   return config;
 }

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "prebid-universal-creative",
-    "version": "1.15.0",
+    "version": "1.17.0",
     "description": "Universal creative for Prebid apps",
     "main": "dist/creative.js",
     "scripts": {
-        "test": "echo test",
+        "test": "gulp test",
         "prepublish": "gulp build"
     },
     "repository": {
@@ -26,13 +26,7 @@
         "@babel/plugin-transform-modules-commonjs": "^7.6.0",
         "@babel/preset-env": "^7.2.3",
         "@babel/register": "^7.6.2",
-        "@wdio/browserstack-service": "^7.25.4",
-        "@wdio/cli": "^7.25.4",
-        "@wdio/concise-reporter": "^7.25.4",
-        "@wdio/local-runner": "^7.25.4",
-        "@wdio/mocha-framework": "^7.25.4",
-        "@wdio/spec-reporter": "^7.25.4",
-        "@wdio/sync": "^7.25.4",
+        "@playwright/test": "^1.50.1",
         "babel-loader": "^8.0.5",
         "babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
         "babel-plugin-transform-es3-property-literals": "^6.22.0",
@@ -41,7 +35,7 @@
         "core-js-pure": "^3.13.0",
         "del": "^5.0.0",
         "execa": "^1.0.0",
-        "gulp": "^4.0.2",
+        "gulp": "^5.0.0",
         "gulp-clean": "^0.4.0",
         "gulp-connect": "^5.7.0",
         "gulp-eslint": "^4.0.2",
@@ -58,25 +52,25 @@
         "karma-chrome-launcher": "^2.2.0",
         "karma-coverage": "^1.1.2",
         "karma-coverage-istanbul-reporter": "^1.4.3",
-        "karma-mocha": "^1.3.0",
+        "karma-mocha": "^2.0.1",
         "karma-mocha-reporter": "^2.2.5",
         "karma-sinon": "^1.0.5",
         "karma-sourcemap-loader": "^0.3.7",
         "karma-spec-reporter": "^0.0.31",
         "karma-webpack": "^3.0.5",
         "lodash": "^4.17.14",
-        "mocha": "^5.2.0",
+        "mocha": "^10.2.0",
         "opn": "^6.0.0",
         "sinon": "^6.3.4",
         "string-replace-webpack-plugin": "^0.1.3",
-        "webdriverio": "^7.25.2",
+        "webdriverio": "^9.10.0",
         "webpack": "^3.12.0",
+        "webpack-common-shake": "^1.0.0",
         "webpack-stream": "^4.0.0",
-        "yargs": "^11.0.0",
-        "webpack-common-shake": "^1.0.0"
+        "yargs": "^11.0.0"
     },
     "dependencies": {
         "babel-plugin-transform-object-assign": "^6.22.0",
-        "postscribe": "^2.0.8"
+        "gulp-cli": "^3.0.0"
     }
 }

package/playwright.config.js

@@ -0,0 +1,108 @@
+// @ts-check
+const { devices } = require('@playwright/test');
+const {BASE_URL} = require('./integ-test/fixtures/test.js');
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+
+/**
+ * @see https://playwright.dev/docs/test-configuration
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  testDir: './integ-test/spec',
+  testMatch: /.*.js/,
+  /* Maximum time one test can run for. */
+  timeout: 30 * 1000,
+  expect: {
+    /**
+     * Maximum time expect() should wait for the condition to be met.
+     * For example in `await expect(locator).toHaveText();`
+     */
+    timeout: 15000
+  },
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 3 : 0,
+  workers: process.env.CI ? 10 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
+    actionTimeout: 0,
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: BASE_URL,
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'firefox',
+      use: {
+        ...devices['Desktop Firefox'],
+      },
+    },
+    {
+      name: 'chromium',
+      use: {
+        ...devices['Desktop Chrome'],
+      },
+    },
+
+    {
+      name: 'webkit',
+      use: {
+        ...devices['Desktop Safari'],
+      },
+    },
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: {
+    //     ...devices['Pixel 5'],
+    //   },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: {
+    //     ...devices['iPhone 12'],
+    //   },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: {
+    //     channel: 'msedge',
+    //   },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: {
+    //     channel: 'chrome',
+    //   },
+    // },
+  ],
+
+  /* Folder for test artifacts such as screenshots, videos, traces, etc. */
+  // outputDir: 'test-results/',
+
+  /* Run your local dev server before starting the tests */
+  // webServer: {
+  //   command: 'npm run start',
+  //   port: 3000,
+  // },
+};
+
+module.exports = config;

package/src/adHtmlRender.js

@@ -0,0 +1,11 @@
+export function writeAdHtml(markup, insertHTML = document.body.insertAdjacentHTML.bind(document.body)) {
+    // remove <?xml> and <!doctype> tags
+    // https://github.com/prebid/prebid-universal-creative/issues/134
+    markup = markup.replace(/\<(\?xml|(\!DOCTYPE[^\>\[]+(\[[^\]]+)?))+[^>]+\>/gi, '');
+
+    try {
+        insertHTML('beforeend', markup);
+    } catch (error) {
+        console.error(error);
+    }
+}

package/src/cookieSync.js

@@ -20,6 +20,8 @@ const BIDDER_ARGS = sanitizeBidders(parseQueryParam('bidders', window.location.s
 const IS_AMP = sanitizeSource(parseQueryParam('source', window.location.search));
 const maxSyncCountParam = parseQueryParam('max_sync_count', window.location.search);
 const MAX_SYNC_COUNT = sanitizeSyncCount(parseInt((maxSyncCountParam) ? maxSyncCountParam : 10, 10));
+const coopSyncParam = parseQueryParam('coop_sync', window.location.search);
+const COOP_SYNC = !coopSyncParam || coopSyncParam === 'true' || !!parseInt(coopSyncParam);
 const GDPR = sanitizeGdpr(parseInt(parseQueryParam('gdpr', window.location.search), 10));
 const GDPR_CONSENT = sanitizeGdprConsent(parseQueryParam('gdpr_consent', window.location.search));
 
@@ -254,6 +256,7 @@ function sanitizeBidders(value) {
 function getStringifiedData(endPointArgs) {
   var data = (endPointArgs && typeof endPointArgs === 'object') ? endPointArgs : {}
   data['limit'] = MAX_SYNC_COUNT;
+  data['coopSync'] = COOP_SYNC;
 
   if(GDPR) data.gdpr = GDPR;
   if(GDPR_CONSENT) data.gdpr_consent = GDPR_CONSENT;

package/src/cookieSyncWithConsent.js

@@ -20,6 +20,8 @@ const IS_AMP = sanitizeSource(parseQueryParam('source', window.location.search))
 const BIDDER_ARGS = sanitizeBidders(parseQueryParam('bidders', window.location.search));
 const maxSyncCountParam = parseQueryParam('max_sync_count', window.location.search);
 const MAX_SYNC_COUNT = sanitizeSyncCount(parseInt((maxSyncCountParam) ? maxSyncCountParam : 10, 10));
+const coopSyncParam = parseQueryParam('coop_sync', window.location.search);
+const COOP_SYNC = !coopSyncParam || coopSyncParam === 'true' || !!parseInt(coopSyncParam);
 const TIMEOUT = sanitizeTimeout(parseInt(parseQueryParam('timeout', window.location.search), 10));
 const DEFAULT_GDPR_SCOPE = sanitizeScope(parseInt(parseQueryParam('defaultGdprScope', window.location.search), 10));
 
@@ -273,6 +275,7 @@ function attachConsent(data) {
 function getStringifiedData(endPointArgs) {
     var data = (endPointArgs && typeof endPointArgs === 'object') ? endPointArgs : {}
     data['limit'] = MAX_SYNC_COUNT;
+    data['coopSync'] = COOP_SYNC;
 
     if(IS_AMP) data.filterSettings = {
         iframe: {

package/src/domHelper.js

@@ -3,25 +3,35 @@
  */
 
 
+
+/**
+ * returns a empty iframe element with specified attributes.
+ */
+export function makeIframe(doc, attrs = {}) {
+    const frame = doc.createElement('iframe');
+    Object.entries(Object.assign({
+        frameborder: 0,
+        scrolling: 'no',
+        marginheight: 0,
+        marginwidth: 0,
+        TOPMARGIN: 0,
+        LEFTMARGIN: 0,
+        allowtransparency: 'true'
+    }, attrs)).forEach(([attr, value]) => {
+        frame.setAttribute(attr, value);
+    });
+    return frame;
+}
+
 /**
  * returns a empty iframe element with specified height/width
- * @param {Number} height height iframe set to 
+ * @param {Number} height height iframe set to
  * @param {Number} width width iframe set to
- * @returns {Element} iframe DOM element 
+ * @returns {Element} iframe DOM element
  */
 export function getEmptyIframe(height, width) {
-    let frame = document.createElement('iframe');
-    frame.setAttribute('frameborder', 0);
-    frame.setAttribute('scrolling', 'no');
-    frame.setAttribute('marginheight', 0);
-    frame.setAttribute('marginwidth', 0);
-    frame.setAttribute('TOPMARGIN', 0);
-    frame.setAttribute('LEFTMARGIN', 0);
-    frame.setAttribute('allowtransparency', 'true');
-    frame.setAttribute('width', width);
-    frame.setAttribute('height', height);
-    return frame;
-  }
+    return makeIframe(document, {height, width})
+}
 
   /**
  * Insert element to passed target
@@ -44,4 +54,4 @@ export function insertElement(elm, doc, target) {
         elToAppend.insertBefore(elm, elToAppend.firstChild);
       }
     } catch (e) {}
-  }
+  }

package/src/dynamicRenderer.js

@@ -0,0 +1,56 @@
+import {makeIframe} from './domHelper.js';
+import {renderEventMessage} from './messaging.js';
+
+export const MIN_RENDERER_VERSION = 3;
+
+export function hasDynamicRenderer(message) {
+    return typeof message.renderer === 'string' && parseInt(message.rendererVersion, 10) >= MIN_RENDERER_VERSION
+}
+
+export function runDynamicRenderer(adId, data, sendMessage, win = window, mkFrame = makeIframe) {
+    const renderer = mkFrame(win.document, {
+        width: 0,
+        height: 0,
+        style: 'display: none',
+        srcdoc: `<script>${data.renderer}</script>`,
+        name: '__pb_renderer__'
+    });
+
+    return new Promise((resolve, reject) => {
+        function onError(e = {}) {
+            sendMessage(renderEventMessage(adId, {
+                reason: e.reason || 'exception',
+                message: e.message
+            }));
+            e.stack && console.error(e);
+            reject(e);
+        }
+
+        function guard(fn) {
+            return function () {
+                try {
+                    return fn.apply(this, arguments);
+                } catch (e) {
+                    onError(e);
+                }
+            };
+        }
+
+        renderer.onload = guard(function () {
+            const W = renderer.contentWindow;
+            // NOTE: on Firefox, `Promise.resolve(P)` or `new Promise((resolve) => resolve(P))`
+            // does not appear to work if P comes from another frame
+            W.Promise.resolve(W.render(data, {
+                mkFrame,
+                sendMessage: (type, payload, onResponse) => sendMessage(
+                    Object.assign({adId, message: type}, payload),
+                    onResponse ? guard(onResponse) : undefined
+                )
+            }, win)).then(
+                () => sendMessage(renderEventMessage(adId)),
+                onError
+            ).then(resolve);
+        });
+        win.document.body.appendChild(renderer);
+    });
+}

package/src/messaging.js

@@ -1,4 +1,7 @@
 import {parseUrl} from './utils.js';
+export const PREBID_EVENT = 'Prebid Event';
+export const AD_RENDER_SUCCEEDED = 'adRenderSucceeded';
+export const AD_RENDER_FAILED = 'adRenderFailed';
 
 export function prebidMessenger(publisherURL, win = window) {
     const prebidDomain = (() => {
@@ -9,6 +12,16 @@ export function prebidMessenger(publisherURL, win = window) {
         return parsedUrl.protocol + '://' + parsedUrl.host;
     })();
 
+    function isPrebidWindow(win) {
+        return win && win.frames && win.frames.__pb_locator__;
+    }
+
+    let target = win.parent;
+    try {
+        while (target != null && target !== win.top && !isPrebidWindow(target)) target = target.parent;
+        if (!isPrebidWindow(target)) target = win.parent;
+    } catch (e) {}
+
     return function sendMessage(message, onResponse) {
         if (prebidDomain == null) {
             throw new Error('Missing pubUrl')
@@ -16,13 +29,13 @@ export function prebidMessenger(publisherURL, win = window) {
         message = JSON.stringify(message);
         let messagePort;
         if (onResponse == null) {
-            win.parent.postMessage(message, prebidDomain);
+            target.postMessage(message, prebidDomain);
         } else {
             const channel = new MessageChannel();
             messagePort = channel.port1;
             messagePort.onmessage = onResponse;
             win.addEventListener('message', windowListener);
-            win.parent.postMessage(message, prebidDomain, [channel.port2]);
+            target.postMessage(message, prebidDomain, [channel.port2]);
         }
 
         return function stopListening() {
@@ -41,3 +54,11 @@ export function prebidMessenger(publisherURL, win = window) {
 
     }
 }
+
+export function renderEventMessage(adId, errorInfo) {
+    return Object.assign({
+        adId,
+        message: PREBID_EVENT,
+        event: errorInfo ? AD_RENDER_FAILED : AD_RENDER_SUCCEEDED,
+    }, errorInfo ? {info: errorInfo} : null)
+}