使用Helmet时Bootstrap样式失效的问题求助

问题背景 #

项目中使用Helmet配置了Content Security Policy（CSP），网站可正常运行但Bootstrap样式完全失效；移除Helmet依赖后样式恢复正常，控制台出现CSP相关报错。

当前CSP配置 #

app.use(helmet());

const scriptSrcUrls = [
    "https://stackpath.bootstrapcdn.com/",
    "https://api.tiles.mapbox.com/",
    "https://api.mapbox.com/",
    "https://kit.fontawesome.com/",
    "https://cdnjs.cloudflare.com/",
    "https://cdn.jsdelivr.net",
];
const styleSrcUrls = [
    "https://kit-free.fontawesome.com/",
    "https://stackpath.bootstrapcdn.com/",
    "https://api.mapbox.com/",
    "https://api.tiles.mapbox.com/",
    "https://fonts.googleapis.com/",
    "https://use.fontawesome.com/",
];
const connectSrcUrls = [
    "https://api.mapbox.com/",
    "https://a.tiles.mapbox.com/",
    "https://b.tiles.mapbox.com/",
    "https://events.mapbox.com/",
];
const fontSrcUrls = [];
app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: [],
            connectSrc: ["'self'", ...connectSrcUrls],
            scriptSrc: ["'unsafe-inline'", "'self'", ...scriptSrcUrls],
            styleSrc: ["'self'", "'unsafe-inline'", ...styleSrcUrls],
            workerSrc: ["'self'", "blob:"],
            objectSrc: [],
            imgSrc: [
                "'self'",
                "blob:",
                "data:",
                "https://res.cloudinary.com/sdfgsfgsssss/",
                "https://images.unsplash.com/",
            ],
            fontSrc: ["'self'", ...fontSrcUrls],
        },
    })
);

控制台错误信息 #

Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://kit-free.fontawesome.com/ https://stackpath.bootstrapcdn.com/ https://api.mapbox.com/ https://api.tiles.mapbox.com/ https://fonts.googleapis.com/ https://use.fontawesome.com/". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

clusterMap.js:13 Map Loaded
campgrounds:1 Refused to load the stylesheet 'https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css' because it violates the following Content Security Policy directive: "style-src 'self' 'unsafe-inline' https://kit-free.fontawesome.com/ https://stackpath.bootstrapcdn.com/ https://api.mapbox.com/ https://api.tiles.mapbox.com/ https://fonts.googleapis.com/ https://use.fontawesome.com/". Note that 'style-src-elem' was not explicitly set, so 'style-src' is used as a fallback.

解决方案 #

问题核心是：Bootstrap样式从https://cdn.jsdelivr.net加载，但当前CSP的styleSrcUrls数组未包含该域名，导致浏览器拒绝加载资源。

修改步骤：

• 在styleSrcUrls数组中添加"https://cdn.jsdelivr.net/"（与现有URL格式保持一致）

修改后的styleSrcUrls如下：

const styleSrcUrls = [
    "https://kit-free.fontawesome.com/",
    "https://stackpath.bootstrapcdn.com/",
    "https://api.mapbox.com/",
    "https://api.tiles.mapbox.com/",
    "https://fonts.googleapis.com/",
    "https://use.fontawesome.com/",
    "https://cdn.jsdelivr.net/" // 新增该行
];

保存修改并重启服务后，浏览器即可正常加载Bootstrap样式。

内容的提问来源于stack exchange，提问作者rafflewinner64