Question

我正在开发一个应该响应的网站，以便人们可以通过手机访问它。该网站有一些安全的部分，可以使用谷歌，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。

我用Google搜索，但没有回答让我解决问题。

Answer 1

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

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

Answer 2

O.K。在这篇SO帖子的帮助下花了更多时间之后

Overcoming "Display forbidden by X-Frame-Options"

我设法通过在发布到Google网址之前将&output=embed添加到网址末尾来解决问题：

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

Answer 3

尝试使用

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>

Answer 4

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

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

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

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

Answer 5

如果您使用iframe进行vimeo，请更改以下网址：

https://vimeo.com/63534746

为：

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

它对我有用。

Answer 6

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 7

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

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

即可

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

_blank：在不同的标签

中

Answer 8

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

Answer 9

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

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

然后通过Angular的DomSanitizer传递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>

Answer 10

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

Answer 11

感谢您的提问。对于YouTube iframe，第一个问题是您提供的网址，是地址栏中的嵌入式网址或网址链接。非嵌入网址的此错误，但如果您想要提供非嵌入网址，则需要在＆＃34; safe Pipe＆＃34;中进行编码。喜欢（对于非嵌入或嵌入的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);
        }

     }

   }
}

它会分开＆＃34; vedioId＆＃34;。您必须获取视频ID，然后将其设置为嵌入的URL。在Html中

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

Angular 2/5 再次感谢。

Answer 12

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

filter: grayscale(1) brightness(2);

Answer 13

在下面添加URL后缀

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

Answer 14

在使用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);
});

Answer 15

嵌入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，也可以不使用。因此，要使其正常工作，您需要确保加载 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，但是仍然需要在语法中添加一些变量，以告诉其脚本将在何处使用。

Answer 16

在Apache上，您需要编辑security.conf：

nano /etc/apache2/conf-enabled/security.conf

并设置：

Header set X-Frame-Options: "sameorigin"

然后启用mod_headers：

cd /etc/apache2/mods-enabled

ln -s ../mods-available/headers.load headers.load

然后重新启动Apache：

service apache2 restart

瞧！

Answer 17

一个简单的解决方案是在Chrome中添加“忽略X-Frame标头”扩展名。

Answer 18

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 =“，另一个则不需要

拒绝在框架中显示，因为它设置了X-Frame-Options＆＃39;到＃SAMEORIGIN＆＃39;

18 个答案: