Next.js集成utteranc.es时出现CSP脚本加载报错如何解决

架构老林

2026-8-28

问题说明

接入utteranc.es评论系统时浏览器抛出如下拦截报错：

Refused to load the script 'https://utteranc.es/client.js' because it violates the following Content Security Policy directive
即浏览器拒绝加载https://utteranc.es/client.js脚本，原因是脚本违反当前站点配置的内容安全策略（CSP）指令。

故障原因

当前next.config.js内的CSP配置存在两处不符合规范的问题：

源匹配规则写法错误：script-src、child-src、frame-src中配置的utteranc.es未带协议前缀，CSP无法匹配该域名下的脚本、iframe资源，直接触发加载拦截
权限缺失：未配置utteranc.es请求GitHub评论数据所需的连接权限，即使脚本加载成功，后续也会出现评论拉取、提交失败的问题

修复方案

直接替换原有CSP配置内容即可：

const ContentSecurityPolicy = `
    default-src 'self';
    script-src 'self' 'unsafe-eval' 'unsafe-inline' *.youtube.com *.twitter.com https://utteranc.es;
    child-src *.youtube.com *.google.com *.twitter.com https://utteranc.es;
    frame-src https://utteranc.es;
    style-src 'self' 'unsafe-inline' *.googleapis.com;
    img-src * blob: data:;
    media-src 'none';
    connect-src * https://utteranc.es api.github.com;
    font-src 'self';
`;

配置修改后注意事项：