NodeJs 头盔 contentSecurityPolicy 阻止字体答案

【问题标题】：NodeJs Helmet contentSecurityPolicy blocking fontsNodeJs 头盔 contentSecurityPolicy 阻止字体
【发布时间】：2022-02-06 17:53:09
【问题描述】：

我不确定为什么它允许来自 google 字体的其他字体，但它总是阻止材料图标和 fontawesome。我尝试用不同的方式编写谷歌字体，但它仍然不起作用。我不确定编写允许的域的正确方法是什么如果我将添加“*”设置到列表的末尾，那么谷歌材料字体会正确加载。请让我知道我做错了什么，这是我的代码


const safeToLoadFonts = [
    "'self'",
    'fonts.googleapis.com/icon?family=Material+Icons',
    'fonts.googleapis.com/*',
    'fonts.googleapis.com/',
    'googleapis.com/*',
    'googleapis.com/',

    'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css',
    'cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css',
    "'unsafe-inline'",
]



app.use(
    helmet.contentSecurityPolicy({
        directives: {
            // defaultSrc: ['*', "'unsafe-inline'"],
            // "script-src": ['*', "'unsafe-inline'"],
            // "style-src": ['*', "'unsafe-inline'"],
            "font-src": safeToLoadFonts,
            // "img-src": ['*', "'unsafe-inline'"],
            // "form-action":[ '*', "'unsafe-inline'"]
        },
    })
);

材料图标也出现此错误：

The source list for Content Security Policy directive 'font-src' contains a source with an invalid path: '/icon?family=Material+Icons'. The query component, including the '?', will be ignored.

我收到这个字体真棒错误：

Refused to load the font '<URL>' because it violates the following Content Security Policy directive: "font-src 'self' <URL> <URL> fonts.googleapis.com/icon?family=Material+Icons fonts.googleapis.com/* fonts.googleapis.com/ googleapis.com/* googleapis.com/ <URL> cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css 'unsafe-inline'".

【问题讨论】：

标签： node.js express helmet.js

【解决方案1】：

省略这两个条目是否有效

'fonts.googleapis.com/icon?family=Material+Icons',
'fonts.googleapis.com/*',

从您的列表中？

第一个错误是警告 URL 的 ?family=Material+Icons 部分将被忽略，因此此规则仅匹配 fonts.googleapis.com/icon。

fonts.googleapis.com/* 规则与子路径不匹配，星号没有您在此处假设的含义。

以斜线结尾的规则，例如fonts.googleapis.com/、do match child paths，但由于您的 CSP 还包含更严格的以/icon 结尾的规则，因此可能会应用更严格的规则，从而阻止您需要的子路径。

【讨论】：