How to use nonce or sha with connect-src(csp)?

Question

Is it possible to use nonce with an API request so that connect-src in CSP will detect that it is not a malicious address?

Until now I have seen that nonce can only be used in script-src or style-src, not in connect-src

So far I have only been able to put the URL list in connect-src...

If anyone has an example in Angular or js please share

thats how look like my csp:

connect-src 'self' data: https://url wss://url 'nonce-the_nonce'; script-src 'self' 'nonce-the_nonce';

the fetch request with a nonce(THIS URL IS NOT INCLUDED IN MY connect-src data URLs list, I want that to work with a nonce):

  <script nonce="the_nonce">

    fetch(`https://url`,{method:'GET'}).then(res=>{
      console.log(res.status);
    },err=>{
      console.log(err.errorStatusCode);
    });

  </script>

the error I get:

Refused to connect to 'https://url' because it violates the following Content Security Policy directive: "connect-src 'self' data: https://url wss://url 'nonce-the_nonce".

Answer 1

In Content Security Policy (CSP), the connect-src directive can use a nonce or a hash. The connect-src directive lists the URIs permitted to send network requests to the origin (such as AJAX or WebSocket requests). Using a nonce or hash enables the browser to identify that the request is authorized and originates from a reliable source.

You must create a special nonce value for each request and include it in the request's header if you want to use a nonce with a connect-src directive. An illustration of how to create a nonce value in Angular is shown here:

import { DomSanitizer, SafeValue } from '@angular/platform-browser';
import { SecurityContext } from '@angular/core';

// Generate a random nonce value

const nonce = Math.random().toString(36).substring(2, 15);

// Create a Content-Security-Policy header with the nonce value

const csp = `connect-src 'self' data: https://url wss://url 'nonce-${nonce}'`;

// Sanitize the CSP header to prevent XSS attacks

const safeCsp: SafeValue = this.sanitizer.bypassSecurityTrustHtml(csp);

// Set the CSP header on the HTTP request

const headers = new HttpHeaders({ 'Content-Security-Policy': safeCsp });

// Send the HTTP request with the nonce header

this.http.get('https://example.com/data', { headers: headers }).subscribe(...);

In the above example, the connect-src directive in the CSP header is supplemented with a generated random nonce value. After that, the CSP header is cleaned up to guard against XSS attacks, and Angular's HttpClient is used to send the HTTP request with the nonce header.

It should be noted that the browser will not accept the response if the server does not include the nonce value in the Content-Security-Policy header.