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

Posted 2023-02-16

【中文标题】克服“X-Frame-Options 禁止显示”

【英文标题】：Overcoming "Display forbidden by X-Frame-Options"

【发布时间】：2011-10-03 17:32:45

【问题描述】：

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

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

【问题讨论】：

如果它们是您的页面，请移除帧限制器。否则，请尊重页面作者的意愿，不要陷害他们。

如果您在 Facebook 应用程序中遇到此错误并使用 AJAX 调用，我在某处看到 Facebook 非常喜欢使用 # 标签作为它的 ajax 联系人，因此请尝试更改链接，对我有用。

@MarcB Chrome 和 Firefox 在本机 UI chrome 中合乎道德地框架非所有网站。这些程序还允许对其所有者 FWIW 放宽同源政策。正如 garen-checkly 所说，“我正在编写一个小网页，其目的是为其他几个页面加框，只是为了将它们合并到一个浏览器窗口中以便于查看。”这基本上是对网络浏览器的扩展，并且完全符合道德规范。所述意图与编写 bash 脚本来打开和排列浏览器窗口没有什么不同。

检查Surfly。它可以完全满足您的需求。

@MarcB 这没用。 OP 可能不关心页面作者的意愿。

【参考方案1】：

我遇到了类似的问题，我试图在 iframe 中显示我们自己网站的内容（作为带有 Colorbox 的灯箱式对话框），并且我们有一个服务器范围的“X-Frame-Options源服务器上的 SAMEORIGIN" 标头阻止它在我们的测试服务器上加载。

这似乎没有在任何地方记录，但如果您可以编辑您尝试 iframe 的页面（例如，它们是您自己的页面），只需发送另一个带有任何字符串的 X-Frame-Options 标头at all 禁用 SAMEORIGIN 或 DENY 命令。

例如。对于 php，把

<?php
    header('X-Frame-Options: GOFORIT'); 
?>

在你的页面顶部会让浏览器将两者结合起来，从而产生一个标题

X-Frame-Options SAMEORIGIN, GOFORIT

...并允许您在 iframe 中加载页面。当初始 SAMEORIGIN 命令设置在服务器级别时，这似乎有效，并且您希望逐页覆盖它。

一切顺利！

【讨论】：

我有一个围绕网站的框架。在我的网站上，我为 OAUTH 重定向到 Instagram。由于 Instagram 发送X-Frame-Options: SAMEORIGIN，因此无法在框架内执行此操作。您必须使用弹出窗口。

对于 PHP，最好使用新的 header_remove 函数，前提是您有可用的 (>=5.3.0)。

如果您想从整个目录中删除 X-Frame-Options，您可以编辑 .htaccess。只需添加以下行：Header always unset X-Frame-Options

@cawecoy：是的，重点是它是无效的。它依赖于忽略无效标头和“打开失败”的浏览器，这是未指定的行为并且依赖起来非常狡猾。 GOFORIT（或其他随机的任意无效令牌）故意破坏服务器应用的安全措施；如果您自己可以控制服务器（对于任何真正的公共服务都应该这样做），那么正确的做法就是首先将服务器设置为不设置标头。

这似乎不再适用于 Chrome。无效值会导致该值默认为 DENY。

【参考方案2】：

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

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

【讨论】：

哦，进展...我希望他们只是将我们重定向到嵌入页面，而不是引发错误，让我重写我的脚本！

【参考方案3】：

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

【讨论】：

这仅适用于在 iframe 中嵌入谷歌地图，而不是一般的“解决方案”。

我需要在灯箱中嵌入谷歌地图，所以这个“解决方案”非常完美

如果您尝试使用 Twitter 网络意图执行此操作，请忘记它。一整天都在尝试不同的灯箱插件，结果却发现“虽然您可以在 IFRAME 和小部件中提供指向意图的链接，但生成的页面无法在 IFRAME 中加载。”来源：推特网站。

如果您在页面的其余部分加载后尝试加载 iframe src，即使您添加了 &output=embed，这也不起作用

@pathfinder 当我在页面加载后无法加载 iframe src 时，这对我有用

【参考方案4】：

2019 年更新：您可以仅使用客户端 javascript 和我的 X-Frame-Bypass Web 组件在 <iframe> 中绕过 X-Frame-Options。这是一个演示：Hacker News in an X-Frame-Bypass。 （在 Chrome 和 Firefox 中测试。）

【讨论】：

这是一个有趣的解决方法。在 FF/Chrome/Opera 中运行良好，但在 IE/Edge 中无法运行。有谁知道会发生什么？

这不再起作用了。它给出“拒绝在框架中显示'news.ycombinator.com'，因为它将'X-Frame-Options'设置为'DENY'。” 如 预期

@g.pickardou 它适用于我在 Google Chrome 46 中，我可以在 iframe 中看到 Hacker News。

间歇性地为我和某些 Chrome 48 工作。有时我会被拒绝在框架中显示 'news.ycombinator.com'，因为它将 'X-Frame-Options' 设置为 'DENY'。

@niutech 在 Chrome 64 中重新加载页面后，小提琴可以工作，但我第一次加载页面时它不起作用。 （尝试隐身。）

【参考方案5】：

Chrome 有一个插件，可以删除该标题条目（仅供个人使用）：

https://chrome.google.com/webstore/detail/ignore-x-frame-headers/gleekbfjekiniecknbkamfmkohkpodhe/reviews

【讨论】：

@aup 大概是在网页的header部分做了一些修改。

该扩展程序没有对网页进行任何更改，但似乎忽略了浏览器级别的帧响应标头验证

谢谢，这个工作适合我的情况......仅供个人使用

【参考方案6】：

