v3 wip

.

playground/mocks/config/templateHelper.js

@@ -1,3 +1,5 @@
+const signinWidgetOptions = require('../../../.widgetrc.js');
+
 const path = require('path');
 const responseConfig = require('./responseConfig');
 const supportedApi = [
@@ -75,7 +77,9 @@ const configMock = (option) => {
         // move cursor to next response only after mock has been generated.
         updateIndex();
 
-        return require(mockFile);
+        const json = require(mockFile);
+        const str = JSON.stringify(json).replace(/http\:\/\/localhost\:3000/g, signinWidgetOptions.baseUrl);
+        return JSON.parse(str);
       }
 
     }

polyfill/index.js

@@ -27,6 +27,12 @@ require('core-js/web/url');
 require('fast-text-encoding'); // TextEncoder
 require('webcrypto-shim'); // crypto.subtle
 
+// Gen3
+require('core-js/features/symbol');
+require('core-js/features/array/fill');
+require('create-html-document-polyfill');
+require('core-js/features/global-this'); // msw
+
 // Sentry
 require('proxy-polyfill');
 require('indexeddb-getall-shim');
@@ -35,6 +41,6 @@ require("dom4");
 // require('element-matches-polyfill');
 require('core-js/features/object/get-own-property-descriptor');
 require('core-js/features/string/repeat');
-require('core-js/features/number/is-nan');
+require('core-js/features/number');
 require('core-js/features/array/values');
 require('core-js/stable/map');

src/plugins/OktaPluginSentry.ts

