Raphaël Bosi
ff6a0c6e69
## What Front components are third-party React components rendered on the host via remote-dom against an allow-list of elements. Today the host renderer throws on any element tag it has no component for (e.g. a raw tag produced by `innerHTML`), and there is no error boundary, so a single unknown element crashes the whole widget. This wraps the component registry with a fallback: - a raw tag that has an allow-listed `html-*` equivalent is routed to that safe wrapper (so a raw `iframe` renders through the existing sandbox-forcing renderer instead of being dropped), - tags with no safe renderer (`script`, `object`, `embed`, `link`, `meta`, `base`, `noscript`, `style`) render nothing, - any other unknown tag renders children only. `RemoteRootRenderer` is also wrapped in an error boundary that fails closed to the existing error panel, so a render error can no longer take down the host. ## Notes The host allow-list remains the single rendering gate. This is the first hardening step of a broader effort to widen the DOM/Web API surface available to front components; it is self-contained and does not change behavior for components that only use allow-listed elements. <!-- This is an auto-generated description by cubic. --> <a href="https://cubic.dev/pr/twentyhq/twenty/pull/22455?utm_source=github" target="_blank" rel="noopener noreferrer" data-no-image-dialog="true"><picture><source media="(prefers-color-scheme: dark)" srcset="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"><source media="(prefers-color-scheme: light)" srcset="https://www.cubic.dev/buttons/review-in-cubic-light.svg"><img alt="Review in cubic" src="https://www.cubic.dev/buttons/review-in-cubic-dark.svg"></picture></a> <!-- End of auto-generated description by cubic. -->
61 lines
1.5 KiB
JSON
61 lines
1.5 KiB
JSON
{
|
|
"name": "twenty-front-component-renderer",
|
|
"private": true,
|
|
"main": "dist/index.cjs",
|
|
"module": "dist/index.mjs",
|
|
"types": "dist/index.d.ts",
|
|
"files": [
|
|
"dist",
|
|
"package.json"
|
|
],
|
|
"scripts": {
|
|
"build": "npx rimraf dist && npx vite build"
|
|
},
|
|
"exports": {
|
|
".": {
|
|
"types": "./dist/index.d.ts",
|
|
"import": "./dist/index.mjs",
|
|
"require": "./dist/index.cjs"
|
|
}
|
|
},
|
|
"license": "AGPL-3.0",
|
|
"dependencies": {
|
|
"@quilted/threads": "^4.0.1",
|
|
"@remote-dom/core": "^1.10.1",
|
|
"@remote-dom/react": "^1.2.2",
|
|
"@sniptt/guards": "^0.2.0",
|
|
"react": "^19.2.0",
|
|
"react-dom": "^19.2.0",
|
|
"react-error-boundary": "^4.0.11",
|
|
"zod": "^4.1.11"
|
|
},
|
|
"devDependencies": {
|
|
"@chakra-ui/react": "^3.33.0",
|
|
"@emotion/react": "^11.14.0",
|
|
"@emotion/styled": "^11.14.0",
|
|
"@mui/material": "^7.3.8",
|
|
"@storybook/addon-vitest": "^10.4.6",
|
|
"@storybook/react-vite": "^10.4.6",
|
|
"@types/node": "^24.0.0",
|
|
"@types/react": "^19.2.0",
|
|
"@types/react-dom": "^19.2.0",
|
|
"@typescript/native-preview": "^7.0.0-dev.20260116.1",
|
|
"@vitest/browser-playwright": "^4.1.0",
|
|
"playwright": "^1.60.0",
|
|
"prettier": "^3.1.1",
|
|
"storybook": "^10.4.6",
|
|
"styled-components": "^6.1.0",
|
|
"ts-morph": "^25.0.0",
|
|
"tsc-alias": "^1.8.16",
|
|
"tsx": "^4.7.0",
|
|
"twenty-sdk": "workspace:*",
|
|
"twenty-shared": "workspace:*",
|
|
"twenty-ui": "workspace:*",
|
|
"vite-plugin-dts": "^4.5.4"
|
|
},
|
|
"engines": {
|
|
"node": "^24.5.0",
|
|
"yarn": "^4.0.2"
|
|
}
|
|
}
|