Implementing correct CSP rules for CDN

Question

I'm currently undertaking a introduction to mobile webapplications development course at my university and am struggling setting up bootstrap on my mithril application.

I've previously set up bootstrap fine on "normal" web applications, but I'm struggling understanding how to properly set up Content Security Policy in my Mithril.js application.

It should be noted that this is not a required part of my current assignment, but I'm rather trying to understand the concept of CSP on my own hand since it is a highly important thing to understand (OWASP top 10, yo!).

So I'm not asking for anyone to help me finish an assignment or so, rather to help me understand where I'm going wrong with this extra-curricular application of CSP.

This is how my CSP looks right now:

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval';
         style-src 'self' 'unsafe-inline' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css;
         media-src *; img-src 'self' data: content:;
         script-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
         http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js;">

The CDN urls work fine and are currently implemented accross multiple other websites I've setup, but I'm getting these errors whilst checking the console on Chrome:

Refused to load the script 'http://localhost:8013/cordova.js' because it violates the following Content Security Policy directive: "script-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js".

index.html:1 Refused to load the script 'http://localhost:8013/bin/app.js' because it violates the following Content Security Policy directive: "script-src https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js".

jquery.min.js:2 Refused to load the font 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff2' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ jquery.min.js:2 jquery.min.js:2 Refused to load the font 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.woff' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ jquery.min.js:2 jquery.min.js:2 Refused to load the font 'http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/fonts/glyphicons-halflings-regular.ttf' because it violates the following Content Security Policy directive: "default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'". Note that 'font-src' was not explicitly set, so 'default-src' is used as a fallback.

(anonymous) @ jquery.min.js:2 http://localhost:8013/favicon.ico Failed to load resource: the server responded with a status of 404 (Not Found)

Emil Folino Emil Folino · Accepted Answer · 2017-03-29T05:11:11

Answering this question in our chat as well, but for others here is the short answer. Put your url to the css file in front of 'unsafe-inline', so it is

style-src 'self' bootstrap.css 'unsafe-inline';

And the you need 'self' in script-src prior to jquery and bootstrap.js.

Implementing correct CSP rules for CDN

1 Answers