如何在启用CSP的静态网站（如Hexo）通过Universal Code集成Disqus？

我之前在Hexo静态站集成Disqus时刚好碰到过CSP的问题，给你分享下可行的解决步骤：

核心问题梳理 #

CSP会严格限制内联脚本的执行，而Disqus默认的Universal Code包含内联script代码，这直接触发了CSP的拦截规则。我们的解决思路是把内联脚本抽成外部JS文件，同时调整CSP规则允许Disqus的相关资源。

1. 抽离Disqus内联脚本为外部文件 #

在Hexo项目的source/js/目录下新建一个disqus-loader.js文件，把Disqus Universal Code里的内联逻辑放进去：

// 配置Disqus的基础参数
window.disqus_config = function () {
    // 用当前页面URL作为Disqus的页面标识（也可以手动指定Hexo文章的永久链接）
    this.page.url = window.location.href;
    // 用文章唯一ID区分不同页面的评论（需要在模板里提前注入这个标识）
    this.page.identifier = document.querySelector('meta[name="post-id"]')?.content || window.location.pathname;
};

// 加载Disqus的嵌入脚本
(function() {
    var d = document, s = d.createElement('script');
    // 替换成你自己的Disqus短名称（比如你的disqus地址是xxx.disqus.com，这里就填xxx）
    s.src = 'https://你的-disqus短名称.disqus.com/embed.js';
    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
})();

2. 在Hexo模板中引入外部脚本 #

打开你用来渲染评论区的模板文件（比如layout/_partial/comments.ejs或者layout/post.ejs），删掉原来的Disqus内联代码，换成下面的内容：

<!-- Disqus评论区容器 -->
<div id="disqus_thread"></div>
<!-- 引入外部的Disqus加载脚本 -->
<script src="/js/disqus-loader.js"></script>
<!-- 注入文章唯一标识（给Disqus区分不同文章） -->
{% if post.id %}
<meta name="post-id" content="{{ post.id }}">
{% endif %}

提示：如果你的Hexo模板用的是其他引擎（比如Pug），把模板语法换成对应的即可，核心是注入唯一的文章标识并引入外部JS。

3. 调整CSP规则允许Disqus资源 #

找到你配置CSP的地方（可能是主题配置文件里的CSP选项，或者项目根目录的_headers文件），添加以下规则：

# 允许加载Disqus的脚本资源
script-src 'self' https://你的-disqus短名称.disqus.com https://disqus.com https://*.disquscdn.com;
# 允许Disqus的样式（部分内联样式需要unsafe-inline，静态站场景下这是比较务实的选择）
style-src 'self' 'unsafe-inline' https://*.disquscdn.com;
# 允许Disqus的图片资源
img-src 'self' https://*.disquscdn.com https://*.disqus.com;
# 允许Disqus的字体资源
font-src 'self' https://*.disquscdn.com;
# 允许Disqus的嵌入框架
frame-src https://*.disqus.com;

如果你对unsafe-inline有顾虑，理论上可以用CSP的nonce或hash方式，但静态站无法动态生成nonce，而Disqus的动态脚本hash会变化，所以unsafe-inline是最可行的方案。

4. 测试验证 #

部署你的Hexo站点后，打开一篇带评论区的文章：

• 打开浏览器控制台（F12），检查有没有CSP相关的报错
• 确认Disqus评论区正常加载、可以提交评论

额外注意事项 #

• 确保disqus_config里的page.identifier唯一，否则不同文章的评论会被Disqus归为同一页面
• 如果你的CSP是通过HTML meta标签配置的，注意meta标签不支持frame-ancestors等部分指令，但这不影响Disqus的集成

内容的提问来源于stack exchange，提问作者Gabriel H. Nunes