检查内容是否可以在iFrame中显示不起作用

Question

我有以下代码来检查网页是否可以被框架化:

var req = new XMLHttpRequest();
var test = req.open('GET', link, false);
console.log("test",test); //ALWAYS undefined
if(req.send(null)){ //ALWAYS throws error NS_ERROR_FAILURE
    var headers = req.getAllResponseHeaders().toLowerCase();
    console.log("headers");
}else{
    console.log("FAILED");
}

我用几个链接测试它,可以框架或不框架,但总是失败.你知道为什么吗？

链接:

• http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg
• http://www.facebook.com(...)

Answer 1

• test未定义因为open()声明void,它不返回任何值.查看方法的MDN open.

• 你为什么要传递null到send？ (参见编辑)如果你打算调用不带任何参数的send的重载,你应该调用req.send(); 相反,如果你想调用该方法的另一个版本,你应该传递一个Blob,Document,DOMString或FormData,但是null将不起作用.
  编辑:通常将方法调用为send(null); 这似乎是因为在历史上的一些点(就是那个老？)的说法send是强制性的.这个问题解开了这个谜团.

• 而且,同样send不会返回任何值,因此该条件中的条件if永远不会评估为真.MDN文档也是该send方法.

• 最后,您正在执行跨域请求,即您要求的是位于其他域中的内容.XMLHttpRequest没有处理,很可能你会得到这个错误:

  XMLHttpRequest无法加载链接.请求的资源上不存在"Access-Control-Allow-Origin"标头.因此不允许原点来源访问.

  看看这个问题,并且这在计算器上,如果你需要获取更多相关信息.

您可能想要在MDN网络上再次查看使用XMLHttpRequest,它有许多可靠的示例可以帮助您熟悉这些请求.

编辑:扩展主题iframe嵌入性.

如此问题所示iframe,如果网站可以嵌入到网站中,则可以可靠地检测到.在JavaScript中检测(或阻止)帧破坏就像一条追逐自己尾巴的狗.

然而,一个不想被合并的网站,希望能在其回复中发送X-Frame-Options: DENY标题.这不是很有用,因为您无法执行跨域请求:在了解X-Frame-Options标头是否设置之前,您的请求将失败.为了完整性,这是检查对XMLHttpRequesta 的响应是否包含给定标头的方法(但请注意,这只能在同一个域中起作用),这可能在您的控制之下,如果页面是'可框架的',您就会知道):

function checkXFrame() {
    var xframe = this.getResponseHeader("X-Frame-Options");
    if (!xframe) {
        alert("Frameable.");
        return;
    }
    xframe = xframe.toLowerCase();
    if (xframe == "deny") {
        alert("Not frameable.");
    } else if (xframe == "sameorigin") {
        alert("Frameable within the same domain.");
    } else if (xframe.startsWith("allow-from")) {
        alert("Frameable from certain domains.");
    } else {
        alert("Someone sent a weird header.");
    }
}

var oReq = new XMLHttpRequest();
oReq.open("HEAD" /* use HEAD if you only need the headers! */, "yourpage.html");
oReq.onload = checkXFrame;
oReq.send();

(此代码不检查404或任何其他错误!)