Prevent XSS Attacks using Content Security Policy

Code Atom

4.89/5 (4 votes)

Aug 22, 2017

CPOL

2 min read

10390

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations.

Today, I am working my project and make a script that downloads the other scripts. To test script working fine, I'm trying to run this script in the console of opened website. I tried it on my own website, it works fine but when I try to run the script in Gmail website console, I got an error:

Refused to load the script 'http://abc.com/abc.js' 
because it violates the following Content Security Policy
?directive: "script-src https://clients4.google.com/insights/consumersurveys/
?https://www.google.com/js/bg/ 'self' 'unsafe-inline' 'unsafe-eval' 
?https://mail.google.com/_/scs/mail-static/ 
?https://hangouts.google.com/ https://talkgadget.google.com/
?https://*.talkgadget.google.com/ 
?https://www.googleapis.com/appsmarket/v2/installedApps/
?https://www-gm-opensocial.googleusercontent.com/gadgets/js/ 
?https://docs.google.com/static/doclist/client/js/ 
?https://www.google.com/tools/feedback/ 
?https://s.ytimg.com/yts/jsbin/ 
?https://www.youtube.com/iframe_api 
?https://ssl.google-analytics.com/ 
?https://apis.google.com/_/scs/abc-static/ 
?https://apis.google.com/js/ 
?https://clients1.google.com/complete/....".

I saw this error in console screen, so I tried to find out why Gmail doesn't allow me. In error, I found the Content security policy. This is the property who tells the browser which content needs to be download on a page.

The Content-Security-Policy meta-tag allows you to reduce the risk of XSS attacks by allowing you to define where resources can be loaded from, preventing browsers from loading data from any other locations. This makes it harder for an attacker to inject malicious code into your site.

To add content security policy on your site, what you have to do is to add a meta tag in a head for pages.

<meta http-equiv="Content-Security-Policy" 
content="default-src 'self'">

or in a server response (in web.config):

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Content-Security-Policy" value="default-src 'self';" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

The most common directives are:

default-src the default policy for loading JavaScript, images, CSS, fonts, AJAX requests, etc.
script-src defines valid sources for JavaScript files
style-src defines valid sources for CSS files
img-src defines valid sources for images
connect-src defines valid targets for to XMLHttpRequest (AJAX), WebSockets or EventSource. If a connection attempt is made to a host that's not allowed here, the browser will emulate a 400error.

There are others, but these are the ones you're most likely to need. You can control various operations in your application using content security policy like the sources from where your contents come to your website.

I know this one way to protect our website from XSS attack. if you have any XSS prevention technique, please share it on comments.

Thanks for reading! :)

Prevent XSS Attacks using Content Security Policy

Further Reading