title: Dynamic CSP (Content Security Policy) connect-src in Angular
body: <p>I defined the CSP within meta tags in my Angulars project <code>index.html</code> file</p>
  
  <pre><code>  &lt;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';"&gt;
  </code></pre>
  
  <p>My issue is, that I want to whitelist exactly one more <code>connect-src</code> dynamically based on a users choice within the application. How to do that since <code>index.html</code> is a static page?</p>
  
  <p>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.</p>