【问题标题】：Refused to display 'https://www.youtube.com/watch?v=oKZRsBjQJOs' in a frame because it set 'X-Frame-Options' to 'sameorigin'拒绝在框架中显示“https://www.youtube.com/watch?v=oKZRsBjQJOs”，因为它将“X-Frame-Options”设置为“sameorigin”
【发布时间】：2019-01-29 06:19:43
【问题描述】：

我需要将来自 youtube 的视频放在我的网站中，但 URL 是一个变量，我创建了一个可以放置的管道，但不起作用。

这是我在 HTML 文件中的代码

&lt;iframe width="670" height="348" [src]=" video | video" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen&gt;&lt;/iframe&gt;

我的管道代码是这样的

export class VideoPipe implements PipeTransform {

    constructor (private domSanitizer:DomSanitizer ){ }

    transform(url: string): any {
        return this.domSanitizer.bypassSecurityTrustResourceUrl( url );
    }

}

但是当我尝试输入视频 URL 时，我得到了错误。

我在开关盒中分配 URL 视频

case 'marketing':{
              this.bodyClass="background-marketing-text";
              this.btnClass="btnMarketing";
              this.video="https://www.youtube.com/watch?v=TTyFV-qhQtQ";
              break;
          }

【问题讨论】：

标签： html angularjs typescript pipe

【解决方案1】：

将您的网址 https://www.youtube.com/watch?v=TTyFV-qhQtQ 更改为 https://www.youtube.com/embed/TTyFV-qhQtQ

原因

/embed 具有所需的标头。

为什么是`X-Frame-Options`

它是为了用户安全而存在的。防止clickjacking : https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options

embed 端点旨在更安全地显示在外部网站上（而不是 youtube.com）。

【讨论】：

原因

为什么是X-Frame-Options

为什么是`X-Frame-Options`