Bitbucket静态站点unsafe-eval处理及GatsbyImage CSP控制台错误解决

阿华AIGC实验室

2026-5-9

问题分析与解决方案

1. 问题根源

（1）GatsbyImage的CSP连接错误

Bitbucket静态站点默认配置了严格的Content Security Policy（CSP），其中connect-src指令仅允许连接Bitbucket生态内的指定域名列表，但你的GatsbyImage组件加载图片时需要连接的图片源域名（比如你存储图片的CDN、云存储服务域名）不在这个默认列表里，浏览器会拦截这些跨域连接请求，从而触发控制台错误。

（2）`unsafe-eval`问题

这个问题通常来自两个方面：

项目依赖的部分第三方库（比如旧版CSS-in-JS工具、某些小众插件）在运行时使用了eval或类似动态代码执行的逻辑；
构建过程中未完全清理开发环境的调试代码，导致生产构建产物中残留了需要eval执行的片段。Bitbucket默认CSP禁止unsafe-eval操作，因此触发对应错误。

2. 完整解决方案

（1）自定义CSP兼容GatsbyImage

Bitbucket静态站点允许通过项目中的_headers文件自定义HTTP响应头，我们可以通过这个文件扩展默认的CSP规则：

在Gatsby项目根目录的static文件夹中创建_headers文件（若static文件夹不存在则直接新建）；
在文件中添加以下内容（记得替换[你的图片源域名]为实际的图片存储域名，比如https://your-image-cdn.com）：

/*
Content-Security-Policy: default-src 'self'; 
connect-src 'self' [你的图片源域名] bitbucket.org *.bitbucket.org bb-inf.net *.bb-inf.net analytics.atlassian.com as.atlassian.com api-private.stg.atlassian.com api-private.atlassian.com cofs.staging.public.atl-paas.net cofs.prod.public.atl-paas.net intake.opbeat.com api.media.atlassian.com api.segment.io xid.statuspage.io xid.atlassian.com xid.sourcetreeapp.com bam.nr-data.net sentry.io bqlf8qjztdtr.statuspage.io; 
img-src 'self' [你的图片源域名] data:; 
script-src 'self' 'unsafe-inline' 'unsafe-eval'; 
style-src 'self' 'unsafe-inline';

说明：我们保留了Bitbucket默认允许的所有域名，同时将你的图片源加入connect-src和img-src，确保GatsbyImage能正常加载图片；script-src中添加unsafe-eval来解决动态代码执行的限制。

（2）优化构建减少`unsafe-eval`依赖（可选但推荐）

如果想尽量避免使用unsafe-eval，可以做以下排查优化：

确保使用生产构建：运行gatsby build生成部署产物，而非开发模式的gatsby develop——开发模式会包含大量调试代码，容易引入eval逻辑；
更新依赖：检查package.json，将Gatsby核心插件、第三方UI库等依赖更新到最新稳定版，很多旧版依赖的eval问题已被官方修复；
排查CSS-in-JS工具：若使用styled-components或emotion，确保开启生产环境优化配置（比如对应Gatsby插件的生产模式），避免动态生成样式时触发eval。