ERROR 错误：角度 2 中资源 URL 上下文中使用的不安全值

Question

我有以下 HTML 代码

<iframe #originalUrl [hidden]="!showOriginalDoc"  [src]="originalUrl"><span *ngIf="originalUrl===''">Original URL Not Available</span></iframe>

按照角码

 if(data.originalResearch.originalUrl===null)
  this.originalUrl='';
 else
  this.originalUrl = this.domSanitizer.bypassSecurityTrustResourceUrl(data.originalResearch.originalUrl);

上面的代码仍然抛出以下错误：

CuratorModalBodyComponent.html:123 ERROR 错误：资源 URL 上下文中使用了不安全的值（请参阅 http://g.co/ng/security#xss） 在 DomSanitizerImpl.vendor../node_modules/@angular/platform-b​​rowser/@angular/platform-b​​rowser.es5.js.DomSanitizerImpl.sanitize (platform-b​​rowser.es5.js?ffb0:3992) 在 setElementProperty (core.es5.js?0445:9398) 在 checkAndUpdateElementValue (core.es5.js?0445:9318) 在 checkAndUpdateElementInline (core.es5.js?0445:9252) 在 checkAndUpdateNodeInline (core.es5.js?0445:12357) 在 checkAndUpdateNode (core.es5.js?0445:12303) 在 debugCheckAndUpdateNode (core.es5.js?0445:13167) 在 debugCheckRenderNodeFn (core.es5.js?0445:13146)

我正在使用 Angular 4.4.1

Answer 1

以这种格式使用 iframe：

<ifrmae [src]="variable_name">

在ts文件中：

import { DomSanitizer } from '@angular/platform-browser';

constructor(private dom:DomSanitizer)
{ 
    variable_name=this.dom.bypassSecurityTrustResourceUrl(url); 
}

Answer 2

您似乎需要使用 DomSanitizer 来清理 src。

import { DomSanitizer, SafeUrl } from '@angular/platform-browser';

constructor(private _sanitizationService: DomSanitizer){}

无论您在哪里需要，都可以将 Src 数据传递给这个函数：

var imgSrc = this._sanitizationService.bypassSecurityTrustUrl('data:image/png;base64,' + yourSrc);

Answer 3

您的代码有问题。您将本地模板名称指定为 iframe，并且您使用相同的名称进行属性绑定。本地模板名称具有更高的优先级，因此 [src]="originalUrl" 将引用 iframe。您应该更改#originalUrl，如果它不在任何地方使用，则将其完全删除。