我正在做一个教程,涉及iframe src属性的设置:
<iframe width="100%" height="300" src="{{video.url}}"></iframe>
这会抛出一个异常:
Error: unsafe value used in a resource URL context
at DomSanitizationServiceImpl.sanitize...
我已经尝试使用[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]绑定,但没有成功。
当前回答
这个适合我。
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);
}
}
其他回答
constructor(
public sanitizer: DomSanitizer, ) {
}
我已经挣扎了4个小时。问题出在img标签。当你使用方括号的'src' ex: [src]。你不能使用这个角表达式{{}}。你只要直接从下面的实物例子给出。如果你给出角表达式{{}}。你会得到插值误差。
首先,我用ngFor来迭代国家 *ngFor="让国家中的国家" 然后你把这个放到img标签里。就是它了。 < img (src) = " sanitizer.bypassSecurityTrustResourceUrl (country.flag)” Height ="20" width="20" alt=""/> .
祝贺!¨^ ^ 我有一个简单有效的解决方案给你,是的!
<iframe width="100%" height="300" [attr.src]="video.url"></iframe
[attr。Src]而不是Src ”视频。而不是{{video.url}}
伟大的,)
我将分享这个解决方案,即使这不是最佳实践,但它发生在我身上,我们不允许使用this. domsaniizer . bypasssecuritytrustresourceurl (url)解决方案,因为一个自动安全警告停止了CI/CD管道。
@Component({
template: '<iframe #iframeRef></iframe>'
})
export class UnsafeUrlBypassIframeSampleComponent implements AfterViewInit {
@ViewChild('iframeRef') iframe: ElementRef<HTMLIFrameElement>;
constructor(private renderer: Renderer2) {}
ngAfterViewInit() {
const MY_UNSAFE_URL = '/path/to/something';
this.renderer.setProperty(this.iframe.nativeElement, 'src', MY_UNSAFE_URL);
}
}
如果你确实需要绕过Angular的安全系统,而这将不可避免地导致漏洞,那么最好明确地这样做。
说实话,所有的答案似乎都是错的。使用this. saniizer . 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的安全性。
我通常添加单独的安全管道可重用组件如下
# 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>