Node.js用Helmet加载第三方脚本遇CSP及CORP错误求安全方案

问题背景 #

在Node.js应用中使用Helmet中间件增强安全时，加载Highcharts第三方脚本触发CSP（内容安全策略）错误，调整配置后又出现COEP（跨源嵌入器策略）相关的加载失败问题，需保留Helmet并提供安全合规的解决方案。

前端代码（Pug） #

script(src='https://code.highcharts.com/stock/highstock.js')
script(src='https://code.highcharts.com/stock/modules/exporting.js')
script(src='https://code.highcharts.com/stock/modules/export-data.js')
script(src='https://code.highcharts.com/stock/modules/accessibility.js')

以上脚本已引入Pug文件的<head>标签中。

初始CSP错误 #

Refused to load the script 'https://code.highcharts.com/stock/highstock.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://code.highcharts.com/stock/modules/exporting.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://code.highcharts.com/stock/modules/export-data.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

127.0.0.1/:1 Refused to load the script 'https://code.highcharts.com/stock/modules/accessibility.js' because it violates the following Content Security Policy directive: "script-src 'self'". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

尝试的配置及新错误 #

尝试的app.js配置 #

app.use(helmet());

app.use(
  helmet.contentSecurityPolicy({
    useDefaults: true,
    directives: {
      imgSrc: ["'self'", "https: data:"],
      scriptSrc: [
        "'self'",
        "https://code.highcharts.com/stock/highstock.js",
        "https://code.highcharts.com/stock/modules/exporting.js",
        "https://code.highcharts.com/stock/modules/accessibility.js",
      ],
    },
  })
);

app.use(
  helmet.crossOriginResourcePolicy({
    policy: "cross-origin",
  })
);

// Allow-access-control-allow-origin *
app.use(cors());

实施后出现的COEP错误 #

127.0.0.1/:1 GET https://code.highcharts.com/stock/modules/exporting.js 
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

127.0.0.1/:1 GET https://code.highcharts.com/stock/modules/accessibility.js
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

127.0.0.1/:1 GET https://code.highcharts.com/stock/highstock.js
net::ERR_BLOCKED_BY_RESPONSE.NotSameOriginAfterDefaultedToSameOriginByCoep 200

头部错误提示 #

cross-origin-resource-policy To use this resource from a different origin, the server needs to specify a cross-origin resource policy in the response headers:
Cross-Origin-Resource-Policy: same-site Choose this option if the resource and the document are served from the same site.

合规解决方案 #

问题核心在于两点：一是初始CSP未允许Highcharts的脚本源；二是Helmet默认启用的Cross-Origin-Embedder-Policy: require-corp要求跨域资源必须设置CORP头部，但Highcharts服务器未提供该头部。以下是修正后的安全合规配置：

// 合并Helmet所有配置，避免重复调用导致头部冲突
app.use(helmet({
  contentSecurityPolicy: {
    useDefaults: true,
    directives: {
      imgSrc: ["'self'", "https:", "data:"],
      // 允许Highcharts整个域名，覆盖所有相关脚本，比单个URL更灵活
      scriptSrc: ["'self'", "https://code.highcharts.com"],
      // 若Highcharts需加载其他资源，可按需添加style-src等规则
    },
  },
  // 调整COEP策略，允许加载未设置CORP头部的跨域资源
  crossOriginEmbedderPolicy: { policy: "unsafe-none" },
  // 保持CORP配置为跨域，允许资源被其他域访问
  crossOriginResourcePolicy: { policy: "cross-origin" },
}));

// CORS配置按需保留，若前端有跨域API请求则启用
app.use(cors());

配置说明 #

• CSP脚本源优化：使用https://code.highcharts.com而非单个脚本URL，确保所有Highcharts相关脚本都能被允许，同时保持CSP规则简洁。
• COEP调整：设置unsafe-none是因为第三方服务器未提供CORP头部，这是合规的折中方案，既保留Helmet的其他安全特性，又允许加载必要的第三方资源。
• 避免重复调用Helmet：将所有配置合并到一次helmet()调用中，防止重复添加安全头部导致冲突。

内容的提问来源于stack exchange，提问作者ManeeshGowd