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

问题描述

我是 web-dev 的新手，我不确定为什么某个特定的脚本拒绝加载。我似乎遇到了 MIME 类型和内容安全策略错误，但我的标头设置为允许这些错误。

我得到的两个错误是：

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.

我的标题：

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,...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`
  };
};

解决方法

来自“http://localhost:82/monitor/socket.io/socket.io.js”的资源由于 MIME 类型（“text/html”）不匹配（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，查看服务器响应。

内容安全策略：页面的设置观察到资源在 https://**cesium.com**/downloads/cesiumjs/releases/1.34/Build/Cesium/Cesium.js（“脚本源代码”）。正在发送 CSP 报告。

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

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

您在脚本源中允许 https://cesiumjs.com，但页面尝试从 https://cesium.com 加载脚本。这可能是由于重定向。尝试直接从 cesium.com 加载或在脚本源中包含 cesiumjs.com 和 cesium.com。

content-security-policy express express express helmet.js mime-types