Skip to content

Commit

Permalink
fix: Strict CSP style config (#1034)
Browse files Browse the repository at this point in the history
Remove unsafe-inline from CSP style source

related: descope/etc#2098
  • Loading branch information
nirgur authored Mar 3, 2025
1 parent 0cd7ee3 commit 87b98e2
Show file tree
Hide file tree
Showing 19 changed files with 1,002 additions and 152 deletions.
2 changes: 1 addition & 1 deletion packages/libs/sdk-mixins/jest.config.cjs
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ module.exports = {
collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
coverageThreshold: {
global: {
branches: 12,
branches: 11,
functions: 16,
lines: 35,
statements: 35,
Expand Down
49 changes: 28 additions & 21 deletions packages/libs/sdk-mixins/src/mixins/debuggerMixin/debugger-wc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,8 +14,27 @@ const MIN_SIZE = 200;

const template = document.createElement('template');
template.innerHTML = `
<style>
.debugger {
<div style="top:${INITIAL_POS_THRESHOLD}px; left:${
window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD
}px;" class="debugger">
<div class="header">
<span>Debugger messages</span>
</div>
<div class="content">
<div class="empty-state">
No errors detected 👀
</div>
</div>
</div>
`;

const icon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.99984 13.167L8.99984 10.167L11.9998 13.167L13.1665 12.0003L10.1665 9.00033L13.1665 6.00033L11.9998 4.83366L8.99984 7.83366L5.99984 4.83366L4.83317 6.00033L7.83317 9.00033L4.83317 12.0003L5.99984 13.167ZM8.99984 17.3337C7.84706 17.3337 6.76373 17.1148 5.74984 16.677C4.73595 16.2398 3.854 15.6462 3.104 14.8962C2.354 14.1462 1.76039 13.2642 1.32317 12.2503C0.885393 11.2364 0.666504 10.1531 0.666504 9.00033C0.666504 7.84755 0.885393 6.76421 1.32317 5.75033C1.76039 4.73644 2.354 3.85449 3.104 3.10449C3.854 2.35449 4.73595 1.7606 5.74984 1.32283C6.76373 0.885603 7.84706 0.666992 8.99984 0.666992C10.1526 0.666992 11.2359 0.885603 12.2498 1.32283C13.2637 1.7606 14.1457 2.35449 14.8957 3.10449C15.6457 3.85449 16.2393 4.73644 16.6765 5.75033C17.1143 6.76421 17.3332 7.84755 17.3332 9.00033C17.3332 10.1531 17.1143 11.2364 16.6765 12.2503C16.2393 13.2642 15.6457 14.1462 14.8957 14.8962C14.1457 15.6462 13.2637 16.2398 12.2498 16.677C11.2359 17.1148 10.1526 17.3337 8.99984 17.3337ZM8.99984 15.667C10.8609 15.667 12.4373 15.0212 13.729 13.7295C15.0207 12.4378 15.6665 10.8614 15.6665 9.00033C15.6665 7.13921 15.0207 5.56283 13.729 4.27116C12.4373 2.97949 10.8609 2.33366 8.99984 2.33366C7.13873 2.33366 5.56234 2.97949 4.27067 4.27116C2.979 5.56283 2.33317 7.13921 2.33317 9.00033C2.33317 10.8614 2.979 12.4378 4.27067 13.7295C5.56234 15.0212 7.13873 15.667 8.99984 15.667Z" fill="#ED404A"/>
</svg>
`;

const style = `
.debugger {
width: ${INITIAL_WIDTH}px;
height: ${INITIAL_HEIGHT}px;
background-color: #FAFAFA;
Expand Down Expand Up @@ -117,25 +136,6 @@ template.innerHTML = `
margin: 5px;
flex-shrink:0;
}
</style>
<div style="top:${INITIAL_POS_THRESHOLD}px; left:${
window.innerWidth - INITIAL_WIDTH - INITIAL_POS_THRESHOLD
}px;" class="debugger">
<div class="header">
<span>Debugger messages</span>
</div>
<div class="content">
<div class="empty-state">
No errors detected 👀
</div>
</div>
</div>
`;

const icon = `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.99984 13.167L8.99984 10.167L11.9998 13.167L13.1665 12.0003L10.1665 9.00033L13.1665 6.00033L11.9998 4.83366L8.99984 7.83366L5.99984 4.83366L4.83317 6.00033L7.83317 9.00033L4.83317 12.0003L5.99984 13.167ZM8.99984 17.3337C7.84706 17.3337 6.76373 17.1148 5.74984 16.677C4.73595 16.2398 3.854 15.6462 3.104 14.8962C2.354 14.1462 1.76039 13.2642 1.32317 12.2503C0.885393 11.2364 0.666504 10.1531 0.666504 9.00033C0.666504 7.84755 0.885393 6.76421 1.32317 5.75033C1.76039 4.73644 2.354 3.85449 3.104 3.10449C3.854 2.35449 4.73595 1.7606 5.74984 1.32283C6.76373 0.885603 7.84706 0.666992 8.99984 0.666992C10.1526 0.666992 11.2359 0.885603 12.2498 1.32283C13.2637 1.7606 14.1457 2.35449 14.8957 3.10449C15.6457 3.85449 16.2393 4.73644 16.6765 5.75033C17.1143 6.76421 17.3332 7.84755 17.3332 9.00033C17.3332 10.1531 17.1143 11.2364 16.6765 12.2503C16.2393 13.2642 15.6457 14.1462 14.8957 14.8962C14.1457 15.6462 13.2637 16.2398 12.2498 16.677C11.2359 17.1148 10.1526 17.3337 8.99984 17.3337ZM8.99984 15.667C10.8609 15.667 12.4373 15.0212 13.729 13.7295C15.0207 12.4378 15.6665 10.8614 15.6665 9.00033C15.6665 7.13921 15.0207 5.56283 13.729 4.27116C12.4373 2.97949 10.8609 2.33366 8.99984 2.33366C7.13873 2.33366 5.56234 2.97949 4.27067 4.27116C2.979 5.56283 2.33317 7.13921 2.33317 9.00033C2.33317 10.8614 2.979 12.4378 4.27067 13.7295C5.56234 15.0212 7.13873 15.667 8.99984 15.667Z" fill="#ED404A"/>
</svg>
`;

type MessagesState = { messages: DebuggerMessage[] };
Expand All @@ -158,6 +158,13 @@ class Debugger extends HTMLElement {

this.attachShadow({ mode: 'open' });
this.shadowRoot?.appendChild(template.content.cloneNode(true));
const sheet = new CSSStyleSheet();
sheet.replaceSync(style);
this.shadowRoot.adoptedStyleSheets ??= [];
this.shadowRoot.adoptedStyleSheets = [
...this.shadowRoot.adoptedStyleSheets,
sheet,
];

this.#rootEle =
this.shadowRoot!.querySelector<HTMLDivElement>('.debugger')!;
Expand Down
19 changes: 13 additions & 6 deletions packages/libs/sdk-mixins/src/mixins/initElementMixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,20 +16,27 @@ export const initElementMixin = createSingletonMixin(
super(...rest);

this.attachShadow({ mode: 'open' }).innerHTML = `
<div id="${ROOT_ID}">
<div id="${CONTENT_ROOT_ID}"></div>
</div>
`;

<style>
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
#${ROOT_ID}, #${CONTENT_ROOT_ID} {
height: 100%;
}
#${ROOT_ID} {
position: relative;
height: fit-content;
}
</style>
<div id="${ROOT_ID}">
<div id="${CONTENT_ROOT_ID}"></div>
</div>
`;
`);

this.shadowRoot.adoptedStyleSheets ??= [];
this.shadowRoot.adoptedStyleSheets = [
...this.shadowRoot.adoptedStyleSheets,
sheet,
];

this.contentRootElement =
this.shadowRoot?.getElementById(CONTENT_ROOT_ID)!;
Expand Down
18 changes: 11 additions & 7 deletions packages/libs/sdk-mixins/src/mixins/themeMixin/themeMixin.ts
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const themeMixin = createSingletonMixin(
)(superclass);

return class ThemeMixinClass extends BaseClass {
#globalStyleTag: HTMLStyleElement;
#globalStyle: CSSStyleSheet;

get theme(): ThemeOptions {
const theme = this.getAttribute('theme') as ThemeOptions | null;
Expand Down Expand Up @@ -122,14 +122,18 @@ export const themeMixin = createSingletonMixin(
const theme = await this.#themeResource;
if (!theme) return;

if (!this.#globalStyleTag) {
this.#globalStyleTag = document.createElement('style');
this.#globalStyleTag.id = 'global-style';
this.shadowRoot!.appendChild(this.#globalStyleTag);
if (!this.#globalStyle) {
this.#globalStyle = new CSSStyleSheet();
this.shadowRoot.adoptedStyleSheets ??= [];
this.shadowRoot.adoptedStyleSheets = [
...this.shadowRoot.adoptedStyleSheets,
this.#globalStyle,
];
}

this.#globalStyleTag.innerText =
(theme?.light?.globals || '') + (theme?.dark?.globals || '');
this.#globalStyle.replaceSync(
(theme?.light?.globals || '') + (theme?.dark?.globals || ''),
);
}

async #loadComponentsStyle() {
Expand Down
2 changes: 2 additions & 0 deletions packages/sdks/vue-sdk/setupJest.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,5 @@ require('jest-fetch-mock').enableMocks();
window.console.warn = () => {
return '';
};
// eslint-disable-next-line no-undef
global.CSSStyleSheet.prototype.replaceSync = jest.fn();
77 changes: 77 additions & 0 deletions packages/sdks/web-component/e2e/descope-wc.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
import { expect } from '@playwright/test';
import { test } from './fixtures/cspFixture.js';

const configContent = {
flows: {
flow1: { version: 1 },
},
componentsVersion: '1.2.3',
};

test.describe('descope-wc', () => {
test.beforeEach(async ({ page }) => {
await page.route('*/**/config.json', async (route) =>
route.fulfill({ json: configContent }),
);

await page.route('*/**/theme.json', async (route) =>
route.fulfill({
json: {
light: {
globals: '',
components: {},
},
dark: {
globals: '',
components: {},
},
},
}),
);

await page.route('*/**/*.html', async (route) =>
route.fulfill({ body: `<div>123</div>` }),
);

await page.route(
new RegExp(
`.*\/@descope\/web-components-ui@${configContent.componentsVersion}/`,
),
async (route) => {
const filePath = route
.request()
.url()
.replace(new RegExp(`.*@${configContent.componentsVersion}`), '');
return route.fulfill({
path: require.resolve('@descope/web-components-ui' + filePath),
});
},
);

await page.route('**/start', async (route) =>
route.fulfill({
json: {
executionId: 'pass|#|2tlLFAOthDriBZIOVXahmLnYv8Q',
stepId: '4',
status: 'waiting',
action: '',
screen: {
id: 'pass/SC2sIjJonbfhE16bTzi1ZWZIlUCsu',
state: {
project: {
name: 'Nir-test',
},
},
},
stepName: 'Sign In',
},
}),
);

await page.goto('http://localhost:5565');
});

test('init', async ({ page }) => {
await expect(page.locator(`descope-wc`).first()).toBeVisible();
});
});
33 changes: 33 additions & 0 deletions packages/sdks/web-component/e2e/fixtures/cspFixture.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import * as pw from '@playwright/test';

const cspErrorPatterns = [/^Refused to/];
const cspIgnoreBrowsers = ['webkit'];

const isMessageMatchPatterns = (message, patterns) => {
return patterns.some((pattern) => pattern.test(message));
};

const getIsCspError = (message, browserName) =>
!cspIgnoreBrowsers.includes(browserName) &&
message.type() === 'error' &&
isMessageMatchPatterns(message.text(), cspErrorPatterns);

// we are overriding the default test runner to add a check for console errors
// if any console errors are detected, the test will fail
const test = pw.test.extend({
page: async ({ page, browserName }, use) => {
let isCspError = false;

page.on('console', (message) => {
if (getIsCspError(message, browserName)) {
isCspError = true;
}
});
await use(page);

if (isCspError)
throw new Error(`CSP errors detected. See console output for details.`);
},
});

export { test };
2 changes: 1 addition & 1 deletion packages/sdks/web-component/jest.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ module.exports = {
},
],
},

setupFilesAfterEnv: ['./jestSetup.js'],
preset: 'ts-jest',
testEnvironment: 'jsdom',
moduleDirectories: ['node_modules', 'src'],
Expand Down
1 change: 1 addition & 0 deletions packages/sdks/web-component/jestSetup.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
global.CSSStyleSheet.prototype.replaceSync = jest.fn();
11 changes: 8 additions & 3 deletions packages/sdks/web-component/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@
"scripts": {
"start": "npx nx run web-component:build && rollup -c rollup.config.app.serve.mjs -w",
"start-web-sample": "HTML_FILE=src/app-web-sample/index.html pnpm start",
"build-app": "rollup -c rollup.config.app.mjs",
"build:app": "rollup -c rollup.config.app.mjs",
"build": "rollup -c",
"test": "jest --silent",
"lint": "eslint '+(src|test)/**/*.ts'"
"lint": "eslint '+(src|test)/**/*.ts'",
"test:e2e": "DESCOPE_PROJECT_ID=pid npm run build:app && npx playwright test",
"test:e2e:ui": "npm run test:e2e -- --ui"
},
"license": "MIT",
"repository": {
Expand All @@ -28,6 +30,8 @@
"dist"
],
"devDependencies": {
"@descope/web-components-ui": "latest",
"@playwright/test": "1.47.0",
"@open-wc/rollup-plugin-html": "1.2.5",
"@rollup/plugin-commonjs": "^28.0.0",
"@rollup/plugin-node-resolve": "^15.0.0",
Expand Down Expand Up @@ -70,7 +74,8 @@
"string-to-arraybuffer": "^1.0.2",
"ts-jest": "^29.0.0",
"ts-node": "10.9.2",
"typescript": "^5.0.2"
"typescript": "^5.0.2",
"serve": "14.2.4"
},
"dependencies": {
"tslib": "2.8.1",
Expand Down
Loading

0 comments on commit 87b98e2

Please sign in to comment.