CesiumJS cannot be loaded when interacting with CSP

[sot-tsa]

What happened?

Cesium loading errors appear in our React frontend when CSP rules (already relaxed) are injected via Webpack. Note that without active CSP, Cesium visualization is operating smoothly.

Using following relaxed CSP:

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:/myserver.mydomain.net",
                  "*.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,
  }
}),

or using the more relaxed ones:

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://myserver.mydomain.net",
                  "*.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,
  }
}),

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)

Please note that we use both Cesium with Resium for our React application:

"cesium": "1.100.0",
"resium": "1.16.1",
"csp-html-webpack-plugin": "^5.1.0",
"webpack": "^5.75.0",
"react": "^18.2.0"

Reproduction steps

1. Apply the CSP rules in Webpack config.
2. npm start
3. After visiting the React site tab for Cesium, Cesium loading is interrupted with errors.

Sandcastle example

No response

Environment

Browser: Chrome Version 129.0.6668.71 (Official Build) (32-bit)
CesiumJS Version: 1.100.0
Resium Version: 1.16.1
Operating System: Windows 10 Pro, 22H2 (19045.4894)

[ggetz]

Thanks for the report @sot-tsa! I believe this is a similar issue to what is described in https://community.cesium.com/t/using-cesium-with-csp-settings/12663. Is that correct?