Question

以下是显示的内容，我正在尝试在我的网站上显示youtube内容，但未显示

这是浏览器上显示的html

<iframe width="480" height="270" src="https://www.youtube.com/embed/HK6B2da3DPA?feature=oembed" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>

我使用以下内容绑定该值：

<div class="text-center"> {{articleDatils.raw_content_path}} </div>

Answer 1

在iframe中使用URL之前，您需要对其进行清理。之所以需要执行此操作，是因为它有助于防止跨站点脚本编写，即，它可以防止攻击者将恶意的客户端脚本注入网页中，这通常称为跨站点脚本编写或XSS。

此方法对我有用：

导入此头文件：

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

我创建了一个函数为：

getUrl(post)
{
  return this.sanitizer.bypassSecurityTrustResourceUrl('https://'+ post.url +'/');
}

然后在模板中：

<div  class="iframe-container d-none d-lg-block">
   <iframe [src]='getUrl(post)'>
      <p>Your browser does not support iframes.</p>
   </iframe> 
</div>

iframe无法在角度5中工作，它正在显示html内容

1 个答案: