拒绝在框架中显示“ https://www.youtube.com/watch?v=oKZRsBjQJOs”，因为它将“ X-Frame-Options”设置为“ sameorigin”

Question

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

这是我在HTML文件中的代码

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

我管道的代码是这个

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;
          }

Answer 1

将网址.all()更改为https://www.youtube.com/watch?v=TTyFV-qhQtQ

原因

https://www.youtube.com/embed/TTyFV-qhQtQ具有必需的标题。

为什么/embed

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

希望clickjacking端点可以更安全地显示在外部网站（而非embed）上。

Answer 2

您无法在 iFrame 中显示大量网站。原因是他们发送了“X-Frame-Options: SAMEORIGIN”响应头。此选项可防止浏览器显示与父页面不在同一域中的 iFrame。

我在显示 YouTube 链接时遇到了同样的错误。例如：https://www.youtube.com/watch?v=8WkuChVeL0s

我用 embed/ 替换了 watch?v=，所以有效链接是：https://www.youtube.com/embed/8WkuChVeL0s

效果很好。

尝试对您的案例应用相同的规则。

SAMEORIGIN

页面只能显示在与页面本身同源的框架中。规范让浏览器供应商来决定这个选项是否适用于顶级、父级或整个链，尽管有人认为除非所有祖先都在同一起源，否则该选项不是很有用。