css Google字体违反内容安全政策

uz75evzq 于 2023-01-27 发布在 Go

关注(0)|答案(6)|浏览(172)

我尝试使用谷歌字体，我从来没有遇到过任何问题，但现在当我尝试添加CSS文件在我的头我得到这个错误的控制台：
拒绝加载样式表'http://fonts.googleapis.com/css?family=Whatever'，因为它违反了以下内容安全策略指令："style-src 'self' 'unsafe-inline'".

css

来源：https://stackoverflow.com/questions/33984908/google-fonts-violates-content-security-policy

6条答案

按热度按时间

i34xakig1#

这里有两件事需要解决：

使用https作为Google字体链接（https://fonts.googleapis.com/css?family=Whatever）
授权style-src指令中的https://fonts.googleapis.com和font-src指令中的https://fonts.gstatic.com："style-src 'self' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com"

赞(0）回复(0）举报 2023-01-27

yv5phkfx2#

如果您和我一样，因为每个答案都只是说您需要在style-src指令中授权一个URL，而没有说明如何执行，所以有点困惑，下面是完整的标记：

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

赞(0）回复(0）举报 2023-01-27

bttbmeg03#

可以为Content-Security-Policy提供多个源。
下面有明确的细节，这对我很有效。
根据您的内容（css，img，字体，媒体）来源错误，您可以在下面更改URL。

<html>

<head>

  <meta http-equiv="Content-Security-Policy"
    content="
      default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 
      style-src   'self' https://fonts.googleapis.com;
      font-src    'self' data: https://fonts.gstatic.com;
      img-src     'self' data: content:;
      media-src   *;
            "
  />

 <title>My page title</title>

</head>

<body>
  some text
</body>

</html>

希望能有所帮助。

赞(0）回复(0）举报 2023-01-27

mbskvtky4#

使用Helmet时，以下代码可以完美工作（用TypeScript编写）：

import * as express from 'express';
import { Express } from 'express';
const helmet = require('helmet');
const expressApp: Express = express(); // Create Express instance.

expressApp.use(
  helmet.contentSecurityPolicy({
    directives: {
      fontSrc: [
        "'self'", // Default policy for specifiying valid sources for fonts loaded using "@font-face": allow all content coming from origin (without subdomains).
        'https://fonts.gstatic.com' // Google Fonts.
      ],
      styleSrc: [
        "'self'", // Default policy for valid sources for stylesheets: allow all content coming from origin (without subdomains).
        'https://fonts.googleapis.com' // Google Fonts.
      ],
    }
  })
);

赞(0）回复(0）举报 2023-01-27

wsewodh25#

上面的组合对我不起作用。我的代码是从.scss文件导入字体，如下所示：

@import url('https://fonts.googleapis.com/icon?family=Material+Icons');

我补充了以下内容：

default-src被设置为'self'。这不是必需的，但是我希望锁定所有其他内容。此限制可能会在浏览器控制台中触发错误。根据需要进行调整。我必须添加wss:scheme，以允许Angular调试器的Web Socket连接。
style-src需要'unsafe-inline' * 关键字 *。我怀疑这是因为样式被压缩/最小化了。
script-src还需要'unsafe-inline' * 关键字 *。虽然我检查了下载的样式表，没有看到任何明显的东西，但我认为那里一定有被认为是脚本的东西。
font-src需要data:scheme。浏览器控制台在获取data:application/font-woff;charset=utf-8… (“font-src”)时出错。这可能来自我的Angular代码中的其他位置，但可能对某些人有用。

在最后一件事下面。

default-src 'self' wss:;
style-src 'self' https://fonts.googleapis.com 'unsafe-inline';
script-src 'self' https://fonts.googleapis.com 'unsafe-inline';
font-src 'self' data: https://fonts.gstatic.com

赞(0）回复(0）举报 2023-01-27

6pp0gazn6#

嗨，如果您要添加server.js，那么应该是这样的

let  securityPolicy = `default-src 'self' 'unsafe-eval' 'unsafe-inline'; ` +
`script-src 'self' 'unsafe-inline' 'unsafe-eval' ` +
`img-src 'self' data:  ` +
`style-src 'self' 'unsafe-inline' 'unsafe-eval'  ` +
`font-src https://fonts.googleapis.com 'self' data:  ` 

res.header('Content-Security-Policy', res.header('Content-Security-Policy', securityPolicy))

赞(0）回复(0）举报 2023-01-27

我来回答

css Google字体违反内容安全政策

6条答案

相关问题

热门标签

最新问答