拒绝显示在一个框架中，因为它设置了X-Frame-Options'& # 39; SAMEORIGIN& # 39;

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

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

对于身份验证部分，在包括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'.

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

我搜索了一下，但没有答案让我解决这个问题。

995754 次浏览
小开
最佳答案

好吧，在这篇SO文章的帮助下花了更多的时间之后

克服“x-frame-options禁止显示”

我设法解决了这个问题，在发布到谷歌url之前，在url的末尾添加&output=embed:

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

如果你在vimeo中使用iframe，请更改url:

https://vimeo.com/63534746 < a href = " https://vimeo.com/63534746 " > < / >

:

http://player.vimeo.com/video/63534746 < a href = " http://player.vimeo.com/video/63534746 " > < / >

这对我很管用。

小开
我找到了一个更好的解决办法，也许它能帮助到别人 将"watch?v="替换为"v/"，它将

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

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

小开

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

小开

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

enter image description here

为此，您需要匹配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>
小开

试着使用

https://www.youtube.com/embed/YOUR_VIDEO_CODE < a href = " 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>
小开

我做了下面的改变，并为我工作良好。

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

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

_blank:在不同的标签

小开

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

小开

有一个解决方案对我来说很有效，参考父母。在获得将重定向到谷歌身份验证页面的url后，您可以尝试以下代码:

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 < / p > 

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

< >强角2/5 再次感谢。< / p >

小开

在使用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 < / p >

粘贴到浏览器中查看

原文:

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

一个人需要保持“守望”?V="，另一个不是

小开

使用URL后缀添加以下内容

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

我在Angular 9中也遇到了同样的问题。以下是我做的两步:

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

  2. 然后通过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>
小开

有一个类似的问题，嵌入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，但是仍然可能需要添加一些变量到你的语法中，以告诉它脚本将在哪里使用。

小开

在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

瞧!

小开

如果你在谷歌文档查看器中使用iframe，请更改iframe:

iframe src="https://docs.google.com/viewer?url=' + url_your_document

:

iframe src="https://docs.google.com/viewer?url=' + url_your_document + '&embedded=true"

这对我很管用。

小开

下面是我在Iframe中使用并成功显示的代码，我正在c#中使用cshtml制作此代码。

@if (item.DisplayValue2 != null)
{
<div id="collapse_@item.ID" class="collapse" role="tabpanel" aria-labelledby="heading_@item.ID" data-parent="#accordion" style="">
<div class="card-body">
@item.DisplayValue1
</div>
<br /> <br />
@{
var url = item.DisplayValue2.Replace("watch?v=", "embed/");
}
<iframe width="560" height="315" src=@url frameborder="0" allowfullscreen                            style="margin-bottom: 25px; margin-left: 25px;">
</iframe></div>
小开

我测试了所有的项目，但这段代码帮助我:

       ?rs:embed=true

例如，我想在我的应用程序中加载一个pbix。我使用这个代码:

   <iframe id="pageIFrame" class="iFrame" src="http://MyServer/ReportS/powerbi/Test?rs:embed=true"></iframe>

这很有效。

小开

在PHP文件(index.php)中，将这一行添加到顶部

<?php
header('Cross-Origin-Embedder-Policy: require-corp | same-site | same-origin | cross-origin');
?>

如果还是不行，试试这个

<?php
header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Headers: Accept, X-Access-Token, X-Application-Name, X-Request-Sent-Time");
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Origin: *");
header('Cross-Origin-Opener-Policy: same-origin');
header('Cross-Origin-Resource-Policy: same-site | same-origin | cross-origin');
header('Cross-Origin-Embedder-Policy: require-corp | same-site | same-origin | cross-origin');
?>

提交答案