asp.net-core-mvc - 为什么我不能让 font awesome 在 ASP.NET Core MVC 应用程序中工作？

Question

我在向我的 ASP.NET Core MVC (ASP.NET Core 2) 应用程序添加很棒的字体时遇到问题。我只是想将名为 font awesome 的 CSS 库添加到我的 MVC 项目中。我尝试了两种方法

1) 像这样添加 font awesome CDN

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

但是当我添加 CDN 时，我在 Chrome 中遇到了 CSP 错误

Refused to load the stylesheet 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' because it violates the following Content Security Policy directive: "default-src 'self'". Note that 'style-src' was not explicitly set, so 'default-src' is used as a fallback.

所以我尝试添加正确的元标记。我尝试了很多组合，但似乎没有任何效果。例如，

<meta http-equiv="Content-Security-Policy"
  content="script-src 'self' http://maxcdn.bootstrapcdn.com
  'unsafe-inline' 'unsafe-eval';
  style-src 'self' http://maxcdn.bootstrapcdn.com
  'unsafe-inline' 'unsafe-eval'; " />

我仍然收到与 Chrome 中的 CSP 相关的错误。

2) 我采用的第二种方法是在我的项目中添加 font awesome CSS 文件。我这样做了，然后像这样添加了相应的引用:

<link rel="stylesheet" href="~/css/font-awesome.min.css">

当我这样做时，尽管文件位于正确的位置并且被正确引用，但我还是收到了以下错误:

GET http://localhost:5000/fonts/fontawesome-webfont.woff2?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.woff?v=4.7.0 net::ERR_ABORTED
GET http://localhost:5000/fonts/fontawesome-webfont.ttf?v=4.7.0 404 (Not Found)

我调查了这个问题，发现它可能与静态文件处理程序有关。然后我修改了 app.UseStaticFiles() 以采用如下选项参数:

StaticFileOptions staticFileOptions = new StaticFileOptions();
FileExtensionContentTypeProvider typeProvider = new FileExtensionContentTypeProvider();
if (!typeProvider.Mappings.ContainsKey(".woff2"))
{
    typeProvider.Mappings.Add(".woff2", "application/font-woff2");
}

if (!typeProvider.Mappings.ContainsKey(".woff"))
{
    typeProvider.Mappings.Add(".woff", "application/font-woff");
}

if (!typeProvider.Mappings.ContainsKey(".ttf"))
{
    typeProvider.Mappings.Add(".ttf", "application/font-ttf");
}
staticFileOptions.ContentTypeProvider = typeProvider;
app.UseStaticFiles(staticFileOptions);

但是我还是报了上面的错误。

有谁知道我做错了什么？如果需要，我可以通过它的 CDN 添加 font awesome 或在我的应用程序中添加 font awesome CSS 文件。

Answer 1

问题中错误消息中引用的策略有 default-src 'self' 但 meta 元素中显示的策略没有。这似乎表明除了 meta 中的策略之外，您的文档还使用了 Content-Security-Policy HTTP header 中的策略。

其他策略相对严格，因为它有 default-src 'self' 而没有 style-src。因此，当您使用该 meta 指定另一个不太严格的策略时，问题在于当您指定多个策略时 CSP 的工作方式是，最严格的策略总是获胜。因此，您的浏览器基本上会忽略您的 meta 策略，而只会使用 HTTP header 中指定的策略。

解决方案是:在服务器代码中找到添加 Content-Security-Policy HTTP header 的位置，然后更改它以使其具有您想要的确切策略，或者删除它完全是服务器代码的一部分，而只是使用 meta 元素设置策略。