拒绝在框架中显示，因为它将“x帧选项”设置为“SAMEORIGIN”

I am developing a website that is supposed to be responsive so that people can access it from their phones. The site has got some secured parts that can be logged into using Google, Facebook, ...etc (OAuth).

我正在开发一个网站，它应该是响应性的，这样人们就可以从他们的手机*问它。该网站已经有一些安全的部分可以登录使用谷歌，Facebook，…等(OAuth)。

The server backend is developed using ASP.Net Web API 2 and the front end is mainly AngularJS with some Razor.

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

For the authentication part, everything is working fine in all browsers including Android but the Google authentication is not working on iPhone and it gives me this error message

对于身份验证部分，所有浏览器都可以正常工作，包括Android，但是谷歌认证并没有在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'.

Now as far I am concerned I do not use any iframe in my HTML files.

现在我担心的是，我不会在HTML文件中使用任何iframe。

I googled around, but no answer got me to fix the issue.

我用谷歌搜索了一下，但没有回答让我解决这个问题。

11 个解决方案

#1

147

I found a better solution, maybe it can help somebody replace "watch?v=" by "v/" and it will work

我找到了一个更好的解决方案，也许它可以帮助别人代替“手表”?v=" by "v/"它会起作用。

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

#2

O.K. after spending more time on this with the help of this SO post

好吧，在这篇文章的帮助下花更多的时间在这上面。

Overcoming "Display forbidden by X-Frame-Options"

克服“x帧选项禁止显示”

I managed to solve the issue by adding &output=embed to the end of the url before posting to the google URL:

我设法通过添加和输出=嵌入到url的末尾来解决这个问题，然后将其发布到谷歌url:

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

#3

They have set the header to SAMEORIGIN in this case, which means that they have disallowed loading of the resource in an iframe outside of their domain. So this iframe is not able to display cross domain

在本例中，它们将消息头设置为SAMEORIGIN，这意味着它们不允许在其域之外的iframe中加载资源。所以这个iframe不能显示跨域。

For this purpose you need to match the location in your apache or any other service you are using

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

If you are using apache then in httpd.conf file.

如果在httpd中使用apache。conf文件。

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

#4

Try to use

尝试使用

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

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

You can find all embeded code in 'Embeded Code' section and that looks like this

您可以在“嵌入式代码”一节中找到所有嵌入的代码，看起来是这样的。

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

#5

If you are using iframe for vimeo, change the url from:

如果您正在为vimeo使用iframe，请将url从:

https://vimeo.com/63534746

https://vimeo.com/63534746

to:

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

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

It works for me.

它适合我。

#6

For embeding youtube video into your angularjs page, you can simply use following filter for your video

为了将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>

#7

I did the below changes and works fine for me.

我做了下面的修改，对我来说没问题。

Just add the attribute <iframe src="URL" target="_parent" />

只需添加属性。</p>

_parent: this would open embedded page in same window.

父类:这将在同一个窗口中打开嵌入的页面。

_blank: In different tab

平等:在不同的选项卡

#8

For me the fix was to go into console.developer.google.com and add the application domain to "Javascript Origins" section of OAuth 2 credentials.

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

#9

Little late, but this error can also be caused if you use a native application Client ID instead of a web application Client ID.

如果您使用本机应用程序客户端ID而不是web应用程序客户机ID，则会导致此错误。

#10

There is a solution that worked for me, referring to the parent. After getting the url that will redirect to google authentication page, you can try the following code:

有一种方法对我有效，指的是父母。获取将重定向到谷歌认证页面的url后，您可以尝试以下代码:

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

#11

Thanks for the question. For YouTube iframe the first issue is the URL you have given, is it embedded URL or URL link from address bar. this error for non embed URL but if you want to give non embed URL then you need to code in "safe Pipe" like(for both non embedded or embed URL ) :

谢谢你的问题。对于YouTube iframe，第一个问题是你提供的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);
        }

     }

   }
}

it will split out "vedioId". You have to get video id then set to URL as embedded. In Html

它会分裂成“vedioId”。你必须将视频id设置为嵌入的URL。在Html中

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

Angular 2/5 thanks again.

再次感谢角2/5。

#1

147