moved inline script from index.html to index.js. enabled content security policy (#163)

Author: King Long Tse

test-e2e/devServer.ts

@@ -40,6 +40,12 @@ const port = config.local.devServerPort;
   }
 })();
 
+app.use(function(req, res, next) {
+  // add 'unsafe-eval' if you want to test scripts that calls eval()
+  res.setHeader("Content-Security-Policy", "script-src 'nonce-someNonce' 'unsafe-eval' 'strict-dynamic'");
+  return next();
+});
+
 // the tests loads tests from localhost:8000/analytics.js/v1/<write-key>/analytics.js
 app.use(
   '/analytics.js/v1/:writeKey/',

test-e2e/static/index.html

@@ -9,70 +9,37 @@
       <button>Load</button>
     </form>
     <p id='status-msg'></p>
-
-    <button id='track-product-viewed' onclick="analytics.track('Product Viewed')">
+    <button id ='unsafe-eval'>Unsafe eval</button>
+    <button id='track-product-viewed'>
       Track: Product Viewed
     </button>
-    <button id='track-checkout-started' onclick="analytics.track('Checkout Started')">
+    <button id='track-checkout-started'>
       Track: Checkout Started
     </button>
-    <button id='track-coupon-denied' onclick="analytics.track('Coupon Denied')">
+    <button id='track-coupon-denied'>
       Track: Coupon Denied
     </button>
     <br />
-    <button id='page-home' onclick="analytics.page('Home')">Page: Home</button>
-    <button id='page-about' onclick="analytics.page('About')">Page: About</button>
-    <button id='page-contact' onclick="analytics.page('Contact')">Page: Contact</button>
+    <button id='page-home'>Page: Home</button>
+    <button id='page-about'>Page: About</button>
+    <button id='page-contact'">Page: Contact</button>
     <br />
-    <button id='identify-fathy' onclick="analytics.identify('fathy')">Identify: fathy</button>
-    <button id='identify-spongebob' onclick="analytics.identify('spongebob', {'lastname':'squarepants'})">
+    <button id='identify-fathy'>Identify: fathy</button>
+    <button id='identify-spongebob'>
       Identify: spongebob
     </button>
-    <button
-      id='group'
-      onclick="analytics.group(
-        'group name',
-        {
-          'address': {
-            'city': 'Vancouver',
-            'country': 'Canada',
-            'postalCode': 'V6b3E2',
-            'state': 'BC',
-            'street': '21 Jump St'
-          },
-          'avatar': 'does not exist',
-          'description': 'a fake group',
-          'email': 'email-me-not@domain.com',
-          'employees': 3,
-          'id': 1,
-          'industry': 'sw eng',
-          'name': 'libweb',
-          'phone': '555-pizza',
-          'website': 'www.google.com',
-          'plan': 'business'
-        },
-        {
-          'integrations': {
-            'All': true
-          }
-        }, function() { console.log('group callback triggered')})"
-    >
+    <button id='group'>
       Group
     </button>
 
-    <button
-      id='alias'
-      onclick="analytics.alias('userId', 'previous id', {
-        'integrations': { 'All': true }
-      }, function(){ console.log('alias callback triggered')})"
-    >
+    <button id='alias'>
       Alias
     </button>
 
-    <button id='reset' onclick="analytics.reset()">Reset</button>
+    <button id='reset'>Reset</button>
     <br />
 
-    <script>
+    <script nonce="someNonce">
       const { searchParams } = new URL(document.location);
       const writeKey = searchParams.get("writeKey");
       const cdnHost = searchParams.get("cdnHost") || 'cdn.segment.com';
@@ -160,5 +127,6 @@
         status("ajs not loaded, enter a write key");
       }
     </script>
+    <script src='index.js' nonce="someNonce"></script>
   </body>
 </html>

test-e2e/static/index.js

@@ -0,0 +1,84 @@
+document
+  .getElementById('track-product-viewed')
+  .addEventListener('click', () => {
+    analytics.track('Product Viewed');
+  });
+document
+  .getElementById('track-checkout-started')
+  .addEventListener('click', () => {
+    analytics.track('Checkout Started');
+  });
+document.getElementById('track-coupon-denied').addEventListener('click', () => {
+  analytics.track('Coupon Denied');
+});
+
+document.getElementById('page-home').addEventListener('click', () => {
+  analytics.page('Home');
+});
+document.getElementById('page-about').addEventListener('click', () => {
+  analytics.page('About');
+});
+document.getElementById('page-contact').addEventListener('click', () => {
+  analytics.page('Contact');
+});
+
+document.getElementById('identify-fathy').addEventListener('click', () => {
+  analytics.identify('fathy');
+});
+document.getElementById('identify-spongebob').addEventListener('click', () => {
+  analytics.identify('spongebob', { lastname: 'squarepants' });
+});
+
+document.getElementById('group').addEventListener('click', () => {
+  analytics.group(
+    'group name',
+    {
+      address: {
+        city: 'Vancouver',
+        country: 'Canada',
+        postalCode: 'V6b3E2',
+        state: 'BC',
+        street: '21 Jump St'
+      },
+      avatar: 'does not exist',
+      description: 'a fake group',
+      email: 'email-me-not@domain.com',
+      employees: 3,
+      id: 1,
+      industry: 'sw eng',
+      name: 'libweb',
+      phone: '555-pizza',
+      website: 'www.google.com',
+      plan: 'business'
+    },
+    {
+      integrations: {
+        All: true
+      }
+    },
+    function() {
+      console.log('group callback triggered');
+    }
+  );
+});
+
+document.getElementById('alias').addEventListener('click', () => {
+  analytics.alias(
+    'userId',
+    'previous id',
+    {
+      integrations: { All: true }
+    },
+    function() {
+      console.log('alias callback triggered');
+    }
+  );
+});
+
+document.getElementById('reset').addEventListener('click', () => {
+  analytics.reset();
+});
+
+document.getElementById('unsafe-eval').addEventListener('click', () => {
+  eval('console.log(1234567)');
+});