时间戳

首页 > 解决方案 > 内容安全策略元标记“不安全内联”不起作用

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

问题描述

我在电子应用程序中获得了 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。

标签： htmlcssfontselectroncontent-security-policy

解决方案

关键点在：

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

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

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

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

开发模式下的 Electron 也可以通过 HTTP 标头发布 CSP，您可以检查它或在您的项目中搜索代码，如下所示：

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

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

注意：

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

推荐阅读