拒绝显示在框架中，因为它将“ X-Frame-Options”设置为“ SAMEORIGIN”

我正在开发一个响应迅速的网站，以便人们可以通过手机访问该网站。该网站有一些安全部件，可以使用Google，Facebook等...（OAuth）登录。

服务器后端是使用ASP.Net Web API 2开发的，前端主要是带有一些Razor的AngularJS。

对于身份验证部分，在包括Android在内的所有浏览器中，一切都可以正常工作，但Google身份验证在iPhone上无法正常工作，这给了我此错误消息

Refused to display 'https://accounts.google.com/o/openid2/auth
?openid.ns=http://specs.openid.ne…tp://axschema.org/namePerson
/last&openid.ax.required=email,name,first,last'
in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

现在，就我而言，我在HTML文件中没有使用任何iframe。

我四处搜寻，但没有答案让我解决问题。

我找到了一个更好的解决方案，也许它可以帮助某人替代它"watch?v="，"v/"并且它将起作用

var url = url.replace("watch?v=", "v/");

在此SO帖子的帮助下花了更多时间在此之后，确定

克服“ X框架选项禁止的显示”

我设法通过添加&output=embed到URL的末尾来解决问题，然后再发布到Google URL：

var url = data.url + "&output=embed";
window.location.replace(url);

尝试使用

https://www.youtube.com/embed/YOUR_VIDEO_CODE

您可以在“嵌入代码”部分中找到所有嵌入代码，如下所示

<iframe width="560" height="315"  src="https://www.youtube.com/embed/YOUR_VIDEO_CODE" frameborder="0" allowfullscreen></iframe>

在这种情况下，他们已将标头设置为SAMEORIGIN，这意味着他们不允许在其域之外的iframe中加载资源。因此，此iframe无法显示跨域

为此，您需要匹配您的apache或您正在使用的任何其他服务中的位置

如果您正在使用apache，则在httpd.conf文件中。

  <LocationMatch "/your_relative_path">
      ProxyPass absolute_path_of_your_application/your_relative_path
      ProxyPassReverse absolute_path_of_your_application/your_relative_path
   </LocationMatch>

如果您将iframe用于vimeo，请将网址更改为：

https://vimeo.com/63534746

至：

http://player.vimeo.com/video/63534746

这个对我有用。

要将youtube视频嵌入到angularjs页面中，您只需对视频使用以下过滤器

app.filter('scrurl', function($sce) {
    return function(text) {
        text = text.replace("watch?v=", "embed/");
        return $sce.trustAsResourceUrl(text);
    };
});

<iframe class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}" frameborder="0"></iframe>

我做了以下更改，对我来说效果很好。

只需添加属性 <iframe src="URL" target="_parent" />

_parent：这将在同一窗口中打开嵌入式页面。

_blank：在其他标签中

对我来说，解决方法是进入console.developer.google.com并将应用程序域添加到OAuth 2凭据的“ Javascript Origins”部分。

来晚了，但是如果您使用native application Client ID而不是，也会导致此错误web application Client ID。

我在Angular 9中实现时遇到了同样的问题。这是我执行的两个步骤：

1. 将您的YouTube网址从更改https://youtube.com/your_code为https://youtube.com/embed/your_code。

2. 然后通过DomSanitizerAngular 传递URL 。

   import { Component, OnInit } from "@angular/core";
   import { DomSanitizer } from '@angular/platform-browser';
   
   @Component({
     selector: "app-help",
     templateUrl: "./help.component.html",
     styleUrls: ["./help.component.scss"],
   })
   export class HelpComponent implements OnInit {
   
     youtubeVideoLink: any = 'https://youtube.com/embed/your_code'
   
     constructor(public sanitizer: DomSanitizer) {
       this.sanitizer = sanitizer;   
     }
   
     ngOnInit(): void {}
   
     getLink(){
       return this.sanitizer.bypassSecurityTrustResourceUrl(this.youtubeVideoLink);
     }
   
   }

   <iframe width="420" height="315" [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

有一种解决方案对我有用，指的是父母。获得将重定向到google身份验证页面的网址后，您可以尝试以下代码：

var loc = redirect_location;      
window.parent.location.replace(loc);

谢谢你的问题。对于YouTube iframe，第一个问题是您提供的URL，是嵌入的URL还是地址栏中的URL链接。非嵌入URL的此错误，但是如果您要提供非嵌入URL，则需要在“安全管道”中进行编码，例如（对于非嵌入URL或嵌入URL）：

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

@Pipe({name: 'safe'})
export class SafePipe implements PipeTransform {

constructor(private sanitizer: DomSanitizer) {

}

transform(value: any, url: any): any {
    if (value && !url) {
        const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
        let match = value.match(regExp);
        if (match && match[2].length == 11) {
            console.log(match[2]);
            let sepratedID = match[2];
            let embedUrl = '//www.youtube.com/embed/' + sepratedID;
            return this.sanitizer.bypassSecurityTrustResourceUrl(embedUrl);
        }

     }

   }
}

它将拆分为“ vedioId”。您必须获取视频ID，然后将其设置为嵌入的URL。在HTML

 <div>
   <iframe width="100%" height="300" [src]="video.url | safe"></iframe>
 </div>

角度2/5 再次感谢。

在下面添加URL后缀

/override-http-headers-default-settings-x-frame-options

嵌入youtube聊天时遇到了类似的问题，我知道了。对于类似的问题，也许有类似的解决方案。

Refused to display 'https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' in a frame because it set 'X-Frame-Options' to 'sameorigin'

我的网页可以使用www或不使用www。因此，要使其正常工作，您需要确保加载embed_domain =值上列出的值...也许缺少变量以告诉您将iframe嵌入到哪里。要解决我的问题，必须编写脚本来检测正确的网页并执行正确的iframe嵌入域名。

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

要么

<iframe src='https://www.youtube.com/live_chat?v=yDc9BonIXXI&embed_domain=www.your.domain.web' width="100%" height="600" frameborder='no' scrolling='no'></iframe>

了解您没有使用iframe，但仍然需要在语法中添加一些变量以告诉其脚本将在何处使用。

在使用iframe登出具有不同域的子网站时遇到了类似的问题。我使用的解决方案是先加载iframe，然后在加载框架后更新源。

var frame = document.createElement('iframe');
frame.style.display = 'none';
frame.setAttribute('src', 'about:blank');
document.body.appendChild(frame);
frame.addEventListener('load', () => {
  frame.setAttribute('src', url);
});

youtube / embed，两种口味：

https://www.youtube.com/embed/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/embed/CNG7yrHHJ5A

粘贴在浏览器中并查看

原本的：

https://www.youtube.com/watch?v=eAxV4uO8oTU&list=RDeAxV4uO8oTU&start_radio=1 https://www.youtube.com/watch?v=CNG7yrHHJ5A

一个需要保持“ watch？V =“，另一个则不需要