使用Disqus的Jekyll站点出现Content Security Policy错误求助

Let’s break down why your Disqus comments are hitting a Content Security Policy (CSP) block—even after adding a CSP meta tag—and fix it step by step.

First, Diagnose the Root of the CSP Issue #

Your error mentions the page’s settings blocked a resource at self under script-src, but digging into Disqus’s requirements, your current CSP is missing critical permissions and domain coverage:

1. Disqus loads scripts from multiple subdomains of disquscdn.com (not just a.disquscdn.com).
2. Disqus’s embed script uses eval() internally, which requires the 'unsafe-eval' directive in your CSP.
3. Your frame-src rules are too restrictive for Disqus’s comment iframe.

Step 1: Update Your CSP Configuration #

Replace the CSP meta tag in _includes/head.html with this expanded, tested version:

<!-- CSP(Content Security Policy) -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; 
script-src 'self' 'unsafe-inline' 'unsafe-eval' *.disqus.com *.disquscdn.com requirejs.org www.google-analytics.com; 
style-src 'self' 'unsafe-inline' *.disquscdn.com; 
img-src 'self' * data:; 
media-src 'self'; 
frame-src *.disqus.com disqus.us;">

Here’s what changed and why:

• Swapped a.disquscdn.com for *.disquscdn.com to cover all Disqus CDN subdomains.
• Added 'unsafe-eval' to let Disqus’s embed script run internal code that relies on eval.
• Expanded frame-src to include all Disqus domains and disqus.us (used for comment previews and embeds).
• Added data: to img-src to support Disqus’s data-URI images.
• Standardized on double quotes to avoid potential parsing inconsistencies.

Step 2: Fix the Double Slash in Your Post URL #

While not directly causing the CSP error, your post URL has an extra slash (//blog/...) that could confuse Disqus’s URL validation. To fix this:

• Check your Jekyll _config.yml for permalink settings. Use a clean structure like:

  permalink: /blog/:title/
  

• Ensure your post’s frontmatter doesn’t include a custom URL with unintended extra slashes.

Step 3: Clear Browser Cache #

Browsers often cache CSP headers and meta tags. Clear your cache or open the page in incognito mode to test the new configuration immediately.

Verify the Fix #

After making these changes, reload your post page and check the browser console. If the CSP error is gone, your Disqus comments should load correctly. If you still see errors, note the specific blocked resource and add its domain to the relevant CSP directive.

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