CSP error with Disqus on github pages - github-pages

I have a jekyll based blog on github pages with comments served by Disqus. Or to be more precise: they used to get served by Disqus. I discovered, that the Disqus stuff fails to load.
In Chrome I see the following error in the console:
Refused to load the script 'data:application/javascript;base64,KGZ1bmN0aW9uKCkgewoJdmFyIG5vb3BmbiA9IGZ1…gpKTsKCQkJfQoJCX0KCX0pKCk7Cgl3aW5kb3cuX2dhcSA9IGdhcS5xZiA9IGdhcTsKfSkoKTs=' because it violates the following Content Security Policy directive: "script-src https://.twitter.com: https://a.disquscdn.com .services.disqus.com: https://c.disquscdn.com http://.twitter.com: https://apis.google.com/js/api.js http://a.disquscdn.com https://cdn.syndication.twimg.com/tweets.json https://.services.disqus.com: https://connect.facebook.net/en_US/sdk.js https://referrer.disqus.com/juggler/ 'unsafe-eval' a.disquscdn.com http://disqus.com https://ssl.google-analytics.com https://disqus.com".
I first thought Disqus is doing something stupid, but I found this article which makes me think I'm doing something wrong, like using jquery to load Disqus. But I don't see what is causing the problem.
Another thought I had is, that maybe my cookie banner or privace badger is causing problems, but Privacy Badger is configured to only block google analytics on the site and even allowing that, doesn't make it work.
Also everything works as intended when running jekyll serve locally.
And I excluded the cookie banner as the source of the problem, by removing it temporarly, without any effect on Disqus
I don't think this SO question is the same problem, because I don't have an iframe.
My actual question consists of three parts:
How do I debug such a problem?
What is the root cause of the problem?
And how do I fix it?

In your disqus_config, you have:
this.page.url = 'http://blog.schauderhaft.dehttp://blog.schauderhaft.de/';
because of the combination of a hardcoded base URL and | prepend: site.url in _includes/disqus.html:
this.page.url = 'http://blog.schauderhaft.de{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}';
This should work fine:
this.page.url = '{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}';
The CSP error should disappear if you disable all extensions. It might be an attempt by Disqus to work around blockers that they don’t test properly with CSP enabled; hard to tell without the source.

Related

Content Security Policy: Couldn’t parse invalid host http://localhost/static/css

I am using Django with Nginx. My dev enviornment mirrors my prod environment. In development I go through Nginx to access Django in local dev (using docker-compose). Now I am working on making my website more robust security-wise as per Mozilla Observatory. My site it a B right now. The big thing I am working on next is getting the Content Security Policy (CSP) for my website configured. Not only do I want to get my site to an A because gamification, I also want to avoid having XSS attack planes.
After some searching I found Django CSP which looks great. I installed it, added the middleware, and then add some CSP configuration in my settings.py like this:
CSP_DEFAULT_SRC = ("'none'")
CSP_FONT_SRC = ("https://fonts.gstatic.com")
CSP_IMG_SRC = ("'self'", "https://www.google-analytics.com")
CSP_SCRIPT_SRC = (
"'self'",
"https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js",
"https://code.jquery.com/jquery-3.2.1.slim.min.js",
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js",
"https://www.google-analytics.com/analytics.js",
"https://www.googletagmanager.com/gtag/js",
"https://www.googletagmanager.com/gtm.js;",
)
CSP_STYLE_SRC = (
"'self'",
"https://fonts.googleapis.com/",
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/",
)
I fire up my website in local dev and I see this error message in Firefox dev tools:
Content Security Policy: Couldn’t parse invalid host 'http://localhost/static/css/
Why is localhost invalid? Is it that CSPs do not really work in development? I'd really prefer not to "test my CSP code live" in production if I don't have to. Is there a workaround for this? I have searched a bit and I have not really found anything. This question has the exact error message but it seems to be more related to potential malware in browser extensions. I am guessing there is additional config I can tweak to get the CSP to recognize 'localhost' as valid but I am unsure where to look next. Any help is appreciated! Thanks.
Update: I am now seeing the site work in Dev with the new CSP in Edge, Safari, and Chrome. The only place it is broken is with Firefox. I cleared the cache and did a hard refresh but it is still saying localhost is not valid.

Stripe Connect Express - Callback URI for Localhost Doesn't Seem to Work

