Are you using CSP Headers with Flarum ?

clarkwinkelmann

Hi,

Anybody using Flarum with CSP headers enabled ? I'm currently configuring my forum to only allow https images loading.

Here are the rules I use (nginx):

add_header Content-Security-Policy "default-src 'self' https://analytics.kilowhat.net; script-src 'self' 'unsafe-inline' https://analytics.kilowhat.net https://cdnjs.cloudflare.com; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com; font-src 'self' https://fonts.gstatic.com; img-src 'self' https://analytics.kilowhat.net https://cdn.jsdelivr.net https:;";

From what I've seen at the moment the following is required for a base Flarum install:

default-src 'self';
script-src 'self' 'unsafe-inline';
style-src 'self' 'unsafe-inline' https://fonts.googleapis.com;
font-src 'self' https://fonts.gstatic.com
img-src 'self' https://cdn.jsdelivr.net

fonts.googleapis.com and fonts.gstatic.com are required to load Google Fonts. cdn.jsdelivr.net is required to display emojis. 'unsafe-inline' is required to run the bootstrap javascript code on the page. I'm not sure where there is some arbitrary CSS code, but I also had to enable 'unsafe-inline' for the styles.

I also have the Analytics extension linked to my Piwik instance on analytics.kilowhat.net, so I had to add that domain to the default, script and image rules as well.

