Skip to main content

CSP Prevention (Part 3 CSP Series)

CSP is especially important for your users: they no longer need to be exposed to any unsolicited script, content or XSS threats on your website.

The most important advantage of a CSP for a website maintainer is perception. If you set strict rules on the source of the picture, a script kid tries to insert an image of an unauthorized source on your website, then the picture will be banned, and you will receive a reminder as soon as possible .

Developers also need to know exactly what their front-end code is doing, and CSP can help them control everything. Will prompt them to refactor parts of their code (avoid inline functions and styles, etc.) and prompt them to follow best practices.


There are a few simple ways to prevent CSP based attacks.

Adding policies through meta tags: The preferred setting method for CSP is the HTTP header, which is very useful, but it is more straightforward to set through tags or scripts. WebKit has implemented the feature of setting permissions through meta elements , so you can now try the following settings in Chrome: add <metahttp-equiv = "X-WebKit-CSP" content = "[POLICY GOES HERE]" in the header of the document >.

DOM API: If this feature is added in the next iteration of CSP, you can query the current security policy of the page through Javascript and adjust it according to different situations. For example, if eval () is available, your code implementation may be slightly different.


Content security policy applies to all common resources

  1. content-src: limit the type of connection (such as XHR, WebSockets, and EventSource)
  2. font-src: Controls the source of web fonts. For example, you can use Google's web fonts through font-src
  3. img-src: defines the source of the loadable image.
  4. media-src: Restrict video and audio sources.
  5. object-src: Restrict sources of Flash and other plugins.
  6. style-src: Similar to Script-src, but only works on css files.


Under the CSP 1 specification, you can also set the following rules:

  1. img-src Valid image source
  2. connect-src Apply to XMLHttpRequest (AJAX), WebSocket or EventSource
  3. font-src Valid font source
  4. object-src Effective plug-in source (eg, , , )
  5. media-src Valid and source

The CSP 2 specification contains the following rules:

  1. child-src Valid web workers and element sources, such as and <iframe> (this directive replaces the obsolete frame-src directive in CSP 1 )
  2. form-action Can be a valid source of HTML actions
  3. frame-ancestors Use , <iframe>, , or useful source embedded resources
  4. upgrade-insecure-requests Command the user agent to rewrite the URL protocol and change HTTP to HTTPS (for some websites that need to rewrite a lot of stale URLs).