时间戳

首页 > 解决方案 > 如何测试 iframe 并获取所有响应标头？

typescript - 如何测试 iframe 并获取所有响应标头？

问题描述

我正在开发一个可以在 iframe 中显示 url 的 webapp。但它也有能力在 iframe 中显示 url 之前先测试 url。因此，在我显示 iframe（设置 CSS 规则以显示 iframe 元素）之前，我想等待响应。如果我收到错误或收到响应标头“x-frame-options: DENY”，我不想显示 iframe，而是显示错误消息或其他内容。

考虑这个例子：

const request = new XMLHttpRequest();
request.open("GET", urlToTest, true);
request.send();

在这里，我总是遇到 CORS 问题。但这是意料之中的，并且测试这与我们实际想要做的不同是：

<iframe id="webiframe" "src"="urlToTest></iframe>

然后我尝试了以下方法：

this.webiframe是参考<iframe>

this.webiframe.onload = function () {
    console.log('iframe ONLOAD');
}.bind(this);
this.webiframe.onerror = function () {
    console.log('iframe ONERROR');
}.bind(this);
this.webiframe.contentDocument.onreadystatechange = function () {
    this.iFrameEvent();
}.bind(this);
this.webiframe.contentDocument.addEventListener('DOMContentLoaded', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('load', this.iFrameEvent);
this.webiframe.contentDocument.addEventListener('onreadystatechange ', this.iFrameEvent);

但是永远不会调用添加到 contentDocument 的事件侦听器。唯一被调用的事件是 iframe 引用的 onload 事件。

所以我的问题：

在 iframe 上设置“src”属性时是否可以获得一些信息/测试。更具体地说，如果 url 有效，如果没有，为什么它不能通过响应标头工作？

标签： typescriptiframehttp-headers

解决方案

您应该能够访问webiframe.location.href框架上的属性以获取 URL。如果您打开框架，您应该已经拥有此信息。如果没有正确的 CORS 标头，您可能无法获得有关框架的任何详细信息。

window.frames如果您是父级，也可以从数组中访问帧。您还可以按照另一个 StackOverflow 答案中的建议尝试跨文档消息传递。

注意： CORS 旨在明确阻止浏览器中未经授权的跨域访问。基于服务器的代理解决方案可能允许您进行单独的查询并测试 URL 或收集信息。

推荐阅读