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-browser / @ angular / platform-browser.es5.js.DomSanitizerImpl.sanitize（platform-browser.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

您似乎需要使用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 2

以这种格式使用iframe：

<ifrmae [src]="variable_name">

在ts文件中：

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

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

Answer 3

您的代码存在问题。您将本地模板名称提供给iframe，并且您使用相同的名称进行属性绑定。本地模板名称具有更高的优先级，因此[src]="originalUrl"将引用iframe。如果它在任何地方都没有使用，您应该更改#originalUrl或将其彻底删除。

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

3 个答案: