为什么我不能让字体真棒在 ASP.NET Core MVC 应用程序中工作？

Question

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

1) 像这样添加字体 Awesome CDN

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

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

拒绝加载样式表 'http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' 因为它违反了以下内容安全政策指令： “默认源代码‘自我’”。请注意，'style-src' 没有明确设置，所以 'default-src' 用作后备。

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

<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) 我采用的第二种方法是在我的项目中添加字体真棒 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 标头中的策略为您的文档提供服务。

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

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