Introduce iframe transport to amp-analytics - 3p side

3p/iframe-transport-client-lib.js

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import './polyfills';
+import {IframeTransportClient} from './iframe-transport-client.js';
+import {initLogConstructor, setReportError} from '../src/log';
+
+initLogConstructor();
+// TODO(alanorozco): Refactor src/error.reportError so it does not contain big
+// transitive dependencies and can be included here.
+setReportError(() => {});
+
+/**
+ *  If window.iframeTransportClient does not exist, we must instantiate and
+ *  assign it to window.iframeTransportClient, to provide the creative with
+ *  all the required functionality.
+ */
+try {
+  const iframeTransportClientCreated =
+      new Event('amp-iframeTransportClientCreated');
+  window.iframeTransportClient = new IframeTransportClient(window);
+  window.dispatchEvent(iframeTransportClientCreated);
+} catch (err) {
+  // do nothing with error
+}

3p/iframe-transport-client.js

@@ -0,0 +1,93 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {tryParseJson} from '../src/json';
+import {dev, user} from '../src/log';
+import {MessageType} from '../src/3p-frame-messaging';
+import {IframeMessagingClient} from './iframe-messaging-client';
+
+/** @private @const {string} */
+const TAG_ = 'iframe-transport-client';
+
+/**
+ * Receives event messages bound for this cross-domain iframe, from all
+ * creatives
+ */
+export class IframeTransportClient {
+
+  /** @param {!Window} win */
+  constructor(win) {
+    /** @private {!Window} */
+    this.win_ = win;
+
+    /** @private {?function(string,string)} */
+    this.listener_ = null;
+
+    /** @protected {!IframeMessagingClient} */
+    this.client_ = new IframeMessagingClient(win);
+    this.client_.setHostWindow(this.win_.parent);
+    this.client_.setSentinel(user().assertString(
+        tryParseJson(this.win_.name)['sentinel'],
+        'Invalid/missing sentinel on iframe name attribute' + this.win_.name));
+    this.client_.makeRequest(
+        MessageType.SEND_IFRAME_TRANSPORT_EVENTS,
+        MessageType.IFRAME_TRANSPORT_EVENTS,
+        eventData => {
+          const events =
+              /**
+               * @type
+               * {!Array<../src/3p-frame-messaging.IframeTransportEvent>}
+               */
+              (eventData['events']);
+          user().assert(events,
+              'Received malformed events list in ' + this.win_.location.href);
+          dev().assert(events.length,
+              'Received empty events list in ' + this.win_.location.href);
+          user().assert(this.listener_,
+              'Must call onAnalyticsEvent in ' + this.win_.location.href);
+          events.forEach(event => {
+            try {
+              this.listener_ &&
+                  this.listener_(event.message, event.transportId);
+            } catch (e) {
+              user().error(TAG_,
+                  'Exception in callback passed to onAnalyticsEvent: ' +
+                  e.message);
+            }
+          });
+        });
+  }
+
+  /**
+   * Registers a callback function to be called when an AMP analytics event
+   * is received.
+   * Note that calling this a second time will result in the first listener
+   * being removed - the events will not be sent to both callbacks.
+   * @param {function(string,string)} callback
+   */
+  onAnalyticsEvent(callback) {
+    this.listener_ = callback;
+  }
+
+  /**
+   * Gets the IframeMessagingClient
+   * @returns {!IframeMessagingClient}
+   * @VisibleForTesting
+   */
+  getClient() {
+    return this.client_;
+  }
+}

build-system/app.js

@@ -936,7 +936,7 @@ app.get(['/dist/sw.js', '/dist/sw-kill.js', '/dist/ww.js'],
       next();
     });
 
