I am encountering loading errors with Cesium in our React frontend when applying Content Security Policy (CSP) rules via Webpack. Notably, when the CSP is inactive, Cesium visualizations function smoothly.
CSP Configuration:
I’ve implemented the following relaxed CSP using CspHtmlWebpackPlugin:
new CspHtmlWebpackPlugin({
'default-src': "'self'",
'script-src': ["'self'", "'unsafe-eval'", "*.virtualearth.net"],
'worker-src': ["'self'", "blob:"],
'object-src': "'none'",
'style-src': ["'self'", "'unsafe-inline'"],
'connect-src': [
"'self'",
"https://nominatim.openstreetmap.org",
"https://example.com",
"*.virtualearth.net",
"https://login.microsoftonline.com",
"*.cesium.com",
"http://localhost:8084"
],
'img-src': ["'self'", "data:", "*.virtualearth.net"]
}, {
enabled: true,
nonceEnabled: {
'style-src': false,
'script-src': false,
}
}),
Alternatively, I tried a more relaxed configuration:
new CspHtmlWebpackPlugin({
'default-src': ["*", "blob:", "data:", "'unsafe-eval'", "*.virtualearth.net", "*.cesium.com"],
'base-uri': "'self'",
'script-src': ["*", "blob:", "data:", "'unsafe-eval'", "'unsafe-inline'", "*.virtualearth.net", "*.cesium.com", "webpack:"],
'worker-src': ["*", "blob:", "data:", "'unsafe-eval'", "'unsafe-inline'", "*.virtualearth.net", "*.cesium.com"],
'media-src': ["*", "blob:", "data:", "*.virtualearth.net", "*.cesium.com"],
'object-src': ["'unsafe-eval'", "*.virtualearth.net"],
'style-src': ["*", "'unsafe-inline'", "'unsafe-eval'"],
'connect-src': [
"*",
"data:",
"blob:",
"webpack:",
"https://nominatim.openstreetmap.org",
"https://example.com",
"*.virtualearth.net",
"https://login.microsoftonline.com",
"*.cesium.com",
"http://localhost:8084",
"http://localhost:9000"
],
'img-src': ["*", "data:", "blob:", "*.virtualearth.net", "*.cesium.com"],
'font-src': ["*", "blob:", "data:"],
'form-action': "https://login.microsoftonline.com"
}, {
enabled: true,
nonceEnabled: {
'style-src': false,
'script-src': false,
}
}),
Errors:
With both configurations, I receive the following errors in the console:
In both above cases, the following Cesium errors appeared:
[Cesium WebGL] Fragment shader compile log:
overrideMethod @ console.js:288
createAndLinkProgram @ ShaderProgram.js:247
reinitialize @ ShaderProgram.js:470
initialize @ ShaderProgram.js:463
push../node_modules/@cesium/engine/Source/Renderer/ShaderProgram.js.ShaderProgram._bind @ ShaderProgram.js:542
beginDraw @ Context.js:1291
push../node_modules/@cesium/engine/Source/Renderer/Context.js.Context.draw @ Context.js:1397
push../node_modules/@cesium/engine/Source/Renderer/DrawCommand.js.DrawCommand.execute @ DrawCommand.js:608
push../node_modules/@cesium/engine/Source/Scene/GlobeDepth.js.GlobeDepth.executeCopyColor @ GlobeDepth.js:341
push../node_modules/@cesium/engine/Source/Scene/Scene.js.Scene.resolveFramebuffers @ Scene.js:3533
render @ Scene.js:3727
tryAndCatchError @ Scene.js:3745
push../node_modules/@cesium/engine/Source/Scene/Scene.js.Scene.render @ Scene.js:3835
push../node_modules/@cesium/engine/Source/Widget/CesiumWidget.js.CesiumWidget.render @ CesiumWidget.js:802
render @ CesiumWidget.js:41
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
startRenderLoop @ CesiumWidget.js:68
set @ CesiumWidget.js:581
CesiumWidget @ CesiumWidget.js:371
Viewer @ Viewer.js:480
create @ resium.mjs:2909
(anonymous) @ resium.mjs:834
(anonymous) @ resium.mjs:869
commitHookEffectListMount @ react-dom.development.js:23189
commitLayoutEffectOnFiber @ react-dom.development.js:23307
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24713
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 49 more frames
Show less
12:26:59.997 console.js:288 [Cesium WebGL] Fragment shader source:
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
precision highp int;
#else
precision mediump float;
precision mediump int;
#define highp mediump
#endif
#define OES_texture_float_linear
#define OES_texture_float
#line 0
#line 0
uniform sampler2D colorTexture;
varying vec2 v_textureCoordinates;
void main()
{
gl_FragColor = texture2D(colorTexture, v_textureCoordinates);
}
overrideMethod @ console.js:288
createAndLinkProgram @ ShaderProgram.js:248
reinitialize @ ShaderProgram.js:470
initialize @ ShaderProgram.js:463
push../node_modules/@cesium/engine/Source/Renderer/ShaderProgram.js.ShaderProgram._bind @ ShaderProgram.js:542
beginDraw @ Context.js:1291
push../node_modules/@cesium/engine/Source/Renderer/Context.js.Context.draw @ Context.js:1397
push../node_modules/@cesium/engine/Source/Renderer/DrawCommand.js.DrawCommand.execute @ DrawCommand.js:608
push../node_modules/@cesium/engine/Source/Scene/GlobeDepth.js.GlobeDepth.executeCopyColor @ GlobeDepth.js:341
push../node_modules/@cesium/engine/Source/Scene/Scene.js.Scene.resolveFramebuffers @ Scene.js:3533
render @ Scene.js:3727
tryAndCatchError @ Scene.js:3745
push../node_modules/@cesium/engine/Source/Scene/Scene.js.Scene.render @ Scene.js:3835
push../node_modules/@cesium/engine/Source/Widget/CesiumWidget.js.CesiumWidget.render @ CesiumWidget.js:802
render @ CesiumWidget.js:41
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
render @ CesiumWidget.js:42
requestAnimationFrame
startRenderLoop @ CesiumWidget.js:68
set @ CesiumWidget.js:581
CesiumWidget @ CesiumWidget.js:371
Viewer @ Viewer.js:480
create @ resium.mjs:2909
(anonymous) @ resium.mjs:834
(anonymous) @ resium.mjs:869
commitHookEffectListMount @ react-dom.development.js:23189
commitLayoutEffectOnFiber @ react-dom.development.js:23307
commitLayoutMountEffects_complete @ react-dom.development.js:24727
commitLayoutEffects_begin @ react-dom.development.js:24713
commitLayoutEffects @ react-dom.development.js:24651
commitRootImpl @ react-dom.development.js:26862
commitRoot @ react-dom.development.js:26721
finishConcurrentRender @ react-dom.development.js:26020
performConcurrentWorkOnRoot @ react-dom.development.js:25848
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
Show 49 more frames
Show less
12:27:00.008 console.js:288 An error occurred while rendering. Rendering has stopped.
RuntimeError: Fragment shader failed to compile. Compile log:
Error
at new RuntimeError (http://localhost:9000/app/vendors.bundle.js:378363:11)
at createAndLinkProgram (http://localhost:9000/app/vendors.bundle.js:446813:9)
at reinitialize (http://localhost:9000/app/vendors.bundle.js:447017:19)
at initialize (http://localhost:9000/app/vendors.bundle.js:447010:3)
at push../node_modules/@cesium/engine/Source/Renderer/ShaderProgram.js.ShaderProgram._bind (http://localhost:9000/app/vendors.bundle.js:447089:3)
at beginDraw (http://localhost:9000/app/vendors.bundle.js:440391:17)
at push../node_modules/@cesium/engine/Source/Renderer/Context.js.Context.draw (http://localhost:9000/app/vendors.bundle.js:440497:3)
at push../node_modules/@cesium/engine/Source/Renderer/DrawCommand.js.DrawCommand.execute (http://localhost:9000/app/vendors.bundle.js:442716:11)
at push../node_modules/@cesium/engine/Source/Scene/GlobeDepth.js.GlobeDepth.executeCopyColor (http://localhost:9000/app/vendors.bundle.js:494533:28)
at push../node_modules/@cesium/engine/Source/Scene/Scene.js.Scene.resolveFramebuffers (http://localhost:9000/app/vendors.bundle.js:588300:16)
Dependencies:
We are using the following versions:
Cesium: 1.100.0
Resium: 1.16.1
CSP HTML Webpack Plugin: 5.1.0
Webpack: 5.75.0
React: 18.2.0
Environment:
Browser: Chrome Version 129.0.6668.71 (Official Build) (32-bit)
Operating System: Windows 10 Pro
Can anyone help me with what I’m doing wrong?
Thank you for your time.