Angular中的动态CSP(内容安全策略)connect-src [英] Dynamic CSP (Content Security Policy) connect-src in Angular

问题描述

我在Angulars项目 index.html 文件

的meta标签中定义了CSP

 <元http-equiv ="Content-Security-Policy"content ="default-src'self';connect-src'self'https://baseurl1/https://baseurl2/https://baseurl3/;img-src'self'数据: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 是静态页面，该怎么办?

从http服务中调用该url，该服务可以到达标准服务器接口(不同的提供程序).用户可以选择他的提供者，因此URL会更改.没有已知的可能网址集.如果我能以某种方式CSP忽略此服务发送的所有请求，那也很好.

解决方案

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

可能会像下面这样对您有所帮助.

 从'@ angular/platform-b​​rowser'导入{元}；让我= 0;让tim = setInterval(()=> {let tag = this.meta.getTag('http-equiv = Content-Security-Policy');如果(标签){this.meta.removeTag('http-equiv = Content-Security-Policy');让content = tag.getAttribute('content');let str ='connect-src';让索引= 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});} 别的 {this.meta.addTag({'http-equiv':'Content-Security-Policy'，content:'connect-src \'self \'https://baseurl1/https://baseurl2/https://baseurl3/;'});}如果(i == 1)clearInterval(tim);i ++;}，1000)； 

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

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.

解决方案

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

这篇关于Angular中的动态CSP(内容安全策略)connect-src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！