Top Banner
Content Security Policy featuring ember.js
43

Content Security Policy

Jul 16, 2015

Download

Technology

Ryan LaBouve
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Content Security Policy

Content Security

Policyfeaturing ember.js

Page 2: Content Security Policy

WHOAMIRyan LaBouve (@ryanlabouve)

Page 3: Content Security Policy
Page 4: Content Security Policy

HOLYARCHERS

Page 5: Content Security Policy

RyanLaBouve.com

Page 6: Content Security Policy

Thinking about a new side-project

Page 7: Content Security Policy

Fire up `ember new`

Page 8: Content Security Policy

(wait on NPM and Bower)

Page 9: Content Security Policy

`ember serve`

Page 10: Content Security Policy

Sparkling new project!

Page 11: Content Security Policy

But wait!?!?

Page 12: Content Security Policy

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

Page 13: Content Security Policy

What is Content Security Policy?

Page 14: Content Security Policy

XSS Mitigation Strategy

using a whitelist based approach.

Page 15: Content Security Policy

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

javascripts on your page.

Page 16: Content Security Policy

How CSP helps?deliver policy via http header with

information about what is allowed to execute on your site.

Page 17: Content Security Policy

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

CSP in the wild

Page 18: Content Security Policy

Response body (has the html/css/js)

Page 19: Content Security Policy

Response Header has (various meta-data)

Page 20: Content Security Policy

CSP in the wild

Page 21: Content Security Policy

How to implement and customize CSP

Page 22: Content Security Policy

Series of Directives

Page 23: Content Security Policy

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)

Page 24: Content Security Policy

Each attached to HTML elements

Page 25: Content Security Policy

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

Page 26: Content Security Policy

self none *

unsafe-inline unsafe-eval

example.url.com

Values to Describe Policy

Page 27: Content Security Policy

Space delimited sources to match http header syntax

semi colon end of line

About the Values

Page 28: Content Security Policy

selfAnything you’re including locally

Page 29: Content Security Policy

unsafe-inlineAnything happening by your content

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

Page 30: Content Security Policy

unsafe-eval

setTimeouteval

not as big a deal as unsafe inline

Page 31: Content Security Policy

Custom TemplatesNot executing. No problem.

Page 32: Content Security Policy

Other Values

*— Anything Goes

none— Nothing Goes

url— can specify ports, protocols, wildcards, etc

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

Page 33: Content Security Policy

A few quick examples:

Page 34: Content Security Policy

Serve nothing at all

Page 35: Content Security Policy

Serve everything ever

Page 36: Content Security Policy

Only serve local assets … a good starting spot

Page 37: Content Security Policy

Build up slowly as needed

Page 38: Content Security Policy

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

mostly about XSS

Page 39: Content Security Policy

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

Page 40: Content Security Policy

Report only, callback url,

block

Options for Enforcing

Page 41: Content Security Policy

Wanna try it out? Try report only mode and tweak

as you go

Page 42: Content Security Policy

Browser Compatibility

Issues

Page 43: Content Security Policy

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/