Skip to content

Commit

Permalink
GDB-10579: Fix resource loading error due to Content Security Policy …
Browse files Browse the repository at this point in the history
…directive (#1484)

What
Resolved an issue with resource loading that was caused by restrictive Content Security Policy (CSP) directives. The CSP settings were updated to dynamically allow necessary endpoints.

Why
The application encountered errors loading resources due to CSP restrictions, particularly with WebSocket connections and resources loaded micro front ends.

How
- Updated the Content-Security-Policy directive to dynamically include allowed endpoints for WebSocket connections and other necessary resources.
- Replaced external CDN resources by installing them via npm and copying them to the server.
  • Loading branch information
boyan-tonchev authored Jul 23, 2024
1 parent d715861 commit 1cdc543
Show file tree
Hide file tree
Showing 11 changed files with 267 additions and 109 deletions.
File renamed without changes.
63 changes: 0 additions & 63 deletions license-checker/license-checker-static.json

Large diffs are not rendered by default.

64 changes: 64 additions & 0 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 11 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,23 @@
"clean": "sh scripts/clean.sh",
"install": "sh scripts/install.sh",
"postinstall": "npm run build:api && npm run build:shared",
"prebuild": "npm run license-report-api && npm run license-report-root-config && npm run license-report-legacy-workbench && npm run license-report-shared-components && npm run license-report-workbench",
"build": "sh scripts/build.sh",
"postbuild": "webpack --config=webpack.config.prod.js && npm run license-report",
"postbuild": "webpack --env BUILD_MODE=production --config=webpack.config.prod.js",
"build-dev": "sh scripts/build.sh",
"postbuild-dev": "webpack --config=webpack.config.dev.js",
"postbuild-dev": "webpack --env BUILD_MODE=development --config=webpack.config.dev.js",
"build:modules": "concurrently \"npm run build:api\" \"npm run build:shared\"",
"build:api": "cd packages/api && npm run build",
"build:shared": "cd packages/shared-components && npm run build",
"start": "concurrently \"npm run start-workbench-api\" \"npm run start-workbench\" \"npm run start-root\"",
"start-workbench-api": "cd packages/api && npm run start",
"start-workbench": "cd packages/workbench && npm run start",
"start-root": "webpack serve --port 9000 --open --config=webpack.config.dev.js",
"license-report": "license-checker --production --json --customPath license-checker-format.json --out dist/license-checker.json --start ./ --start packages/shared-components --start packages/api --start packages/legacy-workbench --start packages/root-config --start packages/workbench"
"start-root": "webpack serve --port 9000 --open --env BUILD_MODE=development --config=webpack.config.dev.js",
"license-report-root-config": "license-checker --production --json --customPath license-checker/license-checker-format.json --start packages/root-config -out packages/root-config/dist/license-checker.json",
"license-report-api": "license-checker --production --json --customPath license-checker/license-checker-format.json --start packages/api --out packages/api/dist/license-checker.json",
"license-report-legacy-workbench": "license-checker --production --json --customPath license-checker/license-checker-format.json --start packages/legacy-workbench --out packages/legacy-workbench/dist/license-checker.json",
"license-report-shared-components": "license-checker --production --json --customPath license-checker/license-checker-format.json --start packages/shared-components --out packages/shared-components/dist/license-checker.json",
"license-report-workbench": "license-checker --production --json --customPath license-checker/license-checker-format.json --start packages/workbench --out packages/workbench/dist/license-checker.json"
},
"files": [],
"repository": {
Expand Down Expand Up @@ -46,10 +51,12 @@
"css-loader": "^7.1.2",
"css-minimizer-webpack-plugin": "^7.0.0",
"expose-loader": "^5.0.0",
"fs-extra": "^11.2.0",
"html-loader": "^0.5.5",
"ignore-loader": "^0.1.2",
"less-loader": "^12.2.0",
"license-checker": "^25.0.1",
"merge-jsons-webpack-plugin": "^2.0.1",
"mini-css-extract-plugin": "^2.9.0",
"string-replace-loader": "^3.1.0",
"style-loader": "^4.0.0",
Expand Down
29 changes: 26 additions & 3 deletions packages/root-config/package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion packages/root-config/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,10 @@
"@types/jest": "^27.0.1",
"@types/systemjs": "^6.1.1",
"font-awesome": "^4.7.0",
"import-map-overrides": "^3.1.1",
"regenerator-runtime": "^0.14.1",
"single-spa": "^5.9.3",
"single-spa-layout": "^1.6.0"
"single-spa-layout": "^1.6.0",
"systemjs": "^6.15.1"
}
}
69 changes: 41 additions & 28 deletions packages/root-config/src/index.ejs
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,49 @@
This is needed by babel to share largeish helper code for compiling async/await in older
browsers. More information at https://github.com/single-spa/create-single-spa/issues/112
-->
<script src="https://cdn.jsdelivr.net/npm/regenerator-runtime@0.13.7/runtime.min.js"></script>
<script src="/resources/runtime.js"></script>

<!--
This CSP allows any SSL-enabled host and for arbitrary eval(), but you should limit these directives further to increase your app's security.
Learn more about CSP policies at https://content-security-policy.com/#directive
-->
<meta http-equiv="Content-Security-Policy"
content="default-src 'self' https: localhost:*; script-src 'unsafe-inline' 'unsafe-eval' https: localhost:*; connect-src https: localhost:* ws://localhost:*; style-src 'unsafe-inline' https: http://localhost:9000; object-src 'none';">
content=" default-src 'self' <%= microFrontEndsUrls %>;
script-src 'self' 'unsafe-inline' 'unsafe-eval' <%= microFrontEndsUrls %>;
connect-src 'self' <%= microFrontEndsUrls %>;
style-src 'self' 'unsafe-inline' <%= microFrontEndsUrls %>;
img-src 'self' data: <%= microFrontEndsUrls %>;
font-src 'self' <%= microFrontEndsUrls %>;
base-uri 'self';">
<meta name="importmap-type" content="systemjs-importmap"/>

