如何设置<iframe src="…"不会引起“不安全值”异常?

我正在编写一个教程，涉及iframe src属性的设置:

<iframe width="100%" height="300" src="{{video.url}}"></iframe>

这会抛出一个异常:

Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...

我已经尝试过使用[src]绑定，但没有成功。

277752 次浏览
小开
最佳答案

更新v8

以下回答工作，但将您的应用程序暴露在XSS安全风险中!。 不使用this.domSanitizer.bypassSecurityTrustResourceUrl(url)，建议使用this.domSanitizer.sanitize(SecurityContext.URL, url)

更新

对于RC.6 ^版本，使用DomSanitizer

< a href = " https://plnkr.co/edit/Uifk3dxf7vwKJsUFb0d9?p =预览noreferrer“rel = >恰好< / >

一个好的选择是使用纯管道:

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


@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private domSanitizer: DomSanitizer) {}
transform(url) {
return this.domSanitizer.bypassSecurityTrustResourceUrl(url);
}
}

记得将你的新SafePipe添加到AppModule的declarations数组中。(如文档所示)

@NgModule({
declarations : [
...
SafePipe
],
})

超文本标记语言

<iframe width="100%" height="300" [src]="url | safe"></iframe>

< a href = " https://plnkr.co/edit/9JPA5r0gjTwfVckohihp?p =预览noreferrer“rel = >恰好< / >

如果你使用embed标签，这对你来说可能很有趣:

旧版RC.5

你可以像这样利用DomSanitizationService:

export class YourComponent {
url: SafeResourceUrl;
constructor(domSanitizationService: DomSanitizationService) {
this.url = domSanitizer.bypassSecurityTrustResourceUrl('your url');
}
}

然后在模板中绑定url:

<iframe width="100%" height="300" [src]="url"></iframe>

不要忘记添加以下导入:

import { SafeResourceUrl, DomSanitizationService } from '@angular/platform-browser';

< a href = " http://plnkr.co/edit/ZJBXJVL4LhD41R8VE0jj?p=preview" rel="noreferrer">活塞样品 . p=preview" rel="noreferrer">

小开

这个适合我。

import { Component,Input,OnInit} from '@angular/core';
import {DomSanitizer,SafeResourceUrl,} from '@angular/platform-browser';


@Component({
moduleId: module.id,
selector: 'player',
templateUrl: './player.component.html',
styleUrls:['./player.component.scss'],
    

})
export class PlayerComponent implements OnInit{
@Input()
id:string;
url: SafeResourceUrl;
constructor (public sanitizer:DomSanitizer) {
}
ngOnInit() {
this.url = this.sanitizer.bypassSecurityTrustResourceUrl(this.id);
}
}
小开
< p >祝贺!¨^ ^ 我有一个简单的&为您提供高效的解决方案，是的!< / p > 
<iframe width="100%" height="300" [attr.src]="video.url"></iframe
< p > [attr。Src]而不是Src ”视频。而不是\{\{video.url}}

. Url

伟大的,)

小开

这样我就可以使用Angular 5.2.0了

fileName.Component.ts

import { Component, OnInit, Input } from '@angular/core';
import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';


@Component({
selector: 'app-sample',
templateUrl: './fileName.component.html',
styleUrls: ['./fileName.component.scss']
})


export class FileName implements OnInit {
@Input()
url: string = "https://www.mmlpqtpkasjdashdjahd.com";
urlSafe: SafeResourceUrl;


constructor(public sanitizer: DomSanitizer) { }


ngOnInit() {
this.urlSafe= this.sanitizer.bypassSecurityTrustResourceUrl(this.url);
}


}

fileName.Component.html

<iframe width="100%" height="100%" frameBorder="0" [src]="urlSafe"></iframe>

伙计们，就这些!!

小开 
constructor(
public sanitizer: DomSanitizer, ) {


}

我已经挣扎了4个小时。问题出在img标签。当你使用方括号的'src' ex: [src]。你不能使用这个角表达式\{\{}}。你只要直接从下面的实物例子给出。如果你给出角表达式\{\{}}。你会得到插值误差。

  1. 首先我使用ngFor迭代国家

    *ngFor="let country of countries"

  2. second you put this in the img tag. this is it.

    <img [src]="sanitizer.bypassSecurityTrustResourceUrl(country.flag)"
height="20" width="20" alt=""/>
小开

我通常添加单独的安全管道可重用组件如下

# Add Safe Pipe


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


@Pipe({name: 'mySafe'})
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) {
}


public transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}

# then create shared pipe module as following


import { NgModule } from '@angular/core';
import { SafePipe } from './safe.pipe';
@NgModule({
declarations: [
SafePipe
],
exports: [
SafePipe
]
})
export class SharedPipesModule {
}

# import shared pipe module in your native module


@NgModule({
declarations: [],
imports: [
SharedPipesModule,
],
})
export class SupportModule {
}

<!-------------------
call your url (`trustedUrl` for me) and add `mySafe` as defined in Safe Pipe
---------------->
<div class="container-fluid" *ngIf="trustedUrl">
<iframe [src]="trustedUrl | mySafe" align="middle" width="100%" height="800" frameborder="0"></iframe>
</div>
小开

我也遇到了这个问题，但为了在我的angular模块中使用安全管道，我安装了安全管道npm包，你可以找到在这里。仅供参考，这在Angular 9.1.3中是有效的，我还没有在其他版本的Angular中尝试过。下面是如何一步一步地添加它:

  1. 通过npm Install safe-pipe或yarn add safe-pipe安装包。这将在包中的依赖项中存储对它的引用。json文件，你在启动一个新的Angular项目时应该已经有了这个文件。

  2. 将SafePipeModule模块添加到NgModule中。导入到Angular模块文件中，如下所示:

    import { SafePipeModule } from 'safe-pipe';


@NgModule({
imports: [ SafePipeModule ]
})
export class AppModule { }

  3. Add the safe pipe to an element in the template for the Angular component you are importing into your NgModule this way:

<element [property]="value | safe: sanitizationType"></element>
  1. 下面是一些在html元素中使用safePipe的具体例子:
<div [style.background-image]="'url(' + pictureUrl + ')' | safe: 'style'" class="pic bg-pic"></div>
<img [src]="pictureUrl | safe: 'url'" class="pic" alt="Logo">
<iframe [src]="catVideoEmbed | safe: 'resourceUrl'" width="640" height="390"></iframe>
<pre [innerHTML]="htmlContent | safe: 'html'"></pre>
小开

这对我很有用

我在iframe中定义了一个id

<iframe id="embeddedPage"></iframe>

在组件中，我使用了这段代码

export class YourComponent implements OnInit {
    

constructor() {}


ngOnInit(): void {
const iframe =  document.getElementById('embeddedPage') as HTMLIFrameElement;
iframe.contentWindow.location.replace('your url');
}


}
小开

说实话，所有的答案似乎都是错的。使用this.sanitizer.bypassSecurityTrustResourceUrl(url)只是绕过了安全性，并将url视为SafeResourceUrl。但是，给定的url仍然可能是恶意的，导致安全违规。文档也这么说:https://angular.io/api/platform-browser/DomSanitizer#bypassSecurityTrustResourceUrl

一个解决方案是首先调用sanitizer，然后像这样将sanitizer返回值传递给bypassSecurityTrustResourceUrl:

this.sanitizer.bypassSecurityTrustResourceUrl(this.sanitizer.sanitize(SecurityContext.URL, url))

通过这种方式，您可以清除任何恶意代码，然后绕过表示这确实是一个安全url的安全性。


提交答案