css - 使用 FontAwesome 网络字体时的 CSP 警告(工具包)

Question

根据 FontAwesome 的 V6 文档:

Using Web Fonts with CSS? You don't need to worry about CSP issues. These workarounds aren't needed.

我像这样加载 FontAwesome:

<script src="https://kit.fontawesome.com/589f449313.js" crossorigin="anonymous"></script>

我的 CSP 是:

Content-Security-Policy: default-src data: 'self' https://*.bootstrap.com https://*.jsdelivr.net https://*.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com https://code.jquery.com; form-action 'self'; upgrade-insecure-requests

但是，FontAwesome 图标没有加载，我在检查器中收到此错误:

Refused to apply inline style because it violates the following Content Security Policy directive: "default-src data: 'self' https://*.bootstrap.com https://*.jsdelivr.net https://*.fontawesome.com https://fonts.googleapis.com https://fonts.gstatic.com https://code.jquery.com". Either the 'unsafe-inline' keyword, a hash ('sha256-vbZVW+MEGpqM/MTrc0cuTI1eza7x/JNIBG8uVXROwnE='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

我不确定我还应该做什么，因为 FontAwesome 的文档指出我不需要在 CSP 中为内联样式做任何特殊的事情。

我在这里错过了什么？

Answer 1

可以看看here

我没有使用过该工具包，而是使用了单个文件:

<link href="~/fontawesome6/css/brands.min.css" rel="stylesheet" />
<link href="~/fontawesome6/css/solid.min.css" rel="stylesheet" />
<link href="~/fontawesome6/css/v5-font-face.min.css" rel="stylesheet" />
<script src="~/fontawesome6/js/fontawesome.min.js"></script>
<script src="~/fontawesome6/js/brands.min.js"></script>
<script src="~/fontawesome6/js/solid.min.js"></script>

通过这种方式，可以使用 Chrome 开发工具更好地了解要处理的位置。我已将 Chrome 建议的 sha-* 值一一添加。

我没有在任何地方添加unsafe-inline

我的 CSP 代码块:

context.Response.Headers.Add(
"Content-Security-Policy-Report-Only",
"default-src 'none' ;" +
"script-src 'self' 'unsafe-eval' https://kit.fontawesome.com/ ;" +
"style-src 'self' ;" +
"img-src 'self' data:  ;" +
"font-src 'self' https://ka-f.fontawesome.com/  ;" +
"media-src 'self' data: ; " +
"frame-src 'self' ;" +
"connect-src 'self' ws: https://ka-f.fontawesome.com/ ;" +
"object-src 'none' ;" +
"base-uri 'self' data: ;" +
"report-uri /cspreport ;"
);

在 style-src 你必须添加你的 sha256-*

希望对您有所帮助!