In a Jekyll site using Disqus I get a Content Security Policy error

Question

I built a site using Jekyll hosted on Github Pages:

    # Comments
disqus_shortname: bad3r

Disqus configuration in _layout/post.html :

<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 -->

I have enabled comments in the post Jekyll front-matter:

---
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
---

link to the post where disque shows an error message here, code on github here

if you open the console on the page you will see the error:

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

i didnt have a Content Security Policy when i first encountered the error but i tried to implement one and i added the CSP in the _includes/head.html :

<!-- 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;">

and the _includes/head.html is included in the start of all _layouts/*.html

I have no idea why this error still occurs.

DᴀʀᴛʜVᴀᴅᴇʀ DᴀʀᴛʜVᴀᴅᴇʀ · Accepted Answer · 2019-05-17T14:21:17

Looks like you may be entering an incorrect this.page.identifier. Here is a copy of the Disqus code on a working blog:

_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 %}

The above code you'll need to copy from Disqus because it will include the URL for the site setup but in your code you have it as variable from the config. I think you may be having an issue by the reference so try changing '{{ page.url }}' to "{{ page.id }}". In the directory _layouts I just pass the include of {% include disqus.html %} to post.html. In _posts I have a template of:

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

If you want the comment count you could also add:

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

before the closing </body> tag to _layouts/default.html. Then you can add disqusShort: username to _config.yml. In _layouts/post.html add:

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

When I set mine I referenced "Adding Disqus to a Jekyll Blog". I get no errors so hope this helps.

In a Jekyll site using Disqus I get a Content Security Policy error

1 Answers