QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads Content Security Policy Tutorial with Examples

Content Security Policy Tutorial with Examples

content-security-policy

I have talked a lot about Same Origin Policy in one of my post on “Same Origin Policy”. Same Origin Policy prevents my kinds of attacks and provides a secure environment for web developers to build web applications. But in that post I also explained some ways by which we can bypass same origin policy. So we can say the same origin policy provided by the browser is not enough to prevent XSS attacks. In this post we will look at Content Security Policy which can block XSS attacks and provide more security layer to Same Origin Policy.


What is Content Security Policy(CSP)?

CSP is a technique by which website administrator provides lists of trusted sources to the browser from which content like JavaScript, CSS, HTML Frames, Fonts, Images and embeddable objects (Java applets, ActiveX, Audio and Video) can be loaded into a page.

Sources information can be provided to browser via HTTP response header or meta tags.

Passing sources list via HTTP Header

HeaderChromeFirefoxSafariIE
Content-Security-Policy25+23+7+–
X-Content-Security-Policy–4.0+–10+
X-Webkit-CSP14+–6+–

We can provide source list to browser via the above headers. For compatible in all browser we can use Content-Security-Policy and X-Content-Security-Policy together.

Passing sources list via Meta tags

In meta tag attribute http-equiv we can assign the header name and assign content attribute to header value.

Directives

We need to assign CSP header a list of directive and associated a directive value. Directive represent content type and its value represents trusted source.

These are the directives for CSP:

  • default-src: Sources for all types of content
  • script-src: Sources for javascript files
  • style-src: Sources for stylesheets
  • img-src: Sources of images
  • connect-src: Sources for XMLHttpRequest, WebSocket and EventSource
  • font-src: Sources for fonts
  • object-src: Sources for <object>, <embed> and <applet>
  • media-src: Sources for <audio> and <video>
  • frame-src: Sources for frames
  • sandbox: Browser treats the page like it is loaded inside a sandboxed iFrame. To learn more about sandboxed iFrame follow this links Link1 Link2
  • report-uri: Browser posts a report on policy failures to specified URL. We can also append “-Report-Only” to the CSP header to not block anything just send reports.

Directive Values

All those attributes that end with -src support values called as source list values.

  • * -> Wildcard, allows everything.
  • ‘none’ -> Prevents loading resources from any source.
  • ‘self’ -> Allows loading resources from the same origin (same scheme, host and port).
  • data: -> Allows loading resources via the data scheme (example: Base64 encoded images).
  • domain.example.com -> Allows loading resources from the specified domain.
  • *.example.com -> Allows loading resources from any subdomain under example.com
  • https://my.example.com -> Allows loading resources only over HTTPS matching the given domain.
  • https: -> Allows loading resources only over HTTPS on any domain.
  • ‘unsafe-inline’ -> Allows use of inline javascript. I will get more into it later.
  • ‘unsafe-eval’ -> Allows use of dynamic code evaluation.

For sandbox directive we can pass the following values:

  • allow-forms -> This allows submission of forms in the page.
  • allow-same-origin -> In sandboxed mode document has no access to its origin cookies or any other storage. This value allows use of cookies and other stored data for the origin.
  • allow-top-navigation -> Allows use of window.top.location and target=”_top”. Without this value there will be no effect.
  • allow-scripts -> Allows script execution.
  • allow-popups -> Sandboxed document will create new window or dialogs when window.open and target=”_blank” is used. This value allows creation of new windows and dialogs.

‘unsafe-inline’ and ‘unsafe-eval’ values

If CSP header is included in the HTTP response than browser doesn’t allow inline javascript and dynamic code evaluation.

Inline javascript comprises of <script></script>, onclick attribute and href values starting with “javascript:” are blocked. Browser forces all javascript to reside in separate files served from a trusted domain. We can bypass this restriction by assigning script-src attribute to unsafe-inline value.

Dynamic code evaluation comprises of use of eval() function and string arguments for both setTimeout and setInterval. Thus restriction can be bypassed by assigning script-src attribute to unsafe-eval.

Points to remember

Multiple values can be space separated.
* and ‘none’ cannot be used with any other values.
‘self’, ‘none’, ‘unsafe-inline’ and ‘unsafe-eval’ needs to be put inside single quotes.

Examples

If we keep the CSP header empty than it follows Same Origin Policy only. And it still it restricts inline and dynamic javascript.

Content-Security-Policy:

If we want to allow everything from the same origin and execution of inline and dynamic javascript. Then,

Content-Security-Policy: default-src 'self'; script-src 'unsafe-inline' 'unsafe-eval'

or

<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'unsafe-inline' 'unsafe-eval'">

If the page is loaded inside an iFrame or not but you want to make it sandboxed and also allow form submission and data access. Then,

Content-Security-Policy: sandbox allow-forms allow-same-origin

For development purpose you might not want to want to block anything but only get reports on possible blocks. Than

Content-Security-Policy-Report-Only: report-url /report-csp.php

You want to block and also get reports then:

Content-Security-Policy: report-url /report-csp.php


Conclusion

CSP provides the best XSS protection. I tried to cover all possible directives and values related to CSP. You can try playing around with it. And also I recommend you to use CSP to protect your websites.

Apr 24, 2014Narayan Prusty
Monitoring and Intercepting all AJAX RequestsAutomatically Resizing Textarea
Comments: 8
  1. Desert safari offer
    4 years ago

    I am newbie in online field, Your article was very informative for me, can I bookmark your page for next time evening desert safari

    ReplyCancel
  2. Desert safari offer
    4 years ago

    You need to be a part of a contest for one of the highest quality websites on the web. I will recommend this site!

    ReplyCancel
  3. Dubai Visa
    5 years ago

    Thanks for the sharing. Really helpful Information.

    ReplyCancel
  4. Fern
    5 years ago

    Skype has opened its online-centered buyer beta for the world, after
    launching it largely inside the United states and You.K.

    previous this four weeks. Skype for Website also now facilitates Chromebook and Linux for immediate
    text messaging communication (no voice and video yet,
    those call for a plug-in installing).

    The expansion from the beta provides assistance for a longer list of different languages
    to help you reinforce that overseas functionality

    ReplyCancel
  5. Desert safari Dubai
    6 years ago

    Also your website loads up fast!
    What web host are you the usage of?

    ReplyCancel
  6. Dubai Desert Safari
    6 years ago

    Well organized content, i was finding exactly these kind of information for my website.
    Thanks Man !

    ReplyCancel
  7. Dubai Desert Safari
    6 years ago

    Well organized content, i was finding exactly these kind of information for my website.

    ReplyCancel
  8. Anthony Calleja
    6 years ago

    Hello My name is Anthony and I have a Hawaii Photography and I was hoping I could receive some direction on how to set up my content security header for my website. Please help if possible thank you !!

    ReplyCancel

Leave a Reply Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 8 Comments Web Development, Web Securitycsrf, security, xss protection
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • What is Content Security Policy(CSP)?
  • Passing sources list via HTTP Header
  • Passing sources list via Meta tags
  • Directives
  • Directive Values
  • ‘unsafe-inline’ and ‘unsafe-eval’ values
Related Articles
  • Website Hacking Methods and their Prevention
  • Bypass Same Origin Policy
  • Web Animation API Tutorial
  • Capturing Webcam Image Using JavaScript
  • How Does HTTP Authentication Work?
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license