为什么我不能让 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 添加很棒的字体，或者在我的应用程序中添加很棒的字体 CSS 文件。

Answer 1

问题中错误消息中引用的政策有 default-src 'self' 但你的 meta 元素中显示的政策没有。这似乎表明除了 meta.

中的策略外，您的文档还通过 Content-Security-Policy HTTP header 中的策略提供服务

而其他政策相对严格，因为它有 default-src 'self' 而没有 style-src。因此，当您使用 meta 指定另一个 less-strict 策略时，问题是当您指定多个策略时 CSP 的工作方式是，most-strict 策略总是获胜。所以你的浏览器基本上忽略了你的 meta 策略，只是使用 HTTP header.

中指定的策略

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

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

Why can't I get font awesome to work in an ASP.NET Core MVC application?

font-awesome

content-security-policy

asp.net-core-mvc