内容安全策略元标记“不安全内联”不起作用

Question

我在电子应用程序中获得了 CSS 跨域策略：

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.ttf?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.woff?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

所以我尝试了这样的事情：

<meta http-equiv="Content-Security-Policy"
    content="
      default-src 'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline'; 
      style-src   'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      style-src-elem   'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      font-src    'self' https://cdn.scaleflex.it  https://fonts.googleapis.com 'unsafe-eval' 'unsafe-inline';
      "
  />

但它给了我类似的东西：

Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the stylesheet 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'style-src-elem' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.ttf?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.
Refused to load the font 'https://cdn.scaleflex.it/plugins/filerobot-image-editor/assets/fonts/filerobot-image-editor-font/v5/filerobot-image-editor-font.woff?ua0hzun3' because it violates the following Content Security Policy directive: "default-src 'self' 'unsafe-inline' data:". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

但根据大多数答案，这项工作。喜欢：ans1、ans2。

Answer 1

重点在：

• 因为它违反了以下内容安全策略指令：“default-src 'self' 'unsafe-inline' data:”
• 请注意，'font-src' 没有明确设置 / 请注意，'style-src-elem' 没有明确设置

虽然元标记中有 font-src 和 style-src / style-src-elem 指令。

这意味着它不是您的元标记的 CSP 进行阻止，而是其他一些 CSP。如果发布了多个 CSP，则所有来源都应通过所有 CSP 才能被允许。

检查您是否使用electron-forge/plugin-webpack 插件（或类似的东西） - 这些可以添加带有自己默认 CSP 的元标记。在这种情况下，您会在 HTML 代码中看到 2 个<meta http-equiv="Content-Security-Policy"... 元标记。

Dev 模式下的 Electron 也可以通过 HTTP 标头发布 CSP，您可以 check it 或在您的项目中搜索如下代码：

session.defaultSession.webRequest.onHeadersReceived((details, callback) => {
  callback({ responseHeaders: Object.assign({
    ...details.responseHeaders,
    "Content-Security-Policy": [ "default-src 'self'" ]
    }, details.responseHeaders)});
  });

无论如何，您都需要对已发布的 CSP 进行更改，而不是添加新的。

注意：

• style-src-elem 指令不支持 'unsafe-eval' 令牌。
• 'unsafe-eval' 和 'unsafe-inline' 令牌在 font-src 指令中不受支持。 您可以删除这些。