如何在 Google Chrome 中使用 iframe 查看包含 JQuery 的网页

Posted 2023-05-09

技术标签:

【中文标题】如何在 Google Chrome 中使用 iframe 查看包含 JQuery 的网页【英文标题】：How to view a web page including JQuery with an iframe in Google Chrome 【发布时间】：2020-08-05 17:24:11 【问题描述】：

我们有一个内网网站，我们称之为https://www.myintranetsite.com。请注意，我无法访问其源代码。

我想在 IFrame 中的另一个网页中使用它，所以我正在创建一个非常基本的 html 页面，例如：

<html><body>
    <div>
        <iframe id="myIframe"   src="https://www.myintranetsite.com/"></iframe>
    </div>
</body></html>

当我使用 Microsoft Edge 打开 HTML 页面时，它可以工作，但是 Google Chrome 无法工作，并显示以下错误：

当我在浏览器中按 F12 时，我在控制台中看到的错误消息如下：

未捕获的引用错误：$ 未定义在登录时？isajax=true:19

据我了解，myintranetsite.com 中使用了 JQuery，而 Chrome 出于某种原因没有加载它，可能与安全有关... Chrome 版本： 81.0.4044.122（64 位） )

我该如何克服这个问题？我已经尝试过这些但没有帮助：

清除缓存, 将 myintranetsite 添加到 Internet 选项中的受信任站点， 清除 SSL 阶段， 禁用 cookie 铬

我已经检查过了，但也没有用：jQuery/iframe not working in Chrome

任何帮助或建议将不胜感激。

【问题讨论】：

你可以发布 iframe 链接进行测试吗？没有更多的调试是不可能的。查看开发人员工具的网络选项卡并查找任何错误。您显示的页面看起来像 500 Internal Server Error，它是由 ASP.NET 引发的，如果不更改 Intranet 站点的代码，您将无法解决此问题。您是否尝试将 jquery CDN 添加到您的 HTML 文件中 (<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>) @SimoneRossaini 我不能，因为它是我公司的内部网站。 @AlexHawking 是的，没有帮助 【参考方案1】：

您对安全措施防止这种情况的理解是正确的，基本上您会收到一个 jQuery 错误，因为 jQuery 将由内页加载，但由于内页没有加载，它也没有加载 jQuery。您将需要创建一些代理页面，让我们看看步骤：

第一步

创建一个单独的页面，我们称之为myintranetproxy。我会假设您创建的这个页面的位置是 /myintranetproxy，所以，如果您有不同的路由，请随意进行您需要的更改。

第 2 步

确保 myintranetproxy 在此阶段显示文本或其他内容，例如“Hello World”，以确保在下一步加载它。

第三步

加载我的内网代理：

<html><body>
    <div>
        <iframe id="myIframe"   src="/myintranetproxy"></iframe>
    </div>
</body></html>

现在您应该会在 iframe 中看到您的临时内容。

第四步

更改 myintranetproxy，它现在应该向 https://www.myintranetsite.com/ 发送一个 GET 请求，一旦响应到达，就按原样编写该 HTML，而不是您的“Hello World”

第 5 步

确保将响应中的任何 URL 更改为页面的绝对 URL。这将影响iframe、script、link、img 标签。您可以实现它，或为此目的使用 HTML 解析器。

【讨论】：

在第 4 步中，一旦我将 src="/myintranetproxy" 更改为 "myintranetsite.com"，我仍然会收到 jquery 错误。也许我误会了你？ “按原样编写 html 而不是 hello world”，您能否举例说明第 4 步要做什么？ @ErayBalkanli 不幸的是，我不了解您的服务器端技术堆栈，因此我将即兴发挥假设您使用 php。假设您通过 file_get_contents 或 cURL（参见 ***.com/questions/959063/…）发送 GET 请求并将响应接收到变量中，您可以通过 <?php echo $response; ?> 使用其 HTML 生成页面。如果您有另一个技术堆栈，您可以采取类似的方式，但当然使用不同的语法。 @ErayBalkanli 使用这种方法，您的 jQuery 问题不一定在第 4 步得到解决，因为他们可能已经通过使用相对 URL 的script 标记包含 jQuery（请参阅***.com/questions/2005079/absolute-vs-relative-urls）。如果其他页面使用 jQuery 的相对 URL，并且您使用该 HTML 原样在您的站点中，则将在您的服务器上搜索与标签中指定的相同相对 URL 的 jQuery。这就是存在步骤 5 的原因。请注意，在第 5 步中，我们处理几种不同的标记类型，包括 script，它处理您的 jQuery 引用 @ErayBalkanli 等等。第 5 步指示您确保 iframe、script、link 和 img 标签使用绝对 URL（请参阅上一条评论中的链接），因此您需要在将收到的原始 HTML 中的任何相对 URL 发送到浏览器之前对其进行转换.因此，您遇到的问题看起来与复制到您页面的相对 URL 密切相关。检查您打算放入 iframe 的页面的页面源。在脚本标签中有一个 jQuery 引用，其中 src 不以他们网站的根 URL 开头。这就是问题所在。【参考方案2】：

最可能的原因是您以某种方式混合了 HTTP 和 HTTPS。 Chrome 真的不喜欢这样，确保你的父页面和 iframe 中的页面都使用相同的协议

【讨论】：

谢谢，他们都使用 HTTPS【参考方案3】：

有时 iFrame 会被禁用以缓解点击劫持尝试。

为了构建 Intranet 站点，需要禁用以下所有缓解措施。

内容安全策略 (CSP) 框架祖先指令 X-Frame-Options 响应标头旧版浏览器断帧脚本

有关这些点击劫持缓解措施以及如何启用/禁用这些保护措施的更多信息，请访问here

此外，如果您的网站需要会话 cookie，最终用户必须确保启用第三方 cookie。（例如，Safari 默认关闭它们）。

【讨论】：

以上是关于如何在 Google Chrome 中使用 iframe 查看包含 JQuery 的网页的主要内容，如果未能解决你的问题，请参考以下文章

如何在 Chrome 扩展程序 browser_action 中登录 Google？

如何在 Google Chrome 的 Greasemonkey 脚本中使用 jQuery？