使用 DomSanitizer 后图像 url 仍然不安全

Question

我用来DocumentsService从服务器获取图像文件，然后我用来 URL.createObjectURL(result)从服务器响应创建图像 url，一切似乎都正常，但我一直收到错误消息sanitizing unsafe URL并且看不到图像。

@Injectable()
export class DocumentsService {

    public url:string = 'api.server.url'

    constructor(private http: HttpClient , private dom: DomSanitizer) {
    }

    public getImageUrl(imageId: string): Observable<any> {

        let requestOptions = {
            params: {
                id: imageId
            },
            responseType: "blob"
        };

        return this._restClientService.get(this.url, requestOptions).map(result => {
            let url = URL.createObjectURL(result);
            return this.dom.bypassSecurityTrustUrl(url);   
        });
    }
}

在我的组件中，我注入了服务并

this._doc.getImageUrl(doc.id)
          .do(console.log) // => SafeUrlImpl {changingThisBreaksApplicationSecurity: "blob:http://localhost:4200/2b9b4820-c7d0-4920-a094-cb3e4cc47c7c"}
          .subscribe(url => this.photoUrl = url)
      }

在模板中我使用一个函数来检查使用是否有图像

public getImagePath(): string {
    if (this.photoUrl) {
      return this.photoUrl; //  after get the image from documents service
    }
    return FilesUrls.BlankAvatar;
  }

模板

<img src="{{getImagePath()}}" alt="user image">

我一直收到这个错误，我想我错过了什么

“警告：清理不安全的 URL 值 SafeValue 必须使用 [property]=binding: blob: http://localhost:4200/79dd8411-44a8-4e08-96d2-ad6d889c1056（参见 http://g.co/ng/security#xss )（见http://g.co/ng/security#xss）”

Answer 1

我认为你不会返回你的SafeUrlafter bypassSecurityTrustUrl。

查看有效的版本https://stackblitz.com/edit/angular-bqqumm

代码必须像：

return this._restClientService.get(this.url, requestOptions).map(result => {
     let url = URL.createObjectURL(result);
     return this.dom.bypassSecurityTrustUrl(url);    
})

Answer 2

当您使用绑定时，清理是自动的，要使用属性设置值，您需要使用DomSanitizer.sanitizecontext进行调用SecurityContext.URL。顺便说一句，这是不正确的：src="{{getImagePath()}}"应该是[attr.src]="getImagePath()"