0

最初我制作了一个应用程序，它在 html 中使用此代码，并遵循实现字体真棒图标并且运行良好的类。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

我现在第一次学习helmetJS，并将其实现到我的server.js 文件中。我可以将 controlSecurityPolicy 设置为 false，但我想保留该功能并且感觉这是走捷径。当我调用 CSP 时，我成功地将图像和 jQuery 添加到指令中，因此它们工作正常。但是，当我为 fontawesome 这样做时，它会使用图标并将其变成一个白色方块。

app.use(helmet({ dnsPrefetchControl: false, contentSecurityPolicy: {
      directives: {
        defaultSrc: ["'self'"],
        "img-src": ["'self'", "https://i.ibb.co/"], // images
        scriptSrc: ["'self'", "https://code.jquery.com/jquery-3.1.1.js"],
        styleSrc: [ "'self'", "https://use.fontawesome.com/releases/v5.8.1/css/all.css"], // LINK THAT IS NOT WORKING.
      },
    },
  })
);

必须有一种方法可以修复白色方块并在使用helmJS后再次使它们成为图标，但答案一直在躲避我。非常感谢任何和所有帮助。

4

1 回答 1

0

检查您的浏览器开发人员控制台，了解您的服务器 CSP 配置，如下所示。 服务器响应

如果标头content-security-policy标头没有附带 font-awesome。则表示当前的 CSP 未生效。清除浏览器中的缓存并重试或在新浏览器中尝试以检查它是否正确。

CSP

于 2021-03-29T18:25:46.440 回答