I'm trying to set up a platform that uses Stripe, and since I need marketplace type of setup I'm using Connect, which does payments and payouts.
I'm testing on local and the redirect URLs I've tried don't seem to work. After registering with Stripe, I'm still taken to their default redirect URI, which says:
Congrats, you're almost done setting up your application! After
connecting with Stripe, your users will be redirected to a page of
your choosing (this is just the default). Make sure to change the test
redirect URI under your application settings to something that makes
sense on your own server (or localhost).
However, I have tried all of these as redirect URIs in my Stripe Connect Dashboard, under the 'testing' option:
http://localhost:8000/test-stripe/connect/default/oauth/test
http://localhost:8000/test-stripe/oauth/callback
http://localhost:8000/test-stripe/
These are supposed to be the URI that Stripe redirects back to on my site, with an added parameter at the end.
Am I missing something? I find their documentation labyrinthine, as you have to click on link after link to get one part of their solution working, and then see if you can find your way back to where you left off. Maybe I missed something along the way.
The test link to Stripe:
<script
src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8="
crossorigin="anonymous"></script>
<h2 style="margin-top:50px;">Testing Stripe...</h2>
{% csrf_token %}
<a id="test-stripe" href="https://connect.stripe.com/express/oauth/authorize?redirect_uri=https://stripe.com/connect/default/oauth/test&client_id=ca_FXp5f7CsYa0ddYm2Jri4zflYuMIPp5wT">stripe</a>
<script>
var token = $("input[name=csrfmiddlewaretoken]").val();
var stripeLink = document.getElementById("test-stripe");
stripeLink.href = stripeLink.href + "&state="+token;
</script>
Thanks in advance for any tips.
Solved. I still had Stripe.com's redirect_uri parameter in the URL - oops.

Django,debug True or False

I try to follow tutorial from Udemy,Learning Django from Scratch.I have come to this point
OK,then I change DEBUG in settings file to False.After that at localhost
Not Found
The requested URL / was not found on this server.
Why?
If your question is why you are seeing different response depending on the value of DEBUG, then the answer is that when DEBUG is True, Django will present you with the stack traceback so that you can debug what is going on and fix the problem.
But when the DEBUG is false, it means that your app is live and users can access it. You don't want to show your users all the traceback of your application if some error happens.
If that's not your question, the answer is that you just don't have that path configured in your app.
Hope it helps.
It's simple: there is no rule which match the "/" (root) route.
Add one in your urls module.
See: Django 404 error-page not found
Since there is nothing after localhost:8000, it is trying to look for a url with regex "^/". Your website does not actually have that pattern. The patterns your site does have are provided in the error message "^/store", "^/accounts", etc.
If you were to type localhost:8000/store into the url, it would try and find a matching url following the patterns in the webapp following the "^/store" pattern (presumably named store) store/urls.py.
If you would like to access a page at localhost:8000, you will have to add a new pattern to the list in your root directory's urls.py file.

GET request 200 OK but 'failed to load response data' for links

I made a personal website (http://www.soyoungpark.online) using domain bought from GoDaddy and hosted on AWS s3. I set up everything and thought things were working until I put a simple link to my linkedin profile. When I check the network panel, I see that status code is 200 OK but for the response..there is nothing. The code itself doesn't seem to be problematic; it is simple a with href of the desired link. So I am guessing something could be wrong with my AWS s3 settings? Anyone with similar experience?
It's likely that these services include a header option called "X-Frame" that for security prevents them from being loaded within another site:
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object> . Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites. Source: X-Frame-Options
This does look to be the case when attempting to view Linkedin per your example:
Refused to display 'https://www.linkedin.com/in/exampleuser' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
That said, applying a target Attribute to each to open in a new tab or window should allow these outside services to be navigated to.
e.g:
<a href="https://www.linkedin.com/in/exampleuser" target="_blank">

What is the .. css source showing up in Chrome Inspector when using Zurb Foundation 4?

I'm using Foundation 4 (the Sass version) and most elements have styles applied to them that are coming from a source listed simply as ... When I click on it to see what it is I get the following:
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<html><head>
<title>401 Authorization Required</title>
</head><body>
<h1>Authorization Required</h1>
<p>This server could not verify that you
are authorized to access the document
requested. Either you supplied the wrong
credentials (e.g., bad password), or your
browser doesn't understand how to supply
the credentials required.</p>
</body></html>
What is this source? Shouldn't everything be compiled into foundation.css?
Check your server: If you put an image (foo.jpg) in your directory, can you open it and see it in your browser? I don't have enough details to help you (OS, server, ...) but you probably need to look this way. If the file aren't opening, you have problems in your server config or file permission!
(#admins : sorry, it should be a comment but it seems I don't have sufficient rep to reply to the comment)
I just noticed that whenever .. shows up in Inspector the line number shown matches that of thee selector in the .scss file. I have no idea how this works, or what exactly is responsible for this.
Oh! Just figured it out! It was the experimental SASS support feature which I had enabled in Chrome!
Mystery solved.