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

Posted 2023-02-16

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

【英文标题】：Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

【发布时间】：2013-12-28 05:27:26

【问题描述】：

我正在开发一个响应式网站，以便人们可以通过手机访问它。该网站有一些可以使用 Google、Facebook 等 (OAuth) 登录的安全部分。

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

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

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

【问题讨论】：

iframe 有时会被您连接的服务使用，即使它不可见（乍一看）

【参考方案1】：

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

       ?rs:embed=true

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

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

它有效。

【参考方案2】：

这是我在 Iframe 中成功使用和显示的代码，我正在 C# 中的 cshtml 中制作此代码。

@if (item.DisplayValue2 != null)

   <div id="[e-mail]" class="collapse" role="tabpanel" aria-labelledby="[e-mail]" data-parent="#accordion" style="">
   <div class="card-body">
      @item.DisplayValue1
   </div>
   <br /> <br />
   @
       var url = item.DisplayValue2.Replace("watch?v=", "embed/");
     
    <iframe   src=@url frameborder="0" allowfullscreen                            style="margin-bottom: 25px; margin-left: 25px;">   
   </iframe></div>

【参考方案3】：

如果您将 iframe 用于 Google Docs Viewer，请将 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"

它对我有用。

【参考方案4】：

在 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

瞧！

【参考方案5】：

嵌入 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'   frameborder='no' scrolling='no'></iframe>

或

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

了解您没有使用 iframe，但仍可能需要在语法中添加一些变量来告诉它要在哪里使用脚本。

【参考方案6】：

我在 Angular 9 中实施时遇到了同样的问题。这是我所做的两个步骤：

将您的 YouTube 网址从 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   [src]="getLink()" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

【参考方案7】：

在下面添加 URL 后缀

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

【讨论】：

@NickDimou 试试这个linkedin.com/pulse/working-iframe-angular-thiago-adriano

【参考方案8】：

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

【参考方案9】：

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

【参考方案10】：

感谢您的提问。 对于 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);
        

     

   

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

 <div>
   <iframe   [src]="video.url | safe"></iframe>
 </div>

角度 2/5 再次感谢。

【讨论】：

很好的解决方案。谢谢。

【参考方案11】：

有一个对我有用的解决方案，指的是父母。获取到会重定向到google认证页面的url后，可以试试下面的代码：

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

【参考方案12】：

要将 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>

【参考方案13】：

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

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

【讨论】：

您也可以将其更改为使用“embed/”而不是“v/”，这样完整的 URL 将变为：<iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen></iframe>

我建议将此答案更改为“embed/”，因为“v/”不再起作用

【参考方案14】：

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

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

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

_blank: 在不同的标签中

【讨论】：

我不知道该答案与原始问题的相关性如何，但就我而言，在不同的情况下，它提供了解决方案

【参考方案15】：

尝试使用

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

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

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

【参考方案16】：

在这种情况下，他们将标头设置为 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>

【讨论】：

什么是your_relative_path？

your_relative_path 是什么？

【参考方案17】：

好的。在这篇 SO 帖子的帮助下花费了更多时间

Overcoming "Display forbidden by X-Frame-Options"

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

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

【讨论】：

实际上，正如我在原始帖子中所述，这是针对 OAUTH 的。在 OAUTH 2.0 中仍然如此。虽然，Google 已更改其设置以使用该服务，所以现在您必须特别更改一些属性才能使用 OAUTH 2.0，而 OWIN 3.0 中间件就是这种情况。如果您收到“access_denied”错误消息，请参阅此链接。 blogs.msdn.com/b/webdev/archive/2014/07/02/…

@AliHmer 非常感谢朋友。你拯救了我的一天 :) &output=embed 对我来说就像一个魅力.. :)

也不适用于应用 web 视图中的 Google 日历 iframe。

如果我想在 iframe 中的移动应用程序中显示我的其他网站，我该怎么做

@AliHmer 当我使用&output=embed 时出现A potentially dangerous Request.Path value was detected 错误。可以给我一个建议/解决方案来解决这个问题吗？

【参考方案18】：

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

https://vimeo.com/63534746

到：

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

它对我有用。

【讨论】：

如果有人快速通过并使用此解决方案：请注意从 HTTPS 到 HTTP 的更改，这是一种不安全的协议。您的要求可能会有所不同，但请注意。我个人会避免这种解决方案。还; HTTP 很快就会过时，如果浏览器在不久的将来完全不支持它，我不会感到惊讶。

【参考方案19】：

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

【讨论】：

什么意思？我还注意到该框架在 Safari 窗口中有效，但在应用程序的 webview 的 iframe 中无效，但是您如何更改呢？

我的问题类似，在制作 Web 应用程序客户端 ID 时，我没有将我网站的 uris 包含在两个部分中，您在谷歌开发者控制台中制作客户端 ID 时将它们放在那里

【参考方案20】：

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