From a680fb8b61a58060a8cd16592c57eed5e585eafe Mon Sep 17 00:00:00 2001 From: "denys.oblohin" Date: Tue, 22 Aug 2023 21:39:13 +0300 Subject: [PATCH] v3 wip . --- playground/mocks/config/templateHelper.js | 6 +++++- polyfill/index.js | 8 +++++++- src/plugins/OktaPluginSentry.ts | 2 +- src/plugins/sentry.md | 16 +++++++++++----- src/v3/webpack.common.config.ts | 13 ++++++++++++- src/v3/webpack.dev.config.ts | 23 ++++++++++++++++++++--- test/app/webpack.config.js | 8 ++++---- 7 files changed, 60 insertions(+), 16 deletions(-) diff --git a/playground/mocks/config/templateHelper.js b/playground/mocks/config/templateHelper.js index 4ebf731ce9..27cc92a4a7 100644 --- a/playground/mocks/config/templateHelper.js +++ b/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); } } diff --git a/polyfill/index.js b/polyfill/index.js index fdbd653f2a..b991d7841d 100644 --- a/polyfill/index.js +++ b/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'); diff --git a/src/plugins/OktaPluginSentry.ts b/src/plugins/OktaPluginSentry.ts index f06e5e4482..2a516c0e11 100644 --- a/src/plugins/OktaPluginSentry.ts +++ b/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(); diff --git a/src/plugins/sentry.md b/src/plugins/sentry.md index dd28cf8f19..5c48a6184a 100644 --- a/src/plugins/sentry.md +++ b/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. diff --git a/src/v3/webpack.common.config.ts b/src/v3/webpack.common.config.ts index e84919e0a8..2bf45e58ea 100644 --- a/src/v3/webpack.common.config.ts +++ b/src/v3/webpack.common.config.ts @@ -36,7 +36,7 @@ const baseConfig: Partial = { 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 = { '/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/', diff --git a/src/v3/webpack.dev.config.ts b/src/v3/webpack.dev.config.ts index a9e57aef88..3432564d06 100644 --- a/src/v3/webpack.dev.config.ts +++ b/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>( 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>( }), ], 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, diff --git a/test/app/webpack.config.js b/test/app/webpack.config.js index f7be78ffed..878bcb768e 100644 --- a/test/app/webpack.config.js +++ b/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};`;