时间戳

首页 > 解决方案 > 拒绝显示框架，因为它将“X-Frame-Options”设置为“sameorigin”

cordova - 拒绝显示框架，因为它将“X-Frame-Options”设置为“sameorigin”

问题描述

我正在尝试在 ionic3 中设置 iframe，但我遇到了这个问题拒绝显示网页框架。

这是我的代码。

 <ion-content>
      <div #frame style="width:100%; height:100%; overflow:scroll !important;-webkit-overflow-scrolling:touch !important">
        <iframe [src]="url" class="iframe" scrolling="yes" ></iframe>
      </div>
    </ion-content>

 onInput() {
    this.open = true;
    this.url = this.domSanitizer.bypassSecurityTrustResourceUrl('https://www.youtube.com/embed/results?search_query=' + this.myInput);
}

标签： cordovaionic-frameworkiframecors

解决方案

当您发送GET、POST、iframe (GET)等请求时。您的浏览器或 WebView 默认在“Request-Headers”中添加一个带有 name 的标题"origin"。那个标题，不能改变它。

在您的情况下，我可以看到您尝试嵌入的网址是："https://www.youtube.com/embed/results?search_query= + this.myInput"但 Youtube 的文档说网址必须是："http://www.youtube.com/embed/VIDEO_ID?origin=http://yourPage.com"。

当您使用<iframe>Youtube 时，始终必须在链接的参数中发送来源。

origin： 此参数为 IFrame API 提供额外的安全措施，仅支持 IFrame 嵌入。如果您使用的是 IFrame API，这意味着您将 enablejsapi 参数值设置为 1，则应始终将您的域指定为源参数值。 https://developers.google.com/youtube/player_parameters?hl=en-419#origin

在这里，您有一个指向 Youtube 文档的链接：https ://developers.google.com/youtube/player_parameters?hl=en-419

问候！

推荐阅读