克服“X-Frame-Options 禁止显示”问题

Question

我正在编写一个小网页，其目的是构建一些其他页面，只是将它们合并到一个浏览器窗口中以便于查看。我尝试框架的一些页面禁止被框架并抛出“拒绝显示文档，因为 X-Frame-Options 禁止显示”。 Chrome 中的错误。我知道这是一个安全限制（有充分的理由），并且无权更改它。

是否有任何替代的框架或非框架方法可以在单个窗口中显示页面，而不会被 X-Frame-Options 标头绊倒？

Answer 1

如果一个网站拒绝被框架，就没有办法克服这个问题。

（这篇文章之前包含了错误的建议，建议添加另一个值为 GOFORIT 的 X-Frame-Options 标头，但在所有实现中，这也会导致网站拒绝被框架并且实际上并没有解决OP的问题。）

Answer 2

如果您在 YouTube 视频中遇到此错误，请不要使用完整的 url，而是使用共享选项中的嵌入 url。它看起来像 http://www.youtube.com/embed/eCfDxZxTBW4

您也可以将 watch?v= 替换为 embed/，这样http://www.youtube.com/watch?v=eCfDxZxTBW4 变为 http://www.youtube.com/embed/eCfDxZxTBW4

Answer 3

如果您在尝试将 Google 地图嵌入 iframe 时遇到此错误，则需要将 &output=embed 添加到源链接。

Answer 4

更新 2019：您可以仅使用客户端绕过

Answer 5

在 facebook 选项卡中添加

  target='_top'

到我的链接解决了我的问题...

Answer 6

如果您在尝试嵌入 Vimeo 内容时遇到此错误，请更改 iframe 的 src，

来自：https://vimeo。 com/63534746
至：http://player.vimeo.com/video/63534746

Answer 7

当我尝试在 iframe 中嵌入moodle 2时，我遇到了同样的问题，解决方案是站点管理►安全►HTTP安全并选中允许框架嵌入

Answer 8

我尝试了几乎所有的建议。然而，唯一真正解决问题的是：

1. 在 PHP 文件所在的同一文件夹中创建一个 .htaccess。

2. 将此行添加到 htaccess：

   标头始终未设置 X-Frame-Options

通过 iframe 嵌入 PHP来自另一个域的应该随后可以工作。

另外，您可以在 PHP 文件的开头添加：

header('X-Frame-Options: ALLOW');

但是，在我的情况下没有必要。

Answer 9

将外部网站加载到 iFrame 的解决方案，即使 x-frame 选项设置为拒绝外部网站。

如果您想将其他网站加载到 iFrame 中，您会得到 显示被 X-Frame-Options 禁止” 错误，那么您实际上可以通过创建服务器端代理脚本来克服这个问题。

iFrame 的 src 属性可能有一个如下所示的 url：/proxy.php?url=https://www.example.com/page&key=somekey

然后 proxy.php 看起来像这样：

if (isValidRequest()) {
   echo file_get_contents($_GET['url']);
}

function isValidRequest() {
    return $_SERVER['REQUEST_METHOD'] === 'GET' && isset($_GET['key']) && 
    $_GET['key'] === 'somekey';
}

这绕过了块，因为它只是一个 GET 请求，可能是一个普通的浏览器页面访问。

请注意：您可能希望提高此脚本的安全性。因为黑客可以通过您的代理脚本开始加载网页。

Answer 10

这就是解决方案！

FB.Event.subscribe('edge.create', function(response) {
    window.top.location.href = 'url';
});

唯一适用于 Facebook 应用程序的东西！

Answer 11

如果您使用 Content-Security-Policy，X-Frame-Options Allow-From https://... 似乎已被贬值并被替换（并被忽略）标题代替。

以下是完整参考：https://content-security-policy.com/

Answer 12

我在使用 mediawiki 时遇到了同样的问题，这是因为服务器出于安全原因拒绝将页面嵌入到 iframe 中。

