Content Security Policy: Script Refusing to Load

Question

I am new to web-dev and I'm not sure why a particular script is refusing to load. I seem to be running into MIME type and Content Security Policy errors but my headers are set to allow these things.

The two errors I'm getting are:

The resource from “http://localhost:82/monitor/socket.io/socket.io.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

and

Content Security Policy: The page’s settings observed the loading of a resource at https://cesium.com/downloads/cesiumjs/releases/1.34/Build/Cesium/Cesium.js (“script-src”). A CSP report is being sent.

My header:

HTTP/1.1 304 Not Modified
Content-Security-Policy-Report-Only: default-src 'self';script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cesiumjs.com/ https://www.google-analytics.com/ https://maps.googleapis.com/ https://ajax.googleapis.com/;style-src 'self' 'unsafe-inline' https://ajax.googleapis.com/ https://cdn.rawgit.com/ https://cesiumjs.com/;font-src 'self' https://fonts.gstatic.com/;frame-src 'self' https://www.youtube.com/;connect-src 'self' https://api.github.com/ https://maps.googleapis.com/;img-src 'self' https: data:;object-src 'self';report-uri /api/csp/report
X-DNS-Prefetch-Control: off
Expect-CT: max-age=0
X-Frame-Options: SAMEORIGIN
Strict-Transport-Security: max-age=15552000; includeSubDomains
X-Download-Options: noopen
X-Permitted-Cross-Domain-Policies: none
Referrer-Policy: no-referrer
X-XSS-Protection: 0
ETag: W/"43b4-UhsjDo4JXWyBdeObJvhLjR6pV+k"
Date: Mon, 28 Jun 2021 19:01:41 GMT
Connection: keep-alive

The code that I'm using to generate the webserver uses helmet

myApp.use(
    helmet({
      contentSecurityPolicy: {
        directives: config.getDirectives(),
        reportOnly: true
      },
      noSniff: false,
    })
  );

config.getDirectives = function() {
  const self = "'self'";
  const unsafeInline = "'unsafe-inline'";
  const unsafeEval = "'unsafe-eval'";
  const scripts = [
    "https://cesiumjs.com/",
    "https://www.google-analytics.com/",
    "https://maps.googleapis.com/",
    "https://ajax.googleapis.com/"
  ];
  const styles = [
    "https://ajax.googleapis.com/",
    "https://cdn.rawgit.com/",
    "https://cesiumjs.com/"
  ];
  const fonts = [
    "https://fonts.gstatic.com/"
  ];
  const frames = [
    "https://www.youtube.com/",
  ];
  const images = [
    "https:",
    "data:"
  ];
  const connect = [
    "https://api.github.com/",
    "https://maps.googleapis.com/"
  ];

  return {
    defaultSrc: [self],
    scriptSrc: [self, unsafeInline, unsafeEval, ...scripts],
    styleSrc: [self, unsafeInline, ...styles],
    fontSrc: [self, ...fonts],
    frameSrc: [self, ...frames],
    connectSrc: [self, ...connect],
    imgSrc: [self, ...images],
    objectSrc: [self],

    // breaks pdf in chrome:
    // https://bugs.chromium.org/p/chromium/issues/detail?id=413851
    // sandbox: [`allow-forms`, `allow-scripts`, `allow-same-origin`],

    reportUri: `/api/csp/report`
  };
};

Answer 1

The resource from “http://localhost:82/monitor/socket.io/socket.io.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The http://localhost:82/monitor/socket.io/socket.io.js file is absent (or is not accessible) therefore server does response with page 404 Not found which have "text/html" MIME.

Try to open http://localhost:82/monitor/socket.io/socket.io.js directly in browser and check the server response.

Content Security Policy: The page’s settings observed the loading of a resource at https://**cesium.com**/downloads/cesiumjs/releases/1.34/Build/Cesium/Cesium.js (“script-src”). A CSP report is being sent.

Change cesiumjs.com to cesium.com in your helmet settings, because you actually load script from cesium.com. The cesiumjs.com is a wrong CDN.