<link rel="preload" href="/single-spa.min.js" as="script">
<script src="plugin-registry.js?v=<%= buildVersion %>"></script>
<script src="plugins.js?v=<%= buildVersion %>"></script>
<script src="/resources/import-map-overrides.js"></script>

<% if (isDevelopmentMode) { %>
<script src="/resources/system.js"></script>
<script src="/resources/amd.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "/resources/single-spa.dev.js"
}
}
</script>
<% } else { %>
<script src="/resources/system.min.js"></script>
<script src="/resources/amd.min.js"></script>
<script type="systemjs-importmap">
{
"imports": {
"single-spa": "/resources/single-spa.min.js"
}
}
</script>
<% } %>

<!-- If you wish to turn off import-map-overrides for specific environments (prod), uncomment the line below -->
<!-- More info at https://github.com/joeldenning/import-map-overrides/blob/master/docs/configuration.md#domain-list -->
<!-- <meta name="import-map-overrides-domains" content="denylist:prod.example.com" /> -->
Expand All @@ -33,38 +67,17 @@
More information about shared dependencies can be found at https://single-spa.js.org/docs/recommended-setup#sharing-with-import-maps.
-->

<script type="systemjs-importmap">
{
"imports": {
"single-spa": "https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js",
"@ontotext/workbench-api": "http://localhost:9003/ontotext-workbench-api.js",
"@ontotext/root-config": "/<%= mainBundle %>",
"@ontotext/legacy-workbench": "/<%= legacyWorkbenchBundle %>",
"@ontotext/workbench": "http://localhost:9002/main.js"
"@ontotext/workbench-api": "http://localhost:9003/ontotext-workbench-api.js",
"@ontotext/root-config": "/<%= mainBundle %>",
"@ontotext/legacy-workbench": "/<%= legacyWorkbenchBundle %>",
"@ontotext/workbench": "http://localhost:9002/main.js"
}
}
</script>
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/lib/system/single-spa.min.js" as="script">
<script src="plugin-registry.js?v=<%= buildVersion %>"></script>
<script src="plugins.js?v=<%= buildVersion %>"></script>

<!-- Add your organization's prod import map URL to this script's src -->
<!-- <script type="systemjs-importmap" src="/importmap.json"></script> -->

<!--
If you need to support Angular applications, uncomment the script tag below to ensure only one instance of ZoneJS is loaded
Learn more about why at https://single-spa.js.org/docs/ecosystem-angular/#zonejs
-->
<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/zone.min.js"></script> -->

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/import-map-overrides.js"></script>
<% if (isLocal) { %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.js"></script>
<% } else { %>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/system.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/extras/amd.min.js"></script>
<% } %>

</head>
<body>
Expand Down
33 changes: 27 additions & 6 deletions webpack.config.common.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ const MergeIntoSingleFilePlugin = require('webpack-merge-and-include-globally');
const {merge} = require("webpack-merge");
const singleSpaDefaults = require("webpack-config-single-spa");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {MergeJsonPlugin} = require('./webpack/merge-json-plugin.js');
const path = require("path");

// The "string-replace-loader" replaces the version in all HTML and JS files except those copied by CopyPlugin.
Expand Down Expand Up @@ -56,12 +57,13 @@ module.exports = (webpackConfigEnv, argv) => {
template: "packages/root-config/src/index.ejs",
templateParameters: (compilation, assets, assetTags, options) => {
return {
isLocal: webpackConfigEnv && webpackConfigEnv.isLocal,
orgName,
mainBundle: Object.keys(compilation.assets).find(asset => asset.includes('main') && asset.endsWith('.js')),
legacyWorkbenchBundle: Object.keys(compilation.assets).find(asset => asset.includes('legacyWorkbench') && asset.endsWith('.js')),
contentHash: assets.contentHash,
buildVersion: PACKAGE.version
isDevelopmentMode: argv.env.BUILD_MODE === 'development',
orgName,
mainBundle: Object.keys(compilation.assets).find(asset => asset.includes('main') && asset.endsWith('.js')),
legacyWorkbenchBundle: Object.keys(compilation.assets).find(asset => asset.includes('legacyWorkbench') && asset.endsWith('.js')),
contentHash: assets.contentHash,
buildVersion: PACKAGE.version,
microFrontEndsUrls: 'http://localhost:9002 http://localhost:9003 ws://localhost:9003 ws://localhost:9002'
};
},
chunks: ['main'],
Expand All @@ -77,6 +79,16 @@ module.exports = (webpackConfigEnv, argv) => {
]
}
}),
new MergeJsonPlugin({
files: [
'packages/api/dist/license-checker.json',
'packages/legacy-workbench/dist/license-checker.json',
'packages/root-config/dist/license-checker.json',
'packages/shared-components/dist/license-checker.json',
'packages/workbench/dist/license-checker.json',
],
output: 'license-checker.json'
}),
new CopyPlugin({
patterns: [
{
Expand Down Expand Up @@ -223,6 +235,15 @@ module.exports = (webpackConfigEnv, argv) => {
{
from: 'license-checker/license-checker-static.json',
to: ''
},
{
from: 'packages/root-config/node_modules/regenerator-runtime/runtime.js',
to: 'resources'
}
,
{
from: 'packages/root-config/node_modules/import-map-overrides/dist/import-map-overrides.js',
to: 'resources'
}
]
})
Expand Down
Loading

0 comments on commit 1cdc543

Please sign in to comment.