Dynamic CSP (Content Security Policy) connect-src in Angular

Question

I defined the CSP within meta tags in my Angulars project index.html file

  <meta http-equiv="Content-Security-Policy"
        content="default-src 'self';
                 connect-src 'self' https://baseurl1/ https://baseurl2/ https://baseurl3/;
                 img-src 'self' data: http://baseurl/;
                 frame-src 'self' blob:;
                 media-src 'self' https://baseurl/;
                 script-src 'self' 'unsafe-inline' 'unsafe-eval' http://baseurl/;
                 style-src 'self' 'unsafe-inline';">

My issue is, that I want to whitelist exactly one more connect-src dynamically based on a users choice within the application. How to do that since index.html is a static page?

The url is called from a http service, which reaches out to a standard server interface (different providers). The user can choose his provider, as a result the url changes. There is no known set of possible urls. It would be also fine if I can somehow CSP-ignore all requests which are sent by this service.

Answer 1

you can try by making use of Meta component for updating CSP dynamically.

It will be like below which might help you.

import { Meta } from '@angular/platform-browser';

    let i  = 0;
    let tim = setInterval(() => {

        let tag = this.meta.getTag('http-equiv=Content-Security-Policy');

        if (tag) {

          this.meta.removeTag('http-equiv=Content-Security-Policy');
          let content = tag.getAttribute('content');
          let str = 'connect-src ';
          let index = content.indexOf(str);
          content = content.slice(0, index + str.length) + "https://baseurl22/ https://baseurl23/ https://baseurl34/ " + content.slice(index + str.length);
            this.meta.updateTag({ 'http-equiv': 'Content-Security-Policy', content: content });
        } else {

          this.meta.addTag({ 'http-equiv': 'Content-Security-Policy', content: 'connect-src \'self\' https://baseurl1/ https://baseurl2/ https://baseurl3/;' });
        }

        if (i == 1) clearInterval(tim);
        i++;
    }, 1000);

Demo - https://stackblitz.com/edit/angular-teecck