内容安全策略：脚本拒绝加载

Question

我是 web-dev 的新手，我不确定为什么特定脚本拒绝加载。我似乎运行出现 MIME 类型和内容安全策略错误，但我的 header 设置为允许这些事情。

我遇到的两个错误是：

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).

和

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.

我的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

我用来生成网络服务器的代码使用了头盔

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

第一个错误：您正在设置“X-Content-Type-Options: nosniff”，这需要正确设置某些文件的内容类型，例如 css 和 js。在您的情况下 socket.io.js 是“text/html”，而它必须具有 javascript MIME 类型，例如“application/javascript”或 another permitted javascript MIME type.

您允许 https://cesiumjs.com in your script sources, but the page attempts to load scripts from https://cesium.com。这可能是由于重定向。尝试直接从 cesium.com 加载或在脚本源中包含 cesiumjs.com 和 cesium.com。

Answer 2

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).

http://localhost:82/monitor/socket.io/socket.io.js 文件不存在（或不可访问）因此服务器响应页面 404 Not found 其中有“text/html”MIME。

尝试在浏览器中直接打开 http://localhost:82/monitor/socket.io/socket.io.js 并检查服务器响应。

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.

在您的头盔设置中将 cesiumjs.com 更改为 cesium.com，因为您实际上是从 cesium.com 加载脚本。 cesiumjs.com 是错误的 CDN。

内容安全策略：脚本拒绝加载

Content Security Policy: Script Refusing to Load

node.js

express

mime-types

content-security-policy

helmet.js