Content Security Policy, CSP Useful Types

Content Security Policy

You might have been familiar with hackers’ attacks on websites. Cross-site scripting (XSS) attacks, for example, prevent the same origin policy by tricking a website into delivering malicious code in addition to the intended content. It is a major issue because browsers believe that all code on a page is genuinely part of that page’s safety source.

Hackers can use this XSS Sheet to inject malicious code into your websites, and if it happens successfully, it means your website is in hot waters. The attackers can use the website, users’ data, and sensitive information for wrong purposes. It can be dangerous for e-commerce websites as their business can be stacked by these attacks.

Fortunately, today, we have solutions to prevent these attacks. If you are also worried about the security of your website, this article is for you. We will discuss what content security policy is and how it helps make our web content safe.

Let’s find out how we can use it to make it helpful for us. 

What Is CSP, And How Is It Useful?

CSP (content security policy) is a computer security policy that ensures website security. It helps website owners upgrade their online security and improve their user interface. CSP helps them by preventing code-injecting attacks that target web pages that users use to add content, such as checkout pages. Hackers fill up these spaces by adding codes affecting the websites’ overall appearance and functionality. CSP is one solution to all web security problems. Also, read about Pricing Tables.

How Does CSP Work?

CSP works against all security threats by adding the CSP HTTP header to the web page. So whenever users add any content or images, it controls all the users’ resources. Hence it makes the user uploads safer for the website because CSP contains all the resources coming to the website. So that hackers cannot use the users to inject codes into the websites. 

Secondly, CSP also limits the upload of data to websites by users. Users can only do it within a certain limit. It sends the restrictions through directives in the HTTP header through HTML meta tags. This way, CSP takes hold of all the resources users use to share website content. It helps in making website browsing safe and secure.  

Types Of CSP Policy

Basic CSP Policy

This policy significantly improves the security of your website by preventing cross-site framing and cross-site form submissions. For all default-level directives, it will only allow resources from the originating domain to be used and will not allow inline scripts/styles to be executed. If all applications on websites function with these restrictions, hackers will have fewer opportunities to attack them. The basic CSP policy makes sure that;

  • Your site’s domain hosts all the resources. 
  • It does not allow loading images from external resources. 
  • It also forbids other websites from constructing your website. 
  • It does not allow you to submit any forms to external websites.

Increasing the Security of Insecure Requests

If the developer is migrating from HTTP to HTTPS, the following directive ensures that all requests are routed through HTTPS with no fallback to HTTP:

It prevents framing attacks on your websites. It protects the content frame by allowing only the trusted domains. 

Strict CSP Policy 

The role of a strict policy is to protect against traditional stored, evidenced, and all DOM XSS attacks. It should be the primary goal of any team attempting to implement CSP. Also, read Enterprise Messaging UX.

The two policies listed below can be used to enforce a strict policy:

Moderate Strict Policy

script-src “nonce-r4nd0m’ ‘strict-dynamic.’

object-src ‘none’; base-uri ‘none

Locked Down Strict Policy

Script-src ‘nonce-r4nd0m’;

Object-src ‘none; base-uri ; ‘none’;

Restoring Inline Code

CSP disables any JavaScript code placed inline in the HTML source by default when the default-src or script-src* directives are active. For example;


var foo = “314”


When the inline code is moved to a separate JavaScript file, the code on the page becomes:

<script src=”app.js”>


Commonly Used CSPs

CSP directives of various types govern the flow of its policies. Each type has advantages for content security when used correctly and in the right place.

Fetch Directives

Fetch directives aim to share the trusted locations with browsers. Fetch directives have a list specified in w3, and their purpose is to control the sources for all kinds of data shared, like files, images, etc.

  • Font-src tells the right URLs to choose the font.
  • Img-src guides which image URLs should use.
  • Script-src guides the websites to get scripts.
  • Style-src tells you from where you get a style for the document.
  • Media-src tells the URLs to get audio and video. 
  • Child-src is the directive that helps in controlling the nested browsing context.
  • Connect-src it gives control over websockets connections.

Document Directives

Document directives control the use of resources in documents. They allow only safe links to be used in documents. Plugin types control the use of resources in the document, like pdf files. It will ask for the offline type and check whether it matches the declared type. 

Base-uri defines the URLs that the base element uses. 

The sandbox allows only limited actions in the document. It restricts the form submission if it is not specified and works with the request header CSP. Also, read about Modern Web Design.

Navigation Directives

Navigation directives, as the name shows, work with the locations. It gives instructions about the locations where the document can navigate. 

Navigate-to, it limits the URLs that the document can access by any means. 

Form-action constraints the URLs that forms can submit to. 

Reporting Directives

These directives deliver the violation of prohibited behavior to specific places. They have no unique purpose and are supplemented by other derivatives. Also, read about Mobile App Marketing.

Improving the Efficiency of Your Security Policies

To keep the work in fantastic condition, weigh the benefits and drawbacks of any new elements or policies. CSP steps forward to assist websites vulnerable to hacking, but you should check it before making a final decision. Testing this security policy before implementing it on the website is critical. Sometimes a minor error can degrade your website’s user experience.

CSPs are better at preventing malicious attacks on our websites. However, because of the new methods of hacker attacks, it is critical to focus on bringing evaluation. CSP can be combined with other security measures to protect a website completely.

Naomi McCarthy
Naomi McCarthy

More Articles & Posts