Angular：unsafe value used in a resource URL解决及DomSanitizer导致重复刷新的问题

原创于 2022-04-27 10:26:52 发布 · 639 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#angular.js

Angular 专栏收录该内容

2 篇文章

订阅专栏

在Angular应用中，当使用`<embed>`标签动态绑定src属性时，可能会遇到浏览器的安全警告。解决这个问题需要使用`DomSanitizer`来确保URL的安全。通过调用`bypassSecurityTrustResourceUrl`方法转换URL，可以消除XSS风险。此外，将`DomSanitizer`的使用封装到自定义管道`safeUrlPipe`中，可以避免组件重复刷新的问题，提高应用的稳定性。

问题1：unsafe value

<embed [src]="file.fileurl"/>

动态给 embed 标签绑定 src 属性时，浏览器控制台会提示报错：ProcessSupplementTaskComponent.html:21 ERROR Error: unsafe value used in a resource URL context (see http://g.co/ng/security#xss)

解决1

使用 DomSanitizer

import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";

constructor(private sanitizer: DomSanitizer){}

transform(url: string): SafeResourceUrl {
  return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}

<embed [src]="transform(file.fileurl)"/>

问题2：embed加载成功后点击任意组件都会重复刷新

解决2：将 DomSanitizer 的使用封装到 pipe

import { Pipe, PipeTransform } from '@angular/core';
import {DomSanitizer, SafeResourceUrl} from "@angular/platform-browser";

@Pipe({
  name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

  constructor(private sanitizer: DomSanitizer){

  }

  transform(url: string): SafeResourceUrl {
    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
  }

}