我解决了它写入

$wgEditPageFrameOptions = "SAMEORIGIN"; 

mediawiki php 配置文件。

希望有帮助。

Answer 13

未提及，但在某些情况下可以提供帮助：

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState !== 4) return;
    if (xhr.status === 200) {
        var doc = iframe.contentWindow.document;
        doc.open();
        doc.write(xhr.responseText);
        doc.close();
    }
}
xhr.open('GET', url, true);
xhr.send(null);

Answer 14

FWIW：

当这个“破坏者”代码出现时，我们需要杀死我们的 iFrame 。因此，我使用 PHP function get_headers($url); 来检查远程 URL，然后再将其显示在 iFrame 中。为了获得更好的性能，我将结果缓存到一个文件中，这样我就不会每次都建立 HTTP 连接。

Answer 15

我使用的是 Tomcat 8.0.30，所有建议都不适合我。由于我们希望更新 X-Frame-Options 并将其设置为 ALLOW，因此我配置为允许嵌入 iframe：

• 导航到 Tomcat conf 目录，编辑web.xml 文件
• 添加以下过滤器：

<filter>
            <filter-name>httpHeaderSecurity</filter-name>
            <filter-class>org.apache.catalina.filters.HttpHeaderSecurityFilter</filter-class>
                   <init-param>
                           <param-name>hstsEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingEnabled</param-name>
                           <param-value>true</param-value>
                   </init-param>
                   <init-param>
                           <param-name>antiClickJackingOption</param-name>
                           <param-value>ALLOW-FROM</param-value>
                   </init-param>
            <async-supported>true</async-supported>
       </filter>

       <filter-mapping>
                   <filter-name>httpHeaderSecurity</filter-name>
                   <url-pattern>/*</url-pattern>
                   <dispatcher>REQUEST</dispatcher>
       </filter-mapping> 

• 重新启动 Tomcat 服务
• 使用 iFrame 访问资源。

Answer 16

如果您不控制 iframe 中所需源的标头，唯一真正的答案就是代理它。让服务器充当客户端，接收源，去除有问题的标头，根据需要添加 CORS，然后 ping 您自己的服务器。

还有另一个答案解释了如何编写这样的代理。这并不困难，但我确信以前一定有人这样做过。由于某种原因，很难找到它。

我终于找到了一些来源：

https://github.com/Rob-- W/cors-anywhere/#documentation

^ 首选。如果你很少需要使用，我想你可以使用他的heroku应用程序。否则，它是在您自己的服务器上自行运行的代码。请注意限制是什么。

whateverorigin.org

^ 第二选择，但相当旧。据说Python中较新的选择： https://github.com/Eiledon/alloworigin

然后是第三个选择：

http://anyorigin.com/

这似乎允许一点免费使用，但会将您置于公开状态耻辱名单如果您没有支付并使用了一些未指定的金额，只有支付费用后才能将您从该金额中删除......

Answer 17

唯一有一堆答案的问题。欢迎来到我希望在截止日期晚上 10:30 工作时我希望能看到的指南……FB 使用画布应用程序做了一些奇怪的事情，好吧，你已经被警告了。如果您还在这里并且您有一个将出现在 Facebook Canvas 后面的 Rails 应用程序，那么您将需要：

Gemfile:

gem "rack-facebook-signed-request", :git => 'git://github.com/cmer/rack-facebook-signed-request.git'

config/facebook.yml

facebook:
  key: "123123123123"
  secret: "123123123123123123secret12312"

config/ application.rb

config.middleware.use Rack::Facebook::SignedRequest, app_id: "123123123123", secret: "123123123123123123secret12312", inject_facebook: false

config/initializers/omniauth.rb

OmniAuth.config.logger = Rails.logger
SERVICES = YAML.load(File.open("#{::Rails.root}/config/oauth.yml").read)
Rails.application.config.middleware.use OmniAuth::Builder do
  provider :facebook, SERVICES['facebook']['key'], SERVICES['facebook']['secret'], iframe:   true
end

application_controller.rb

before_filter :add_xframe
def add_xframe
  headers['X-Frame-Options'] = 'GOFORIT'
end

您需要一个控制器来从 Facebook 的画布设置进行调用，我使用了/canvas/ 并使路由成为此应用程序的主要 SiteController：

class SiteController < ApplicationController
  def index
    @user = User.new
  end
  def canvas
    redirect_to '/auth/failure' if request.params['error'] == 'access_denied'
    url = params['code'] ? "/auth/facebook?signed_request=#{params['signed_request']}&state=canvas" : "/login"
    redirect_to url
  end
  def login
  end
end

login.html.erb

<% content_for :javascript do %>
  var oauth_url = 'https://www.facebook.com/dialog/oauth/';
  oauth_url += '?client_id=471466299609256';
  oauth_url += '&redirect_uri=' + encodeURIComponent('https://apps.facebook.com/wellbeingtracker/');
  oauth_url += '&scope=email,status_update,publish_stream';
console.log(oauth_url);
  top.location.href = oauth_url;
<% end %>

Sources

• 我认为配置来自omniauth的示例。
• gem 文件（这是关键！！！）来自： slideshare 我学到的东西...
• 这个堆栈问题有整个 Xframe 角度，所以你会得到一个空格，如果
  您没有将此标头放入应用程序控制器中。
• 我的朋友 @rafmagana 写了这篇 heroku 指南，现在你可以将其用于 Rails答案和与你同行的巨人的肩膀。

Answer 18

<form target="_parent" ... />

使用 Kevin Vella 的想法，我尝试在 PayPal 按钮生成器制作的表单元素上使用上述内容。为我工作，这样 Paypal 就不会在新的浏览器窗口/选项卡中打开。

更新

以下是一个示例：

从今天（2021 年 1 月 19 日）生成按钮后，PayPal 会自动在表单target="_top" > 元素，但如果这不适用于您的上下文，请尝试不同的 target 值。我建议 _parent —— 至少在我使用这个 PayPal 按钮时是有效的。

有关详细信息，请参阅表单目标值。

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_parent">
  <input type="hidden" name="cmd" value="_xclick">
  <input type="hidden" name="business" value="[email protected]">
  <input type="hidden" name="lc" value="US">
  <input type="hidden" name="button_subtype" value="services">
  <input type="hidden" name="no_note" value="0">
  <input type="hidden" name="currency_code" value="USD">
  <input type="hidden" name="bn" value="PP-BuyNowBF:btn_buynowCC_LG.gif:NonHostedGuest">
  <input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_buynowCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
  <img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

Answer 19

网站所有者使用 X-Frame-Options 响应标头，以便无法在 Iframe 中打开其网站。这有助于保护用户免受点击劫持攻击

您可以采用以下几种方法如果您想在自己的计算机上禁用 X-Frame-Options，请尝试。

服务器端配置

如果您拥有服务器或可以与站点所有者合作，那么您可以要求设置一个配置，以便根据某些条件不发送 Iframe buster 响应标头。条件可以是附加请求标头或 URL 中的参数。

例如 - 网站所有者可以添加额外的代码，以便在使用 ?in_debug_mode=true 查询参数打开网站时不发送 Iframe buster 标头。

使用像 Requestly 这样的浏览器扩展来删除响应标头

您可以使用任何浏览器扩展，例如 Requestly，它允许您修改请求和响应头。响应标头。这是一个 Requestly 博客，解释了如何通过绕过 Iframe buster 标头将网站嵌入到 Iframe。

配置直通代理并从中删除标头

如果您需要为多个人绕过 Iframe buster 标头，那么您还可以配置一个直通代理，仅删除 Frame buster 响应标头并返回返回响应。然而，这编写和设置起来非常复杂。通过代理在 Iframe 中打开的网站还存在一些其他挑战，例如身份验证等，但这种方法可以很好地适用于简单的网站。

PS - 我已经构建了这两种解决方案，并且对这两种解决方案都有第一手经验。

Answer 20

我不确定它有多相关，但我为此构建了一个解决方法。在我的网站上，我想在包含加载 URL 的 iframe 的模式窗口中显示链接。

我所做的是，我将链接的点击事件链接到这个 javascript 函数。所有这一切都是向 PHP 文件发出请求，该文件在决定是否在模式窗口中加载 URL 或重定向之前检查 URL 标头中的 X-FRAME-Options。

这是该函数：

  function opentheater(link, title){
        $.get( "url_origin_helper.php?url="+encodeURIComponent(link), function( data ) {
  if(data == "ya"){
      $(".modal-title").html("<h3 style='color:480060;'>"+title+"   <small>"+link+"</small></h3>");
        $("#linkcontent").attr("src", link);
        $("#myModal").modal("show");
  }
  else{
      window.location.href = link;
      //alert(data);
  }
});


        }

这是检查它的 PHP 文件代码：

<?php
$url = rawurldecode($_REQUEST['url']);
$header = get_headers($url, 1);
if(array_key_exists("X-Frame-Options", $header)){
    echo "nein";
}
else{
    echo "ya";
}


?>

希望这会有所帮助。

Answer 21

我在运行 WordPress 网站时遇到了这个问题。我尝试了各种方法来修复它，但不确定如何解决，最终问题是因为我使用带屏蔽的 DNS 转发，并且没有正确处理到外部站点的链接。即我的网站托管在 http://123.456.789/index.html 但被屏蔽以运行http://somewebSite.com/index.html。当我在浏览器中输入 http://123.456.789/index.html 时，单击这些相同的链接会导致JS 控制台中没有 X-frame-origins 问题，但运行 http://somewebSite.com/index.html 做到了。为了正确屏蔽，您必须将主机的 DNS 名称服务器添加到域服务中，即 godaddy.com 应该具有名称服务器，例如 ns1.digitalocean.com、ns2.digitalocean.com、ns3.digitalocean.com（如果您是）使用 digitalocean.com 作为您的托管服务。

Answer 22

令人惊讶的是，这里没有人提到 Apache 服务器的设置（*.conf 文件）或 .htaccess 文件本身是导致此问题的原因错误。搜索 .htaccess 或 Apache 配置文件，确保您没有将以下内容设置为 DENY：

始终标头设置 X-Frame-Options DENY

将其更改为 SAMEORIGIN，使事情按预期工作：

标头始终设置 X-Frame-Options SAMEORIGIN

Answer 23

我遇到了这个问题，并通过编辑 httd.conf 解决了它，

<IfModule headers_module>
    <IfVersion >= 2.4.7 >
        Header always setifempty X-Frame-Options GOFORIT
    </IfVersion>
    <IfVersion < 2.4.7 >
        Header always merge X-Frame-Options GOFORIT
    </IfVersion>
</IfModule>

我将 SAMEORIGIN 更改为 GOFORIT
并重新启动服务器

Answer 24

如果要从整个目录中删除 X-Frame-Options，请编辑 .htaccess。

并添加行： 标头始终取消设置 X-Frame-Options

[内容来自： 克服“X-Frame-Options禁止显示”

Answer 25

使用下面给出的这一行代替 header() 函数。

echo "<script>window.top.location = 'https://apps.facebook.com/yourappnamespace/';</script>";

Answer 26

试试这个东西，我认为没有人在主题中建议这个，这将解决你问题的 70%，对于其他一些页面，你必须废弃，我有完整的解决方案，但不适合公众，

请在下面添加到你的 iframe

沙箱="允许相同来源允许脚本允许弹出窗口允许表单"