Website Content Security Policy

How to Get Started with Your Website Content Security Policy?

Website security (Content Security Policy) is increasingly becoming an area of concern for both web developers and web users. More so, with the new wave of web apps, it has become even more relevant to beef up the security of them. Regardless of its primary function, it’s only rewarding to ensure that your web app has the essential security features. One of these features is Content Security Policies.

Website Content Security Policy
Website Content Security Policy

Web Content Security Policies (CSPs)

Web applications are usually susceptible to Cross-site scripting attacks, XSS, among other types of black hat injection threats. Their threat is typically vast and dangerous. Nonetheless, it’s the directive of CSPs to mitigate and ease them. CSPs refer to standard policies or rules that are set by web developers on the web app framework to stipulate what content to load and render to the web user. This is a measure that is undertaken to ensure that malicious data harvesting does not happen to them at any moment. 

It may be hard to know if web your web apps has the necessary measures needed to secure the app for you and your users as well, even after evaluating it the Mozilla Observatory tool. It’s also worth noting that not all web browsers respond to CSPs. Therefore, it’s advised to contact experts that will give you a detailed report of your sites’ vulnerability. One thing to note, however, is that threats such as XSS are hard to block. Then again, with a variety of CSPs, you will be a step forward, if not leading with web security. 

Common Web Vulnerabilities 

1.Cross-site Scripting, XSS

Cross-site Scripting, XSS
1.Cross-site Scripting, XSS

This is a situation whereby your site is exposed to the threat of external content injections with external scripts on the client-side by cybercriminals. These criminals bypass laws such as gaining access controls to the web pages and controlling data and modifying logs.

2.SQL Injections 

Website Security - SQL Injections
2.SQL Injections 

For web apps that have login dialogues set on a different page or pop-ups, they are highly vulnerable to SQL injections. This injection happens where an attacker tricks a client to submit delicate information such as Credit card details by pushing scripts that override the existing one. 

This vulnerability can be erased by whitelisting login fields with trusted service providers and limiting what the client or user sees in case of a login error – this information could be useful to an attacker. 

3.Insecure Cryptographic Storage 

Insecure Cryptographic Storage 
3.Insecure Cryptographic Storage 

Data security is a big concern. As a web app user, or even developer, you need to ensure WHAT, WHERE, and HOW are questions you can answer about data storage. It’s imperative to ensure that data is stored securely with hashes that are not easily cracked. 

4. Failure To Restrict URL Access 

Failure To Restrict URL Access 
4. Failure To Restrict URL Access 

An attacker may modify a URL leading to sensitive content for their gain and expose the client to a data breach. For instance, hackers will change the suffix of a URL to receive the data the user submits instead of it going to the server admin.  

5.Unvalidated Redirects 

Unvalidated Redirects 
5.Unvalidated Redirects 

This issue has happened to many web users. Here, both external and internal links to resources create this vulnerability. An attacker will modify a URL that redirects the client with a slight addition that will lead them to external and malicious sites. To avoid this, it’s advised to reduce redirects on the web app.

As we have seen, its pretty easy for your web app to be vulnerable to cyberbullying attacks if CSPs are not in place. CSPs are like traffic police; they mitigate and report risks of vulnerabilities before they happen. 

Thus, here is how to implement a comprehensive CSP on your web applications – the steps you can take. 

1. Prepare A List of All The Resources That Your Web App Uses

We have already talked about the common resources that your site has, such as text and images. For this part, you will need to map out all of them, such as iframes, audio, video, scripts, stylesheets, and workers. 

To find out the resources on your web app, you can use the developer tool on your browser to inspect the resources or determine them directly from your sites’ analytics provider. 

2. Write a Policy

This step can also be called rule-setting. From the resources you have determined, it’s now upon you or your developer to come up with directives. To start with, default CSPs are set. These defaults act as umbrella policies for any resource. 

For example, the directive script-src is a default CSP that specifies valid sources for JavaScript. This rule falls under default-src in that if it’s not stated, the browser will look for default-src, and still submit to it.

3.Creating a Reporting Directive 

When you are confident that your website or web app features are secured, you need a directive policy that reports an attempt to violate it. A common example is the report-uri. This policy will report direct attacks and not vulnerabilities that are experienced on your web app. 

Most browsers support this directive. However, an improved reporting directive report-to is being championed for, in browsers that support it. 

4.Fixing Violations 

Some violations are legitimate, while others are not. Meaning, a reporting directive might report a particular vulnerability, which to the user, it was not. To account for that, the framework for the web app will need to be revised to adjust the errors. For instance, some web app development frameworks might have restrictions on the users’ control over the CSP. If that happens, you may lose clients relying on your web app. 

5.Deploy CSPs in Strict Mode

After you have fixed and adjusted the directives in test mode, analyzed the possible violations, and fixed them, it’s now time to enforce them in report-only mode. This means any vulnerabilities will be reported directly. 

Deployment is done primarily in two ways; using HTTP headers and meta tags. Depending on the design or preferences, you can choose any of these that fit in with your web app. Nevertheless, whichever method you opt for, it will serve a similar purpose as the other one. The good news is that you can use both if you are unsure of what to go with. More so, the HTTP header is deemed most effective compared to meta elements. The reason HTTP headers are more effective than meta tags is that they are executed before content modification happens.

Strategies To Enforce CSPs 

a. Whitelisting Domains 

Whitelisting is the act of allowing access to entities or privileges to resources. Domain extensions and query strings can be directed on how they interact with your site’s content. By so doing, attackers will be blocked and reported for illegal content modification.

b.Employing Cryptographic Nonces 

A nonce is a random number that’s only used once after it has been cryptographically created to hide trails. Nonces are required with every refresh or page-load that the user executes. With a nonce, an attacker will be unable to successfully affect a user with an injection, since full access will be unavailable for them without the nonce used. 


Hashes are also untraceable alternatives to nonces. A hash function is used to provide fixed-size value from keys. In this case, a developer can create a hash that executes a CSP rule. Failure to provide the hash value, the CSP will mitigate the vulnerability and report it as a violation. Hence, hashing is undoubtedly a strategy worth incorporating in your CSP implementation.


There is a fine line between vulnerability and risk when web security is in context. Even so, vulnerabilities are the root of risks. In fact, the risk is defined as the product of threat and vulnerability. But what does that mean? Web apps are created by relying on open-source code libraries. This fact means they are susceptible to modification even after others have built on them. However, we are not implying that your web app is unsafe if created by open source libraries. In short, employing CSPs for large web apps can be difficult. Though, with a checklist and a laid-out plan such as the one above, you will be steps ahead in terms of content security for you and your clients. 

Web App Frameworks Documentation
12 Feb 2020
Mobile App Development Trends
10 Mar 2020

Leave a Reply

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

Insights & Inspiration

Keep up to date or learn a new skill with our website design and development content.