添加一个

  target='_top'

到我在 facebook 选项卡中的链接为我解决了这个问题...

【讨论】：

我在另一个 iframe 中包含的 Paypal iframe 也遇到了同样的问题。现在可以了！谢谢

我还添加了 target='_top'，但这个解决方案的问题是，链接现在在没有 facebook 画布的新选项卡中的 iframe 之外打开。

【参考方案7】：

如果您在尝试嵌入 Vimeo 内容时遇到此错误，请更改 iframe 的 src，从：https://vimeo.com/63534746 到：http://player.vimeo.com/video/63534746

【讨论】：

这解决了我的问题，谢谢。如何处理 youtube 视频？？

【参考方案8】：

当我尝试将moodle 2嵌入iframe时遇到同样的问题，解决方案是Site administration ► Security ► HTTP security并检查Allow frame embedding

【讨论】：

moodle 方法做得很好，因为其他方法失败/被覆盖。

【参考方案9】：

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

如果您想将其他网站加载到 iFrame 中并收到 Display forbidden by 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 请求，也可能是一个普通的浏览器页面访问。

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

【讨论】：

几周前我正在这样做，并且在使用 echo 时，外部页面中使用的任何相对 URL 都不起作用。 （通常是 CSS 和/或 JS，因此您可能无法获得完整的功能，除非您在回显之前修改 URL。）除非我错过了什么......，

不知道为什么会发生这种情况...它应该像普通的 HTTP 请求一样工作，就像最终用户在访问 URL 时执行的操作一样。所以 get_file_contents() 的结果应该是一个完整的 html 页面。

好吧，我可能在代码中遗漏了一些东西，但是直接回显不会提供来自“您的”域而不是源域的 HTML 标记吗？因此，相对链接将无法正常运行。一个合适的代理可能不是我所拥有的。我会试试你的代码。

如何在 JavaScript 中实现相同的代理？

【参考方案10】：

这就是解决方案！

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

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

【参考方案11】：

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

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

将此行添加到 htaccess：

Header always unset X-Frame-Options

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

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

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

然而，在我的情况下，这不是必需的。

【讨论】：

标题总是在 htaccess 中取消设置 X-Frame-Options 对我有用

【参考方案12】：

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

这里是完整的参考：https://content-security-policy.com/

【参考方案13】：

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

我解决了它写

$wgEditPageFrameOptions = "SAMEORIGIN"; 

进入 mediawiki php 配置文件。

希望对你有帮助。

【参考方案14】：

FWIW：

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

【参考方案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 访问资源。

【参考方案16】：

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

宝石文件：

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

&lt% 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; &lt% end %>

来源

我认为配置来自omniauth 的示例。 gem 文件（关键！！！）来自：slideshare things i learned... 此堆栈问题具有整个 Xframe 角度，因此您将得到一个空白区域，如果 您不要将此标头放在应用控制器中。 我的人 @rafmagana 写了这个 heroku guide，现在你可以用这个答案和你走路的巨人的肩膀来采用它。

【参考方案17】：

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

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

我终于找到了一些来源：

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

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

whateverorigin.org

^ 第二选择，但是比较老了。据说python中的新选择：https://github.com/Eiledon/alloworigin

然后是第三个选择：

http://anyorigin.com/

这似乎允许一些免费使用，但如果您不付款并使用一些未指定的金额，您将被列入公开的耻辱名单，只有支付费用才能将您从名单中删除......

【参考方案18】：

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

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

更新

这是一个例子：

从今天 (01-19-2021) 开始生成按钮，PayPal 会自动在 form 元素上包含 target="_top"，但如果这不适用于您的上下文，请尝试不同的 target 值。我建议_parent - 至少在我使用此 PayPal 按钮时有效。

请参阅Form Target Values 了解更多信息。

<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="[e-mail]">
  <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" >
  <img  border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif"  >
</form>

【讨论】：

不幸的是，这似乎也不适用于 safari。

@jiminikiz 你也可以举个例子吗？

【参考方案19】：

我不确定它的相关性如何，但我为此构建了一个解决方法。在我的网站上，我想在包含加载 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+"&nbsp;&nbsp;&nbsp;<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";



?>

希望这会有所帮助。

【参考方案20】：

我在运行 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 作为您的托管服务。

【讨论】：

我最终做了：remove_action( 'admin_init', 'send_frame_options_header',10); 绕过这个问题...

【参考方案21】：

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

Header always set X-Frame-Options DENY

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

Header always set X-Frame-Options SAMEORIGIN

【讨论】：

之前提到过 - 请参阅@Jay 对答案***.com/a/6767901/1875965的评论

我配置 .conf 文件头总是设置 X-Frame-Options SAMEORIGIN！

但这与这里的问题有什么关系，标头来自 foreign 服务器，直接到 client，IOW 你自己的服务器是甚至没有参与？我错过了什么吗？

@iliarostovtsev .htaccess 选项不起作用。

【参考方案22】：

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

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);

【参考方案23】：

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

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

【参考方案24】：

我遇到了这个问题，并通过编辑 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 并重新启动服务器

【参考方案25】：

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

并添加以下行：Header always unset X-Frame-Options

[内容来自：Overcoming "Display forbidden by X-Frame-Options"

【参考方案26】：

如果您使用的是 Springboot，请将以下配置添加到您的 WebSecurityConfig

http.headers().frameOptions().sameOrigin();

【参考方案27】：

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

将以下内容添加到您的 iframe

sandbox="allow-same-origin allow-scripts allow-popups allow-forms"

【讨论】：

沙盒会降低权限，但不会添加权限。见html5rocks.com/en/tutorials/security/sandboxed-iframes