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};`;