Content Security

Policyfeaturing ember.js

WHOAMIRyan LaBouve (@ryanlabouve)

HOLYARCHERS

RyanLaBouve.com

Thinking about a new side-project

Fire up `ember new`

(wait on NPM and Bower)

`ember serve`

Sparkling new project!

But wait!?!?

ENTER CSPContent-Security-Policy: ‘take-that.xss’

What is Content Security Policy?

XSS Mitigation Strategy

using a whitelist based approach.

What is XSS?people trying to execute malicious (usually?)

javascripts on your page.

How CSP helps?deliver policy via http header with

information about what is allowed to execute on your site.

When we request a webpage, we get a response that has a header and a body

CSP in the wild

Response body (has the html/css/js)

Response Header has (various meta-data)

CSP in the wild

How to implement and customize CSP

Series of Directives

default-src script-src*** object-src style-src img-src media-src frame-src font-src

connect-src (script-src key directive for blocking

scripting)

Each attached to HTML elements

script-src <script>

object-src <object>, <embed>

style-src <link rel=“stylesheet”>, <style>

img-src <img>, images in css

media-src <audio>, <video>

frame-src <iframe>, <frame>

font-src @font-face

connect-src XMLHttpRequest, JS APIs

self none *

unsafe-inline unsafe-eval

example.url.com

Values to Describe Policy

Space delimited sources to match http header syntax

semi colon end of line

About the Values

selfAnything you’re including locally

unsafe-inlineAnything happening by your content

Better to “separate code and data”This includes inline event handlers

unsafe-eval

setTimeouteval

not as big a deal as unsafe inline

Custom TemplatesNot executing. No problem.

Other Values

*— Anything Goes

none— Nothing Goes

url— can specify ports, protocols, wildcards, etc

http://content-security-policy.com/

A few quick examples:

Serve nothing at all

Serve everything ever

Only serve local assets … a good starting spot

Build up slowly as needed

Focus on script-src …especially if you’re worried

mostly about XSS

mitigate XSS …a more complete plan * move inline script out-of-line * remove inline event handlers * Remove use of eval and friends

(not as big) * Add the script-src directive

Report only, callback url,

block

Options for Enforcing

Wanna try it out? Try report only mode and tweak

as you go

Browser Compatibility

Issues

Resources

http://www.html5rocks.com/en/tutorials/security/content-security-policy/

https://developer.chrome.com/extensions/contentSecurityPolicy

http://en.wikipedia.org/wiki/Content_Security_Policy

https://www.youtube.com/watch?v=pocsv39pNXA

https://blog.justinbull.ca/ember-cli-and-content-security-policy-csp/