在使用 Disqus 的 Jekyll 站点中，我收到内容安全策略错误

Question

我使用托管在 Github Pages 上的 Jekyll 构建了一个网站：

site, repo

杰基尔_config.yml:

    # Comments
disqus_shortname: bad3r

_layout/post.html中的Disqus配置：

<div class="comments-wrapper">
  <div id="disqus_thread"></div>
  <script>
    /**
     *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
     *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables
     */
    var disqus_config = function() {
      this.page.url = '{{ absolute_url }}{{ page.url }}'; /*Replace PAGE_URL with your page's canonical URL variable*/
      this.page.identifier = '{{ page.url }}'; /*Replace PAGE_IDENTIFIER with your page's unique identifier variable*/
    };
    (function() { /* dont endit below this line */
      var d = document,
        s = d.createElement('script');
      /* https://bad3r.disqus.com/embed.js */
      /* 'https://{{ site.disqus_shortname }}.disqus.com/embed.js' */
      s.src = 'https://{{ site.disqus_shortname }}.disqus.com/embed.js';
      s.setAttribute('data-timestamp', +new Date());
      (d.head || d.body).appendChild(s);
    })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
</div>
<!-- /.comments-wrapper -->

我在 Jekyll front-matter 帖子中启用了 cmets：

---
layout: post
title:  "Welcome to my new blog"
date:   2018-05-25
excerpt: "working on building my blog, here is an example post"
image: "/images/workProgress.jpg"
comments: true
---

链接到disque显示错误消息here的帖子，github上的代码here

如果您在页面上打开控制台，您将看到错误：

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src”). 

当我第一次遇到错误时，我没有内容安全策略 但我尝试实现一个，并在_includes/head.html 中添加了 CSP：

<!-- CSP(Content Security Policy) -->
<META HTTP-EQUIV='Content-Security-Policy' CONTENT="default-src 'self' ; script-src 'self' 'unsafe-inline' *.disqus.com a.disquscdn.com requirejs.org www.google-analytics.com; style-src 'self' 'unsafe-inline' a.disquscdn.com; img-src 'self' *; media-src 'self' ; frame-src disqus.com;">

_includes/head.html 包含在所有 _layouts/*.html 的开头

我不知道为什么还会出现这个错误。

Answer 1

您输入的this.page.identifier 似乎不正确。这是一个工作博客上的 Disqus 代码副本：

_includes/disqus.html：

{% if page.comments %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <div id="disqus_thread"></div>
            <script>
            /**
            *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
            *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
            var disqus_config = function () {
            this.page.url = "{{ site.url }}{{ page.url }}";  // Replace PAGE_URL with your page's canonical URL variable
            this.page.identifier = "{{ page.id }}"; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
            };
            (function() { // DON'T EDIT BELOW THIS LINE
            var d = document, s = d.createElement('script');
            s.src = 'https://DIRSETUP.disqus.com/embed.js'; // YOUR ACCOUNT
            s.setAttribute('data-timestamp', +new Date());
            (d.head || d.body).appendChild(s);
            })();
            </script>
            <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>             
        </div>
    </div>
</div>
{% endif %}

您需要从 Disqus 复制上述代码，因为它将包含站点设置的 URL，但在您的代码中，您将其作为配置中的变量。我认为您可能遇到了参考问题，因此请尝试将'{{ page.url }}' 更改为"{{ page.id }}"。在_layouts 目录中，我只是将{% include disqus.html %} 的包含传递给post.html。在_posts 我有一个模板：

---
layout: post
published: false
comments: true
title: ""
excerpt: ""
date: 
categories: ['']
tags: ['', '']
---

如果您想要评论计数，您还可以添加：

<script id="dsq-count-scr" src="//{{ disqusShort }}.disqus.com/count.js" async></script>

在结束 </body> 标记到 _layouts/default.html 之前。然后你可以将disqusShort: username 添加到_config.yml。在 _layouts/post.html 中添加：

{% if page.comments %} • <a href="{{ site.url }}{{ page.url }}#disqus_thread">0 Comments</a>{% endif %}

当我设置我的时，我引用了“Adding Disqus to a Jekyll Blog”。我没有收到任何错误，希望对您有所帮助。