Question

我已添加头盔功能来设置CPS，但字体存在问题。一个简单的例子如下：

但是，除了它抱怨的Font之外，它正确加载所有资源。

sample.css

src: url("/assets/fonts/font.eot")

Example.com

app.use(csp({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "'unsafe-inline'"],
        styleSrc: ["'self'", "'unsafe-inline'"],
        imgSrc: ["'self'"],
        fontSrc: ["'self'", "'unsafe-inline'"],
        sandbox: ['allow-forms', 'allow-scripts'],
        reportUri: '/report-violation',
        objectSrc: [],
    },
    reportOnly: false,
    setAllHeaders: false,
    disableAndroid: false,
    browserSniff: true
}));

在浏览器中，它为我提供了字体

的错误消息

Font from origin 'http://localhost:3000' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

我错过了让浏览器中的字体工作的东西吗？

在express中，我确保正确设置public和assets文件。（资产的一切工作正常）。

app.use("/assets", express.static(__dirname + "/assets"));
app.use("/public", express.static(__dirname + "/public"));

Answer 1

它是一个CORS（跨源资源共享）问题，我的例子来自对eot文件末尾的查询，例如：就像在font-awesome＆＃39; s css中一样，因为css正在使用

src: url(...)

而不是

src: local(...)

如果找不到查询字符串，例如？v = 4.6.1，它做了，它将进行查询以找到它，引起CORS问题。

来自MDN的@ font-face上的

Some info特别提到了这个问题：

Web字体受到相同的域限制（字体文件必须与使用它们的页面位于同一域中），除非使用HTTP访问控制来放宽此限制。

从该文档链接的

MDN CORS info。

因此要么使用local关键字，要么以静默方式失败，或者你可以使用Manning website中的类似内容打开CORS：

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });

但是当你正在使用CSP时，你会想要深入研究如何进一步锁定CORS标题，我想？

expressjs头盔cps问题与字体

1 个答案: