how to fix CSP vulnerability

Content-Security-Policy: default-src 'self'; 
    script-src 'self' https://cdnjs.cloudflare.com 'sha256-...'; 
    style-src 'self' https://fonts.googleapis.com; 
    img-src 'self' data:; 
    font-src 'self' https://fonts.gstatic.com; 
    object-src 'none'; 
    frame-src 'self'; 
    connect-src 'self' https://api.example.com;
    report-uri /csp-report

default-src: Fallback for all resource types.
script-src: Defines valid JavaScript sources.
style-src: Defines valid CSS sources.
img-src: Defines valid image sources.
font-src: Defines valid font sources.
connect-src: Defines valid sources for XMLHttpRequest, WebSocket, and EventSource connections.
object-src: Disables plugins like Flash or Java applets.
frame-src: Restricts the sources for embedded frames.
report-uri or report-to: Defines where to send violation reports.

To fix a Content Security Policy (CSP) vulnerability, you need to properly define and implement a strong CSP header that controls which resources (e.g., scripts, styles, images) are allowed to load and execute on your web pages. A well-defined CSP helps prevent Cross-Site Scripting (XSS), data injection, and other attacks.

Identify which types of resources your web page needs to load. This includes:

Scripts (script-src)
Stylesheets (style-src)
Images (img-src)
Fonts (font-src)
Media (media-src)
Frames (frame-src)
Other types of content like object-src or connect-src

The CSP is implemented via HTTP response headers or HTML tags. For headers, it's usually added in the web server configuration (e.g., Apache, Nginx) or via backend code (e.g., in .NET, Node.js).

Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-...'; style-src 'self'; img-src 'self'; object-src 'none'

default-src 'self': Only allows content from the same domain as the website (no external resources).
script-src 'self' 'sha256-...': Only allows scripts from the same domain, and inline scripts are allowed only if they match the given hash (a way to allow specific inline scripts without enabling unsafe-inline).
style-src 'self': Only allows stylesheets from the same domain.
img-src 'self': Only allows images from the same domain.
object-src 'none': Disallows embedding objects like Flash, Java applets.

Once you have your policy, configure your web server to send it as an HTTP header. Examples:

Apache: Add the header in your .htaccess or httpd.conf file:

Header set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';"

Nginx: Add the header in your configuration file:

add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';";

ASP.NET Core: In the Startup.cs file:

app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self';");
    await next();
});

It’s common to start with a more permissive policy and then tighten it as you identify which resources are actually needed. For example, you might initially allow external resources like Google Fonts or CDN-hosted libraries (e.g., jQuery, Bootstrap), but restrict them later by allowing only specific sources (font-src https://fonts.googleapis.com).

By implementing a strict Content Security Policy tailored to your website's resource needs, you can mitigate many CSP vulnerabilities and protect your application from XSS and other types of attacks.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tuhin Paul1y ago
Accepted answer
```
Content-Security-Policy: default-src 'self'; 
    script-src 'self' https://cdnjs.cloudflare.com 'sha256-...'; 
    style-src 'self' https://fonts.googleapis.com; 
    img-src 'self' data:; 
    font-src 'self' https://fonts.gstatic.com; 
    object-src 'none'; 
    frame-src 'self'; 
    connect-src 'self' https://api.example.com;
    report-uri /csp-report
```
- default-src: Fallback for all resource types.
- script-src: Defines valid JavaScript sources.
- style-src: Defines valid CSS sources.
- img-src: Defines valid image sources.
- font-src: Defines valid font sources.
- connect-src: Defines valid sources for XMLHttpRequest, WebSocket, and EventSource connections.
- object-src: Disables plugins like Flash or Java applets.
- frame-src: Restricts the sources for embedded frames.
- report-uri or report-to: Defines where to send violation reports.
+3
Tuhin Paul1y ago
To fix a Content Security Policy (CSP) vulnerability, you need to properly define and implement a strong CSP header that controls which resources (e.g., scripts, styles, images) are allowed to load and execute on your web pages. A well-defined CSP helps prevent Cross-Site Scripting (XSS), data injection, and other attacks.

Identify which types of resources your web page needs to load. This includes:
- Scripts (script-src)
- Stylesheets (style-src)
- Images (img-src)
- Fonts (font-src)
- Media (media-src)
- Frames (frame-src)
- Other types of content like object-src or connect-src
The CSP is implemented via HTTP response headers or HTML tags. For headers, it's usually added in the web server configuration (e.g., Apache, Nginx) or via backend code (e.g., in .NET, Node.js).
```
Content-Security-Policy: default-src 'self'; script-src 'self' 'sha256-...'; style-src 'self'; img-src 'self'; object-src 'none'
```
- default-src 'self': Only allows content from the same domain as the website (no external resources).
- script-src 'self' 'sha256-...': Only allows scripts from the same domain, and inline scripts are allowed only if they match the given hash (a way to allow specific inline scripts without enabling unsafe-inline).
- style-src 'self': Only allows stylesheets from the same domain.
- img-src 'self': Only allows images from the same domain.
- object-src 'none': Disallows embedding objects like Flash, Java applets.
Once you have your policy, configure your web server to send it as an HTTP header. Examples:
- Apache: Add the header in your .htaccess or httpd.conf file:
```
Header set Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';"
```
Nginx: Add the header in your configuration file:
```
add_header Content-Security-Policy "default-src 'self'; script-src 'self'; style-src 'self';";
```
ASP.NET Core: In the Startup.cs file:
```
app.Use(async (context, next) =>
{
    context.Response.Headers.Add("Content-Security-Policy", "default-src 'self'; script-src 'self'; style-src 'self';");
    await next();
});
```
It’s common to start with a more permissive policy and then tighten it as you identify which resources are actually needed. For example, you might initially allow external resources like Google Fonts or CDN-hosted libraries (e.g., jQuery, Bootstrap), but restrict them later by allowing only specific sources (font-src https://fonts.googleapis.com).

By implementing a strict Content Security Policy tailored to your website's resource needs, you can mitigate many CSP vulnerabilities and protect your application from XSS and other types of attacks.
+3