gpt4 book ai didi

javascript - 从数据库中将 Iframe 注入(inject) Angular 2

转载 作者:行者123 更新时间:2023-11-30 15:37:02 25 4
gpt4 key购买 nike

我需要有关 Angular 2 中的 iframe 的帮助。

首先将 iframe 直接嵌入到组件模板中效果很好。

<iframe 
src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl'
allowtransparency='true'
frameborder='0'
scrolling='no'
width='80%'
height='500'>
</iframe>

下面是 safeUrl 管道的代码

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

@Pipe({
name: 'safeUrl'
})
export class SafeUrlPipe implements PipeTransform {

constructor(private sanitizer: DomSanitizationService) {

}

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

}

一切正常。

问题是当我想从数据库中加载这个 iframe 时会抛出一个错误并且不会呈现 iframe

 ERROR: browser_adapter.js:90WARNING: sanitizing HTML stripped some content (see http://g.co/ng/security#xss).

此 Iframe 正在从 nosql 数据库中获取,并返回到嵌套在 HTML 脚本中的 Angular 2。

下面是从数据库中获取内容的示例:

"<h2>Some text returned from the DB</h2>
<iframe
src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl'
allowtransparency='true'
frameborder='0'
scrolling='no'
width='80%'
height='500'>
</iframe>
<p>Some more text returned from the DB</p>"

关于从数据库返回时如何让它在 Angular 2 上呈现的任何建议?谢谢。

更新

这就是我将嵌套在 HTML 代码块中的 Iframe 从数据库添加到 {{ (post$ | async)?.description }} 的方式,如下所示。

<h2>{{ (post$ | async)?.title }}</h2>
<div innerHTML="{{ (post$ | async)?.description }}" ></div>

谢谢!

最佳答案

使用

<div [innerHTML]="(post | async)?.content | safeHtml }}" >

其中 safeHtml 是一个类似于 safeUrl 的管道,但它适用于 this.sanitizer.bypassSecurityTrustHtml(html);

并删除| safeUrl 来自

src='http://plnkr.co/edit/zZ0BgJHvQl5CfrZZ5kzg?p=preview | safeUrl' 

使用 src="{{...}}" 的字符串绑定(bind)不适用于 | safeHtml,而不是使用 [src]="... | safeHtml"

关于javascript - 从数据库中将 Iframe 注入(inject) Angular 2,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41381717/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com