Angular 中的动态 CSP（内容安全策略）connect-src

Question

我在我的 Angulars 项目 index.html 文件

的元标记中定义了 CSP

  <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';">

我的问题是，我想根据用户在应用程序中的选择动态地再添加一个 connect-src 白名单。由于 index.html 是静态页面，该怎么做？

url 是从 http 服务调用的，它连接到标准服务器接口（不同的提供商）。用户可以选择他的提供商，因此 url 会发生变化。没有已知的可能 url 集合。如果我能以某种方式 CSP 忽略此服务发送的所有请求，那也很好。

Answer 1

你可以尝试使用Meta组件动态更新CSP

如下所示，可能对您有所帮助。

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);

演示 - https://stackblitz.com/edit/angular-teecck

Answer 2

我不会以这种方式考虑内容安全策略，因为假设浏览器将以这种方式尊重 CSP 元 header（我对此表示怀疑），内容安全策略的植入仍然更好、更安全是改用 HTTP 响应 header。快速参考检查 content-security-policy.com.

Angular 中的动态 CSP（内容安全策略）connect-src

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

html

angular

meta-tags

meta

content-security-policy