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

【问题标题】：Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'拒绝在框架中显示，因为它将“X-Frame-Options”设置为“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 有时会被您连接的服务使用，即使它不可见（乍一看）

标签： angularjs asp.net-web-api google-oauth


【解决方案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="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>

    【讨论】：

      【解决方案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 + '&amp;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' 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，但仍可能需要在语法中添加一些变量来告诉它要在哪里使用脚本。

          【讨论】：

            【解决方案6】：

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

            1. 将您的 YouTube 网址从 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>

            【讨论】：

              【解决方案7】：

              在下面添加 URL 后缀

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

              【讨论】：

              【解决方案8】：
              【解决方案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 width="100%" height="300" [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);
    };
});
                  &lt;iframe class="ytplayer" type="text/html" width="100%" height="360" src="{{youtube_url | scrurl}}" frameborder="0"&gt;&lt;/iframe&gt;

                  【讨论】：

                    【解决方案13】：

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

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

                    【讨论】：

                    • 您也可以将其更改为使用“embed/”而不是“v/”，这样完整的 URL 将变为：&lt;iframe width='1080' height='760' src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
                    • 我建议将此答案更改为“embed/”，因为“v/”不再起作用
                    【解决方案14】：

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

                    只需添加属性&lt;iframe src="URL" target="_parent" /&gt;

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

                    _blank: 在不同的标签中

                    【讨论】：

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

                    尝试使用

                    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>

                    【讨论】：

                      【解决方案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"

                      在发布到谷歌网址之前，我设法通过在网址末尾添加&amp;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 当我使用&amp;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”部分。

                      【讨论】：

                        猜你喜欢
                        • 2017-05-22
                        • 2022-11-29
                        • 2016-10-08
                        • 2018-02-22
                        • 2018-08-05
                        • 2020-11-07
                        • 1970-01-01
                        相关资源
                        最近更新 更多
                        热门标签
                        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode