CSP

Hello Everyone, Welcome to my blog 🙏. I hope you are all safe and that this blog finds you in good health ❤️.

In my previous blog, we learnt about XSS and How it affected Shiva’s business and we also came across some preventive measures taken by his team to get rid of XSS(Cross-Site Scripting). If you have missed it, please read it here.

In this blog, let’s learn one of the important preventive measures to protect your site from malicious code.—i.e.CSP(Content Security Policy).

Intro

What is CSP? It is an HTTP response header which keeps restrictions on the content that is not relevant to the website to load and only allows files like Javascript, HTML, and CSS that are relevant to the website.

Being an HTTP response header, it can also be applied in the meta tag of HTML and it should be included in the <head> tag or you will end up getting errors in the browsers.

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

It is a security standard introduced to prevent Cross-site scripting (XSS), Clickjacking, and other code injection attacks that can execute malicious scripts on the website or capture sensitive information from the user.

Configuring CSP

Syntax
Content-Security-Policy: <policy-directive>; <policy-directive> policy-directive — It consists of directive & value with no punctuation.

As observed in the above table, default-src is the fall-back for all the other directives, If anything is missed, the user-agent will look for the value in default-src. Although there are some exceptional cases for a few directives as below

script-src-elem & script-src-attr — If these are absent, user-agent will look for script-src and if both are absent, it will look for default-src.

style-src-elem & style-src-attr — If these are absent, user-agent will look for style-src and if both are absent, it will look for default-src.

frame-src — If it is absent, user-agent will look for child-src and if both are absent, it will look for default-src

Use cases

Let’s take a few examples to understand it better.

Scenario — 1

Tony as a website admin wants to restrict content other than his own site’s Content-Security-Policy: default-src ‘self’

Scenario— 2

Steve as a website admin wants to allow content from some trusted domains including sub-domains. Content-Security-Policy: default-src ‘self’ abhishek.com blogs.abhishek.com

Scenario — 3

Barren wants to allow users of a web application to include images from any origin in their own content, but to restrict audio or video media to trusted providers, and all scripts only to a specific server that hosts trusted code. Content-Security-Policy: default-src ‘self’ ; img-src *; media-src wynk.com; script-src abhishek.com

Here we go, That’s it folks for this blog.

I hope everyone liked the blog. If you like it, show your love, and share it with your friend.

For more exciting content on Frontend, Please do follow me 🎯.

Thanks a lot, Everyone 🙏.

Until Next time, Happy Learning ✍️

Abhishek Kovuri, UI developer

#TWBloggersClub

Content Security policy