CSP (Content-Security-Policy) Introduction for your HTML page.

Hey folks!

Ever wondered what this tag means in your HTML page?

<meta http-equiv=”Content-Security-Policy” content=”script-src ‘self’ ‘unsafe-eval’ ‘unsafe-inline’ ; font-src ‘self’; ” …. >

 

Its basically a way to white-list a certain website/domain to access your page. By setting this up, for any reason a script was loaded to your page and sourcing a certain file from unknown domain, then browser will stop it from doing so.

As you might have guess, its for security purposes. I have to consider it while developing a cordova app. As Android and iOS have some stuff(required) in it  for it to actually work plus it makes your application a bit more secure. Of course in general when you are building a website its nice to know these things 🙂

Below is a brief explanation about it. And if you dont understand what I mean, check the link below and you’ll get the gist of it.

For example: script-src ‘self’ https://mysite.com htts://site2.com
This means only a script from ‘self’ (local) and a script from mysite.com and https://site2.com is able to be included and run. But there is also another thing to be aware of, any script from the allowed domain cannot run any on* code or eval() code. Just in case your trusted domain try anything to change how your site behaves.

 

To allow them to do so and you trust them completely. You must add ‘unsafe-eval’ and ‘unsafe-inline’ and this becomes

 

script-src ‘self’ https://mysite.com htts://site2.com ‘unsafe-eval’ ‘unsafe-inline’

 

There is a directive called ‘default-src’ meaning this becomes a default for any other directive you did not specify. For example style-src, font-src, img-src etc. If the policy does not match your default-src then the browser wont allow it.

 

To learn more about this
Go to this link:

 

Very informative and easy explanation to boot.

 

Leave a Reply

Your email address will not be published. Required fields are marked *