@@ -199,7 +199,7 @@ const beforeBreadcrumb = (breadcrumb: Sentry.Breadcrumb, _hint?: Sentry.Breadcru
   if (allow) {
     console.log('>>> [sentry] breadcrumb: ', breadcrumb.type, breadcrumb.category, breadcrumb);
   } else {
-    console.log('sentry ignore', breadcrumb.type, breadcrumb.category, breadcrumb);
+    //console.log('sentry ignore', breadcrumb.type, breadcrumb.category, breadcrumb);
   }
   // if (breadcrumb.type === 'error' || breadcrumb.category !== 'custom') {
   //   incrErrorCount();

src/plugins/sentry.md

@@ -32,11 +32,9 @@ SENTRY_REPORT_URI=get at https://{SENTRY_ORG}.sentry.io/settings/projects/{SENTR
 SENTRY_KEY=value of `sentry_key` url param in SENTRY_REPORT_URI
 ```
 
-# Test app
+# Test app Gen2
 ```sh
 TARGET=CROSS_BROWSER yarn build:webpack-dev
-# cd test/app
-# DISABLE_CSP=1 TARGET=CROSS_BROWSER yarn start
 DISABLE_CSP=1 TARGET=CROSS_BROWSER yarn start:test:app
 ```
 
@@ -52,8 +50,16 @@ And open `https://xxx.ngrok-free.app` in Windows virtual machine.
 
 In test app click 'Use Sentry' (and 'Use polyfill' for IE 11)
 
-# Playground
-Not compatible with IE 11
+# Playground Gen3
+Sentry is used by default.  
+```sh
+OKTA_SIW_HOST=0.0.0.0 DISABLE_CSP=1 OMIT_MSWJS=1 TARGET=CROSS_BROWSER yarn workspace v3 dev
+```
+Change `baseUrl` in `.widgetrc.js` to `https://xxx.ngrok-free.app` for IE 11.
+
+# Issues
+- See [CSP](#csp)
+- IE 11: network responses in session replay have no bodies
 
 # CSP
 Sentry uses fork of `rrweb` for Session Replay.  

src/v3/webpack.common.config.ts

@@ -36,7 +36,7 @@ const baseConfig: Partial<Configuration> = {
   module: {
     rules: [
       {
-        test: /\.[jt]sx?$/,
+        test: /\.m?[jt]sx?$/,
         exclude(filePath) {
           const filePathContains = (f) => filePath.indexOf(f) >= 0;
           const npmRequiresTransform = [
@@ -46,6 +46,17 @@ const baseConfig: Partial<Configuration> = {
             '/node_modules/@mui',
             '/node_modules/@okta/okta-auth-js',
             '/node_modules/p-cancelable',
+            '/node_modules/@sentry',
+            '/node_modules/@sentry-internal',
+            '/node_modules/proxy-polyfill',
+            //msw
+            '/node_modules/msw',
+            '/node_modules/@mswjs',
+            '/node_modules/@open-draft',
+            '/node_modules/headers-polyfill',
+            '/node_modules/outvariant',
+            '/node_modules/strict-event-emitter',
+            '/node_modules/graphql',
           ].some(filePathContains);
           const shallBeExcluded = [
             '/node_modules/',

src/v3/webpack.dev.config.ts

@@ -24,6 +24,9 @@ import type { Configuration } from 'webpack';
 // loads augmented Configuration type containing `devServer` type definition
 import 'webpack-dev-server';
 
+import ENV from '@okta/env';
+ENV.config();
+
 const DEV_SERVER_PORT = 3000;
 const MOCK_SERVER_PORT = 3030;
 
@@ -34,15 +37,22 @@ const ASSETS = resolve(__dirname, '../..', 'assets');
 
 const HOST = process.env.OKTA_SIW_HOST || 'localhost';
 const STATIC_DIRS = [PLAYGROUND, TARGET, ASSETS];
+const { SENTRY_PROJECT, SENTRY_KEY, SENTRY_REPORT_URI } = process.env;
 
 const headers = (() => {
   if (!process.env.DISABLE_CSP) {
     // Allow google domains for testing recaptcha
     const scriptSrc = `script-src http://${HOST}:${DEV_SERVER_PORT} https://www.google.com https://www.gstatic.com`;
-    const styleSrc = `style-src http://${HOST}:${DEV_SERVER_PORT} 'nonce-playground'`;
+
+    //todo: sentry's rrweb needs to be updated to fix the issue
+    //const styleSrc = `style-src http://${HOST}:${DEV_SERVER_PORT} 'nonce-playground'`;
+    const styleSrc = `style-src http://${HOST}:${DEV_SERVER_PORT} 'unsafe-inline'`;
+    const workerSrc = `worker-src 'self' blob:; child-src 'self' blob:`;
+    const reportUri = `report-uri https://sentry.io/api/${SENTRY_PROJECT}/security/?sentry_key=${SENTRY_KEY} ${SENTRY_REPORT_URI}`;
+    const csp = `${scriptSrc}; ${styleSrc}; ${workerSrc}; ${reportUri};`;
 
     return {
-      'Content-Security-Policy': `${scriptSrc}; ${styleSrc};`,
+      'Content-Security-Policy': csp,
     };
   }
   return;
@@ -68,7 +78,7 @@ const devConfig: Configuration = merge<Partial<Configuration>>(
       widget: {
         import: [
           // polyfill must appear first in entry point array
-          resolve(__dirname, '../..', './polyfill/modern.js'),
+          resolve(__dirname, '../..', './polyfill/index.js'),
           resolve(__dirname, 'src/index.ts'),
         ],
         filename: 'js/okta-sign-in.js',
@@ -99,6 +109,13 @@ const devConfig: Configuration = merge<Partial<Configuration>>(
       }),
     ],
     devServer: {
+      client: {
+        // Issue with IE 11:
+        // webpack adds iframe #webpack-dev-server-client-overlay
+        // rrweb from sentry tries to serialize its content
+        //  and calls `matches` method on `contentDocument` which does not exist (even after polyfilling)
+        overlay: process.env.TARGET !== 'CROSS_BROWSER',
+      },
       host: HOST,
       watchFiles: STATIC_DIRS,
       static: STATIC_DIRS,

test/app/webpack.config.js

@@ -18,11 +18,11 @@ const {
 const headers = {};
 
 // CSP settings
-const scriptSrc = `script-src http://localhost:${DEV_SERVER_PORT} https://global.oktacdn.com 'nonce-e2e'`;
+const scriptSrc = `script-src http://${HOST}:${DEV_SERVER_PORT} https://global.oktacdn.com 'nonce-e2e'`;
 //todo: sentry's rrweb needs to be updated to fix the issue
-//const styleSrc = `style-src http://localhost:${DEV_SERVER_PORT} https://unpkg.com 'nonce-e2e'`;
-const styleSrc = `style-src http://localhost:${DEV_SERVER_PORT} https://unpkg.com 'unsafe-inline'`;
-const styleSrcElem = `style-src-elem http://localhost:${DEV_SERVER_PORT} https://unpkg.com 'nonce-e2e'`;
+//const styleSrc = `style-src http://${HOST}:${DEV_SERVER_PORT} https://unpkg.com 'nonce-e2e'`;
+const styleSrc = `style-src http://${HOST}:${DEV_SERVER_PORT} https://unpkg.com 'unsafe-inline'`;
+const styleSrcElem = `style-src-elem http://${HOST}:${DEV_SERVER_PORT} https://unpkg.com 'nonce-e2e'`;
 const workerSrc = `worker-src 'self' blob:; child-src 'self' blob:`;
 const reportUri = `report-uri https://sentry.io/api/${SENTRY_PROJECT}/security/?sentry_key=${SENTRY_KEY} ${SENTRY_REPORT_URI}`;
 const csp = `${scriptSrc}; ${styleSrc}; ${styleSrcElem}; ${workerSrc}; ${reportUri};`;