Then I have my new Emoji Picker extension, which automatically loads emojione libraries from cdnjs.cloudflare.com (#1). I will need to investigate that, it should probably not happen. The original jquery plugin also use a data: image in the CSS, which is hidden by my extension but still triggers a CSP message (#2).

The last part is the real reason to write all this: https: for the images. I will replace this with a CDN when I'll finally use an Upload extension.

Do you have CSP enabled on your server ? What rules did you use ?

I'll create another discussion for my thoughts about inclusion in the core. Link coming.

Davis

clarkwinkelmann The last part is the real reason to write all this: https: for the images. I will replace this with a CDN when I'll finally use an Upload extension.

https://discuss.flarum.org/d/2649-davis-secure-https Worth noting.

clarkwinkelmann

Davis yes that extension is great ! I went with the CSP because it covers a lot more cases at once (and I like making dangerous changes to my server security headers), but I might use an extension like that to actually warn the users of the reason their media does not display ?

0E800

clarkwinkelmann
Not sure if I am doing this correctly. I add that line here?

location /flarum {
        add_header Content-Security-Policy "default-src 'self' https://keys-daggers.org; script-src 'self' 'unsafe-inline' https://keys-daggers.org https://cdnj$
        deny all;
        return 404;
    }

clarkwinkelmann

I put it directly in the server {} block. And you may want to start with add_header Content-Security-Policy-Report-Only [your rules] first, so it does not break the site, just displays warnings in the dev console ?

0E800

clarkwinkelmann

add_header Content-Security-Policy-Report-Only
"default-src 'self' https://www.google.com https://*.youtube.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.keys-daggers.org https://www.google.com https://www.gstatic.com https://cdnjs.cloudflare.com;
style-src 'self' 'unsafe-inline' https://netdna.bootstrapcdn.com https://fonts.googleapis.com https://cdnjs.cloudflare.com; img-src * data:;
font-src 'self' https://fonts.gstatic.com https://netdna.bootstrapcdn.com;
connect-src 'self';
media-src 'self';
object-src 'self';
form-action 'self';
upgrade-insecure-requests;
block-all-mixed-content;
report-uri  https://keysdaggers.report-uri.io/r/default/csp/reportOnly;";

This lets me load imgur and youtube. Also allows for Google Captcha and Sign in from google extensions.
Need to test if it actually prevents anything like pixel tracking.

Reference:
https://diogomonica.com/2015/12/30/creating-a-csp-policy-from-scratch/
https://content-security-policy.com/#source_list

0E800

clarkwinkelmann
It did not prevent Grabify from tracking the IP address.
Workflow:
Create imgur image, copy the direct link.
Goto http://grabify.link/
Paste Imgur link, click on Create Url
Create post on Flarum forum
Use [img]shortened grabify link[/img]
Alternatively you can use [url]shortened link[/url]
Both will track the user. Image loads and tracks user or user click on link.

Not sure how to prevent this.

tlalok

This is my rules for my forum mondedie.fr

Content-Security-Policy-Report-Only:
  default-src 'none';
  script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.mondedie.fr https://cdnjs.cloudflare.com;
  style-src 'self' 'unsafe-inline' https://fonts.googleapis.com https://cdnjs.cloudflare.com;
  img-src * data:;
  font-src 'self' https://fonts.gstatic.com;
  connect-src 'self';
  media-src 'self';
  object-src 'self';
  form-action 'self';
  upgrade-insecure-requests;
  block-all-mixed-content;
  report-uri https://mondediefr.report-uri.io/r/default/csp/reportOnly

Sanguine

tlalok script-src 'self' 'unsafe-inline' 'unsafe-eval'

Thanks for sharing. Which part of Flarum/extension requires unsafe eval?

clarkwinkelmann

0E800 is that your actual CSP configuration ? You are allowing all images to be loaded with it ?

clarkwinkelmann

Are you sure your CSP header is active ?

From the tests I've made (Firefox) the browser never tries to fetch the resource at all if it's blocked by the CSP. It's how it is supposed to work I believe.

From what I've read there might be issues with Internet Explorer when URLs have no extensions and it tries to guess file type (or something like that). It's why there's the MIME-Sniff header or something.

For links there's not much you can do, in particular if the Grabify link is hidden behind a shortener...

0E800

clarkwinkelmann
I think that because I allow Google (for auth) it also is allowing goo.gl shortened links.
Thinking of trying to create a NGINX blacklist conf to include the IP for grabify.link.

Update:
On my tests, using Firefox. On my desktop, Firefox does not render the grabify images, so unless I click on a link that directs me to the grabify url, my IP is not recorded.
Using Chrome on the Mobile phone, it automatically appends the correct image extension and loads the tracked image - recording my IP in the grabify log.
I tried to get the IP for grabify.link which was determined to be 13.73.105.78; and block it using nginx deny. However im not sure I have the correct IP.

Going to try to disable google links to see if it prevents goo.gl shortened urls.

clarkwinkelmann

If goo.gl is not in the CSP, it should not be loaded.

How are you blocking an image client-side with an NGINX rule ? From what you said I understand you blocked the Grabify server from accessing yours - but this never happen as it is your users accessing Grabify servers that cause problem.

It's strange if CSP do not work in Chrome...

0E800

clarkwinkelmann

Okay I updated my config. Thank you for troubleshooting ?

add_header Content-Security-Policy
"default-src 'self' https://www.google.com https://*.youtube.com;
script-src 'self' 'unsafe-inline' 'unsafe-eval' https://*.keys-daggers.org https://www.google.com https://www.gstatic.com https://cdnjs.cloudflare.com;
style-src 'self' 'unsafe-inline' https://netdna.bootstrapcdn.com https://fonts.googleapis.com https://cdnjs.cloudflare.com;
img-src 'self' https://*.imgur.com https://*.ssl-images-amazon.com https://cdn.jsdelivr.net data:;
font-src 'self' https://fonts.gstatic.com https://netdna.bootstrapcdn.com;
connect-src 'self';
media-src 'self';
object-src 'self';
form-action 'self';
upgrade-insecure-requests;
block-all-mixed-content;
report-uri  https://keysdaggers.report-uri.io/r/default/csp/reportOnly;";

clarkwinkelmann

Yep

0E800

Added https://*.ssl-images-amazon.com to img-src so that users can post amazon book cover images.

0E800

@clarkwinkelmann
Are your CSP preventing the forum from being displayed in IE11 / Edge?

From: http://caniuse.com/#search=csp

Is there a way I can have both X-Content-Secuirty-Policy and Content-Security-Policy headers?

From: https://docs.microsoft.com/en-us/microsoft-edge/dev-guide/security/content-security-policy

The latest preview release (EdgeHTML 15.15002) of Microsoft Edge supports Content Security Policy Level 2, which extends and replaces the original Content Security Policy (Level 1) support in the current stable public release.

clarkwinkelmann

0E800 I see no reason for the site to break in IE because of that. If it doesn't support it, it will simply ignore the rules.

However, I didn't test and don't care at all. That's the forum for a game that is only supported on Chrome and Firefox ?

Same for X-Content-Security-Policy and Content-Security-Policy, why would anything break ? If a user-agent doesn't understand a header, it drops it. The only problem might be if the two headers are set with different values... You will need to check the order in which user-agents read them.

From what I've read it was actually recommended to have both headers to support the most browsers ?

0E800

clarkwinkelmann
Would you mind sharing your game forum site address so I can test? If it's not the CSP preventing it from working, it could be the custom Landing Page extension code that's causing my issue.

Thanks again.

clarkwinkelmann

0E800 it's called ZetaMode but it's in closed beta and currently on hold ? Also, it's in French ??

I've seen your post in another topic (don't remember which one) and that's right, there could be a problem between versions of CSP. IE may be trying to read CSPv2 rules as CSPv1 and fail.

Do you get an actual error? How do you know it's not working?

0E800

clarkwinkelmann

Your site is beautiful. I like the color pallete.
On the forum, your language switcher, is that an extension?

0E800

Here is a comparison:

I dont believe the ! message about cache is what is causing it.

Upon inspecting your site I do notice a differnce, besides your page loading.

On my site I get:

HTML1300: Navigation occurred.
dnserror.html

Yours:

HTML1300: Navigation occured. 
zetamode.com

clarkwinkelmann

0E800 that's strange... In the meantime I don't expect IE to give ample details on the matter...

Love the "Fix connection problem" like always ?

I shared the homepage of my project, it does not have any CSP rules (It's a GitHub Pages site going through Cloudflare). The actual forum is at https://forum.zetamode.com/ (it's member-only so you can't see any post)

clarkwinkelmann

0E800 I just checked and I can confirm your website works in IE11 (In the official Microsoft VM).

However, it does not work in Firefox ? Your CSP does not allow external fonts and inline scripts, which destroys the homepage ?