时间戳

首页 > 解决方案 > 拒绝加载样式表（元标记不起作用）

html - 拒绝加载样式表（元标记不起作用）

问题描述

在我网站的已部署版本上，我看不到使用这样的样式表获得的任何图标（来自材料设计图标）

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.css">

我得到错误

Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.css' because it violates the following Content Security Policy directive: "style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline'". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

发生的错误

我曾尝试使用元标记，但失败了

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com/ 'unsafe-inline';">

如果有人知道如何解决这个错误，我将永远感激不尽

标签： htmlcssvue.jsfrontendmaterial-design

解决方案

看起来您的 CSP 不包含https://cdn.jsdelivr.net在该style-src部分中。您更新后的 CSP 可能如下所示：

<meta http-equiv="Content-Security-Policy" content="style-src 'self' https://fonts.googleapis.com https://cdn.jsdelivr.net 'unsafe-inline';">

附带说明：'unsafe-inline'顾名思义，应该仅在您知道自己在做什么时才使用该值。可以说内联 JS 比内联 CSS“更危险”，但仍然 - 如果您不需要这个值，那么只需将其删除。请参阅CSP style-src: 'unsafe-inline' - 值得吗？当然，如果您使用的是 Angular 之类的框架，则可能需要启用此功能。但是，恕我直言，重要的是要牢记各个标签的含义/含义。

推荐阅读