Angular_Domsanitizer
背景
项目中需要用iframe引用一个外部的url。使用接口获取到url,给iframe的src赋值时,报了个ERROR Error: unsafe value used in a resource URL context.大概的意思就是资源url不安全
网上搜索了下找到Angular提供的DomSanitizer
Angular文档
调用任何 bypassSecurityTrust...
API 都会禁用 Angular 对传入的值的内置净化机制,也就是说只要调用了此API就会对传入的函数代码块的值进行严格的检查,包括路径、html标签、js代码等确定安全后方可以插入,而且插入方式不可以是插值法直接插入,必须是属性绑定的形式插入。要小心翼翼的检查和审计所有的值和到该调用的代码执行路径。 要确保任何一个用户数据都针对这个安全上下文进行过适当的转义(escape)。
DomSanitizer有助于防止跨站点脚本安全漏洞(XSS),通过清除值以便在不同的DOM上下文中安全使用。
比如,如果要在 <a [href]="someValue">
的链接中绑定一个 URL,someValue
将会被净化, 以防范攻击者注入 javascript:
之类的 URL,并借此在网站上执行代码。
在特定场景下,可能要禁用净化机制,比如,如果应用程序真的需要生成具有动态值的 javascript:
链接。 用户可以通过使用 bypassSecurityTrust...
方法来构建出一个值,以绕过安全性检查,并在模板中绑定它。
这种场景其实非常罕见,必须特别小心,避免引入跨站脚本攻击(XSS)类的安全风险。
当使用 bypassSecurityTrust...
时,请尽量确保尽早调用该方法,并且让他尽可能接近值的来源,以便能更容易地验证使用它时有没有引入安全风险。
如果该值本身是安全的,则不需要绕过安全性检查,比如那些没有使用可疑协议的 URL 或者不包含危险代码的 HTML 片段。 净化器会确保值的安全性。
——翻译自Angular官网
通俗来讲:
就是在Angular中默认将所有输入值视为不受信任。当我们通过 property,attribute,样式,类绑定或插值等方式,将一个值从模板中插入到DOM中时,Angular 会自动帮我们清除和转义不受信任的值。
XSS简介
跨站脚本(Cross-site scripting,通常简称为XSS)是一种网站应用程序的安全漏洞攻击,是代码注入的一种。它允许恶意用户将代码注入到网页上,其他用户在观看网页时就会受到影响。这类攻击通常包含了HTML以及用户端脚本语言。
XSS攻击通常指的是通过利用网页开发时留下的漏洞,通过巧妙的方法注入恶意指令代码到网页,使用户加载并执行攻击者恶意制造的网页程序。这些恶意网页程序通常是JavaScript,但实际上也可以包括Java,VBScript,ActiveX,Flash或者甚至是普通的HTML。攻击成功后,攻击者可能得到更高的权限(如执行一些操作)、私密网页内容、会话和cookie等各种内容。 — 维基百科
API
1. sanitize()
为在给定的 SecurityContext 中使用而对 value
进行转义
如果这个值在这个上下文中是可信的,则该方法会解开所包含的安全值,并且直接使用它;否则,这个值就会根据给定的安全上下文净化成安全的,比如替换那些具有不安全协议(例如 javascript:
)的 URL。 该实现负责确保在给定的上下文中可以绝对安全的使用该值。
2. bypassSecurityTrustHtml()
绕过安全检查,并信任给定的值是一个安全的 HTML。只有当要绑定的 HTML 是不安全内容(比如包含 <script>
)而且你确实希望运行这些代码时,才需要使用它。 净化器会确保安全 HTML 的完整性,因此在大多数场景下都不需要使用该方法。
代码示例:
TS:
import { Component,OnInit } from '@angular/core'; import {DomSanitizer} from "@angular/platform-browser"; @Component({ selector: 'page-test', templateUrl: 'test.html', }) export class TestPage implements OnInit { public htmling="<div>很高<p>使得</p><a >蓝色</a></div>";
constructor( public dz:DomSanitizer ) { } ngOnInit() { this.aa=this.dz.bypassSecurityTrustHtml(this.htmling); }
assembleHTML(strHTML:any) { return this.dz.bypassSecurityTrustHtml(strHTML); } }
HTML:
<!--html 属性绑定方法--> <div [innerHTML]="assembleHTML(htmling)"></div> <!--html错误写法--> <div>{{aa}}</div> <!--html 属性绑定属性值--> <div [innerHTML]="aa"></div>
结果:
3. bypassSecurityTrustStyle()
绕过安全检查,并信任给定的值是一个安全的样式(CSS)。
代码示例:
TS:
import { Component, OnInit } from '@angular/core'; import {DomSanitizer} from "@angular/platform-browser"; @Component({ selector: 'page-test', templateUrl: 'test.html', }) export class TestPage implements OnInit { public htmling="height: 100px;background-color: red"; constructor( public dz:DomSanitizer ) { } ngOnInit() { this.aa=this.dz.bypassSecurityTrustStyle(this.htmling) } }
HTML:
<div [style]="aa"></div>
结果:
4. bypassSecurityTrustScript()
绕过安全检查,并信任给定的值是一个安全的JavaScript。
5. bypassSecurityTrustUrl()
绕过安全检查,并信任给定的值是一个安全的样式 URL。也就是说该值可安全地用在链接或 <img src>
中。
代码示例:
TS:
import { Component, OnInit } from '@angular/core'; import {DomSanitizer} from "@angular/platform-browser"; @Component({ selector: 'page-test', templateUrl: 'test.html', }) export class TestPage implements OnInit { public htmling="./assets/icon/1000.png"; constructor(public dz:DomSanitizer ) { } ngOnInit() { this.aa=this.dz.bypassSecurityTrustUrl(this.htmling) } }
HTML:
<div > <img [src]="aa"></div>
结果:
6. bypassSecurityTrustResourceUrl()
绕过安全检查,并信任给定的值是一个安全的资源 URL。也就是说该地址可以安全的用于加载可执行代码,比如 <script src>
或 <iframe src>
。
代码示例:
TS:
import { Component, OnInit } from '@angular/core'; import {DomSanitizer} from "@angular/platform-browser"; @Component({ selector: 'page-test', templateUrl: 'test.html', }) export class TestPage implements OnInit { public htmling="https://segmentfault.com/"; public aa:object; constructor( public dz:DomSanitizer ) { } ngOnInit() { this.aa=this.dz.bypassSecurityTrustResourceUrl(this.htmling) } }
HTML:
<iframe [src]="aa"></iframe>
结果:
警告: 使用不可信的用户数据调用此方法将会让你的应用暴露在 XSS 安全风险之下!
https://angular.cn/api/platform-browser/DomSanitizer#description
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!