Helmet配置Content Security Policy后Bootstrap字体加载报错如何修复

你配置的内容安全策略(CSP)中fontSrc指令仅允许加载来自https://fonts.gstatic.com的字体资源，而Bootstrap部分内置字体/图标采用base64编码的data: URI内嵌提供，不在允许列表内，因此被CSP拦截触发报错。

修改helmet.contentSecurityPolicy配置中的fontSrc指令，添加data:到允许列表即可，修改后完整配置如下：

app.use(helmet());
app.use(
helmet.contentSecurityPolicy({
    directives: {
        defaultSrc: ["'self'"],
        scriptSrc: ["'self'", "https://cdn.jsdelivr.net"],
        objectSrc: ["'none'"],
        styleSrc: ["'self'", "https://cdn.jsdelivr.net"],
        // 新增data: 允许加载base64编码的内嵌字体
        fontSrc: ["https://fonts.gstatic.com", "data:"],
        upgradeInsecureRequests: [],
    },
})
);

如果需要严格控制安全权限，也可以更换Bootstrap引入方式，不使用内嵌base64字体的打包版本，改为单独加载字体资源，就不需要新增data:的允许规则。

内容的提问来源于stack exchange，提问作者Jose-xd