资源 URL 上下文 (iframe) 中使用的不安全值

Question

尝试从本地数据库将值作为 iframe url 传递，并且 im 收到错误消息： 资源 URL 上下文中使用的不安全值。 我正在尝试显示一系列打印机 IP，以便我能够通过网站检查它们的状态，无论如何都可以在没有 iframe 的情况下执行此操作？ 我会很高兴听到一些建议。

我是角度的新手，欢迎各种帮助 提前谢谢。

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'app-value',
templateUrl: './value.component.html',
styleUrls: ['./value.component.css']
})
export class ValueComponent implements OnInit {
values: any;
constructor(private http: HttpClient, private sanitizer: DomSanitizer) { }

ngOnInit() {
this.getValues();
}
getValues() {
this.http.get('http://localhost:5000/api/values/').subscribe(response => {
this.values = response;
}, error => {
console.log(error);
})
}
}

<H2>Print Manager</H2>
<div id="outerdiv">
<iframe src="http://192.168.1.6/general/status.html" id="inneriframe" scrolling="no"  ></iframe>
</div>
<div *ngFor="let value of values">
<p>{{value.id}},{{value.hostName}},{{value.location}},{{value.manufacturer}},{{value.ip}}</p>
<span>Hostname: {{value.hostName}}</span>
<br>
<span>Location: {{value.location}}</span>
<br>
<span>Manufacturer: {{value.manufacturer}}</span>
<br>
<span>IP: {{value.ip}}</span>
</div>

Answer 1

使用管道更好。

创建管道：在app.component.ts中(首先加载的主要组件(

import { Pipe, PipeTransform} from "@angular/core";
import { DomSanitizer } from "@angular/platform-browser";
@Pipe({ name: 'safe' })
export class SafePipe implements PipeTransform {
constructor(private sanitizer: DomSanitizer) { }
transform(url) {
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
}
}

声明管道：创建管道之后

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

用法：您可以将其与管道运算符和管道名称一起使用。例：

<iframe [src]="your_url_here | safe" id="inneriframe" scrolling="no"  ></iframe>

使用此方法，您将获得经过净化的 URL，而无需在其他组件中每次需要代码时重写代码。

Answer 2

[src]="sanitizer.bypassSecurityTrustResourceUrl('http：//'+value.ip+'/general/status.html'(" 为我解决了

Answer 3

您可以使用 AngularDomSanitizer来自@angular/platform-browser

参考角度指南了解更多信息

import {DomSanitizationService} from '@angular/platform-browser';
@Component({
templateUrl: 'temp.html'
})
export class AppComponent {
yourUrl : '';
constructor(private sanitizer : DomSanitizationService) {  
}
getSanitizedURL() {
return this.sanitizer.bypassSecurityTrustUrl(yourUrl);
}
}

.HTML：

<div id="outerdiv">
<iframe src="getSanitizedURL()" id="inneriframe" scrolling="no"></iframe>
</div>