Angular9 信任安全值

2020-07-08 14:59 更新

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

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

bypassSecurityTrustHtml

bypassSecurityTrustScript

bypassSecurityTrustStyle

bypassSecurityTrustUrl

bypassSecurityTrustResourceUrl

记住,一个值是否安全取决于它所在的环境,所以你要为这个值按预定的用法选择正确的环境。假设下面的模板需要把 javascript.alert(...) 方法绑定到 URL

Path:"src/app/bypass-security.component.html (URL)" 。

<h4>An untrusted URL:</h4>
<p><a class="e2e-dangerous-url" [href]="dangerousUrl">Click me</a></p>
<h4>A trusted URL:</h4>
<p><a class="e2e-trusted-url" [href]="trustedUrl">Click me</a></p>

通常,Angular 会自动无害化这个 URL 并禁止危险的代码。为了防止这种行为,可以调用 bypassSecurityTrustUrl 把这个 URL 值标记为一个可信任的 URL

Path:"src/app/bypass-security.component.ts (trust-url)" 。

constructor(private sanitizer: DomSanitizer) {
  // javascript: URLs are dangerous if attacker controlled.
  // Angular sanitizes them in data binding, but you can
  // explicitly tell Angular to trust this value:
  this.dangerousUrl = 'javascript:alert("Hi there")';
  this.trustedUrl = sanitizer.bypassSecurityTrustUrl(this.dangerousUrl);

如果需要把用户输入转换为一个可信任的值,可以在控制器方法中处理。下面的模板允许用户输入一个 YouTube 视频的 ID, 然后把相应的视频加载到 <iframe> 中。<iframe src> 是一个“资源 URL”的安全环境,因为不可信的源码可能作为文件下载到本地,被毫无防备的用户执行。 所以要调用一个控制器方法来构造一个新的、可信任的视频 URL,这样 Angular 就会允许把它绑定到 <iframe src>

Path:"src/app/bypass-security.component.html (iframe)" 。

<h4>Resource URL:</h4>
<p>Showing: {{dangerousVideoUrl}}</p>
<p>Trusted:</p>
<iframe class="e2e-iframe-trusted-src" width="640" height="390" [src]="videoUrl"></iframe>
<p>Untrusted:</p>
<iframe class="e2e-iframe-untrusted-src" width="640" height="390" [src]="dangerousVideoUrl"></iframe>

Path:"src/app/bypass-security.component.ts (trust-video-url)" 。


updateVideoUrl(id: string) {
  // Appending an ID to a YouTube URL is safe.
  // Always make sure to construct SafeValue objects as
  // close as possible to the input data so
  // that it's easier to check if the value is safe.
  this.dangerousVideoUrl = 'https://www.youtube.com/embed/' + id;
  this.videoUrl =
      this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousVideoUrl);
}
以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号