Content-Security-Policy元标记'unsafe-inline‘无效

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

关键点在：

不安全内联，因为它违反了以下内容安全策略指令：“data:"

• Note 'font-src‘未显式设置/注意'style-src-elem’未显式设置

-src 'self‘’unsafe-

• ‘

而在元标记中有font-src和style-src / style-src-elem指令。

这意味着它不是一个CSP对你的meta标签做阻塞，而是其他一些CSP。在发布多个CSP的情况下，所有来源都应通过所有CSP允许。

勾选do you use electron-forge/plugin-webpack plugin (或类似的插件)-这些插件可以添加一个带有自己默认CSP的meta标签。在本例中，您将在<meta http-equiv="Content-Security-Policy"...代码中看到两个HTML元标记。

开发模式下的Electron也可以通过header发布CSP，你可以通过check it或搜索你的项目中的代码，如下所示：

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

在任何情况下，您都需要对已发布的CSP进行更改，而不是添加新CSP。

请注意：

• 'unsafe-eval' directive.
• 'unsafe-eval'中不支持style-src-elem标记，font-src指令中不支持'unsafe-inline'标记。您可以删除这些文件。