angular7中防范跨站脚本(XSS)攻击的信任安全值得使用

末蓝、 2022-01-29 02:15 382阅读 0赞

#### 信任安全值 ####

有时候，应用程序确实需要包含可执行的代码，比如使用 URL 显示 ，或者构造出有潜在危险的 URL。 为了防止在这种情况下被自动无害化，你可以告诉 Angular：我已经审查了这个值，检查了它是怎么生成的，并确信它总是安全的。 但是千万要小心！如果你信任了一个可能是恶意的值，就会在应用中引入一个安全漏洞。如果你有疑问，请找一个安全专家复查下。

注入 DomSanitizer 服务，然后调用下面的方法之一，你就可以把一个值标记为可信任的。

*  bypassSecurityTrustHtml
 *  bypassSecurityTrustScript
 *  bypassSecurityTrustStyle
 *  bypassSecurityTrustUrl
 *  bypassSecurityTrustResourceUrl

在angular中使用带有src属性，如iframe框架等元素的时候，angular基于安全考虑，会自动屏幕相关元素的使用。

如果需要信任，需要做相关的设置：

案例：

import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
    
    url = 'https://vd4.bdstatic.com/mda-jbmhv3u6sw67pk8g/sc/mda-jbmhv3u6sw67pk8g.mp4';
    videoUrl: SafeResourceUrl;
    
    constructor(private sanitizer: DomSanitizer) {
            this.videoUrl = this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
    }

**如果直接使用：会报如下错误：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]

#### 官网地址 ####

[https://angular.cn/guide/security\#server-side-xss-protection][https_angular.cn_guide_security_server-side-xss-protection]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20220129/888413a617414aa5b9f628d2f8130b87.png
[https_angular.cn_guide_security_server-side-xss-protection]: https://angular.cn/guide/security#server-side-xss-protection