-app.get('/dist/ampanalytics-lib.js', (req, res, next) => {
+app.get('/dist/iframe-transport-client-lib.js', (req, res, next) => {
   req.url = req.url.replace(/dist/, 'dist.3p/current');
   next();
 });

build-system/config.js

@@ -96,6 +96,7 @@ module.exports = {
     '!{node_modules,build,dist,dist.tools,' +
         'dist.3p/[0-9]*,dist.3p/current-min}/**/*.*',
     '!dist.3p/current/**/ampcontext-lib.js',
+    '!dist.3p/current/**/iframe-transport-client-lib.js',
     '!validator/dist/**/*.*',
     '!validator/node_modules/**/*.*',
     '!validator/nodejs/node_modules/**/*.*',

build-system/tasks/presubmit-checks.js

@@ -282,6 +282,7 @@ var forbiddenTerms = {
     whitelist: [
       '3p/integration.js',
       '3p/ampcontext-lib.js',
+      '3p/iframe-transport-client-lib.js',
       'ads/alp/install-alp.js',
       'ads/inabox/inabox-host.js',
       'dist.3p/current/integration.js',

examples/analytics-iframe-transport-remote-frame.html

@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Requests Frame</title>
+    <script>
+      window.addEventListener('amp-iframeTransportClientCreated', () => {
+        /**
+         * To receive AMP analytics events in a third-party frame, you must
+         * pass a callback function to this method. The callback will be called
+         * when an event is received, and will be passed two parameters:
+         * @param {string} event A string of the format specified in the
+         * requests block of the amp-analytics JSON config
+         * @param {string} transportId An ID uniquely identifying which creative
+         * generated the event
+         */
+        window.iframeTransportClient.onAnalyticsEvent(
+            (event, transportId) => {
+              // Now, do something meaningful with the AMP Analytics event
+              console.log('The page at: ' + window.location.href +
+                  ' has received an event: ' + event +
+                  ' from the creative with transport ID: ' + transportId);
+            });
+      });
+
+      // Load the script specified in the iframe’s name attribute:
+      const url = JSON.parse(window.name).scriptSrc;
+      if (url && url.startsWith('https://3p.ampproject.net/')) {
+        script = document.createElement('script');
+        script.src = url;
+        document.head.appendChild(script);
+        // The script will be loaded, and will call onNewAmpAnalyticsInstance()
+      } else {
+        console.warn('Received invalid URL - risk of XSS! ' + url);
+      }
+    </script>
+  </head>
+  <!-- The frame will not be visible, so there is no need for a body tag. -->
+</html>

extensions/amp-analytics/0.1/amp-analytics.js

@@ -419,7 +419,7 @@ export class AmpAnalytics extends AMP.BaseElement {
       // TODO(zhouyx, #7096) Track overwrite percentage. Prevent transport overwriting
       if (inlineConfig['transport'] || this.remoteConfig_['transport']) {
         const TAG = this.getName_();
-        user().error(TAG, 'Inline or remote config should not' +
+        user().error(TAG, 'Inline or remote config should not ' +
             'overwrite vendor transport settings');
       }
     }

extensions/amp-analytics/0.1/iframe-transport-message-queue.js

@@ -15,9 +15,7 @@
  */
 
 import {dev} from '../../../src/log';
-import {
-  IFRAME_TRANSPORT_EVENTS_TYPE,
-} from '../../../src/iframe-transport-common';
+import {MessageType} from '../../../src/3p-frame-messaging';
 import {SubscriptionApi} from '../../../src/iframe-helper';
 
 /** @private @const {string} */
@@ -48,16 +46,13 @@ export class IframeTransportMessageQueue {
 
     /**
      * @private
-     * {!Array<!../../../src/iframe-transport-common.IframeTransportEvent>}
+     * {!Array<!../../../src/3p-frame-messaging.IframeTransportEvent>}
      */
     this.pendingEvents_ = [];
 
-    /** @private {string} */
-    this.messageType_ = IFRAME_TRANSPORT_EVENTS_TYPE;
-
     /** @private {!../../../src/iframe-helper.SubscriptionApi} */
     this.postMessageApi_ = new SubscriptionApi(this.frame_,
-        this.messageType_,
+        MessageType.SEND_IFRAME_TRANSPORT_EVENTS,
         true,
         () => {
           this.setIsReady();
@@ -94,7 +89,7 @@ export class IframeTransportMessageQueue {
 
   /**
    * Enqueues an event to be sent to a cross-domain iframe.
-   * @param {!../../../src/iframe-transport-common.IframeTransportEvent} event
+   * @param {!../../../src/3p-frame-messaging.IframeTransportEvent} event
    * Identifies the event and which Transport instance (essentially which
    * creative) is sending it.
    */
@@ -117,7 +112,7 @@ export class IframeTransportMessageQueue {
    */
   flushQueue_() {
     if (this.isReady() && this.queueSize()) {
-      this.postMessageApi_.send(IFRAME_TRANSPORT_EVENTS_TYPE,
+      this.postMessageApi_.send(MessageType.IFRAME_TRANSPORT_EVENTS,
           /** @type {!JsonObject} */
           ({events: this.pendingEvents_}));
       this.pendingEvents_ = [];

extensions/amp-analytics/0.1/iframe-transport.js

@@ -102,7 +102,8 @@ export class IframeTransport {
     const useLocal = getMode().localDev || getMode().test;
     const useRtvVersion = !useLocal;
     const scriptSrc = calculateEntryPointScriptUrl(
-        this.win_.parent.location, 'ampanalytics-lib', useLocal, useRtvVersion);
+        this.win_.parent.location, 'iframe-transport-client-lib',
+        useLocal, useRtvVersion);
     const frameName = JSON.stringify(/** @type {JsonObject} */ ({
       scriptSrc,
       sentinel,
@@ -182,7 +183,7 @@ export class IframeTransport {
     dev().assert(frameData.queue, 'Event queue is missing for ' + this.id_);
     frameData.queue.enqueue(
         /**
-         * @type {!../../../src/iframe-transport-common.IframeTransportEvent}
+         * @type {!../../../src/3p-frame-messaging.IframeTransportEvent}
          */
         ({transportId: this.id_, message: event}));
   }

extensions/amp-analytics/0.1/test/test-iframe-transport-client.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright 2017 The AMP HTML Authors. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS-IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {MessageType} from '../../../../src/3p-frame-messaging';
+import {
+  IframeTransportClient,
+} from '../../../../3p/iframe-transport-client';
+import {dev, user} from '../../../../src/log';
+import {adopt} from '../../../../src/runtime';
+import * as sinon from 'sinon';
+
+adopt(window);
+
+let nextId = 5000;
+function createUniqueId() {
+  return String(++(nextId));
+}
+
+describe('iframe-transport-client', () => {
+  let sandbox;
+  let badAssertsCounterStub;
+  let iframeTransportClient;
+  let sentinel;
+
+  beforeEach(() => {
+    sandbox = sinon.sandbox.create();
+    badAssertsCounterStub = sandbox.stub();
+    sentinel = createUniqueId();
+    window.name = '{"sentinel": "' + sentinel + '"}';
+    iframeTransportClient = new IframeTransportClient(window);
+    sandbox.stub(dev(), 'assert', (condition, msg) => {
+      if (!condition) {
+        badAssertsCounterStub(msg);
+      }
+    });
+    sandbox.stub(user(), 'assert', (condition, msg) => {
+      if (!condition) {
+        badAssertsCounterStub(msg);
+      }
+    });
+  });
+
+  afterEach(() => {
+    sandbox.restore();
+  });
+
+  /**
+   * Sends a message from the current window to itself
+   * @param {string} type Type of the message.
+   * @param {!JsonObject} object Message payload.
+   */
+  function send(type, data) {
+    const object = {};
+    object['type'] = type;
+    object['sentinel'] = sentinel;
+    if (data['events']) {
+      object['events'] = data['events'];
+    } else {
+      object['data'] = data;
+    }
+    const payload = 'amp-' + JSON.stringify(object);
+    window./*OK*/postMessage(payload, '*');
+  }
+
+  it('fails to create iframeTransportClient if no window.name ', () => {
+    const oldWindowName = window.name;
+    expect(() => {
+      window.name = '';
+      new IframeTransportClient(window);
+    }).to.throw(/Cannot read property 'sentinel' of undefined/);
+    window.name = oldWindowName;
+  });
+
+  it('sets sentinel from window.name.sentinel ', () => {
+    expect(iframeTransportClient.getClient().sentinel_).to.equal(sentinel);
+  });
+
+  it('receives an event message ', () => {
+    window.processAmpAnalyticsEvent = (event, transportId) => {
+      expect(transportId).to.equal('101');
+      expect(event).to.equal('hello, world!');
+    };
+    send(MessageType.IFRAME_TRANSPORT_EVENTS, /** @type {!JsonObject} */ ({
+      events: [
+        {transportId: '101', message: 'hello, world!'},
+      ]}));
+  });
+});