iframe 限制访问攻略：新窗口+跨站点脚本+跨窗口存储
2023-10-13 10:28:57
跨域嵌入之困：X-Frame-Options 惹的祸？
iframe 的妙用
iframe，全称内联框架，是一种 HTML 元素，可以将另一个 HTML 文档嵌入到当前文档中。它广泛应用于嵌入广告、视频、地图等外部内容。
X-Frame-Options 的身影
X-Frame-Options 是 HTTP 响应头，用于控制网站内容是否允许被其他网站嵌入。它拥有三个可能的值：
- DENY： 断然拒绝 iframe 嵌入。
- SAMEORIGIN： 只允许来自同一来源的 iframe 嵌入。
- ALLOW-FROM uri： 只允许来自指定来源的 iframe 嵌入。
iframe 嵌入的困境
如果一个网站启用了 X-Frame-Options，那么你试图将它嵌入到另一个网站时，可能会遇到 iframe 无法嵌入的问题。这是因为浏览器为了保护用户免受跨站脚本攻击，会阻止 iframe 加载。
绕过 X-Frame-Options 限制
解决此问题的一种方法是使用新窗口。你可以用 JavaScript 在新窗口中打开启用了 X-Frame-Options 的网站，绕过浏览器的限制，成功嵌入 iframe。
// 打开新窗口
var newWindow = window.open("https://example.com", "_blank");
// 将 iframe 添加到新窗口
newWindow.document.body.innerHTML = "<iframe src='https://example.com/iframe'></iframe>";
跨站请求的 cookie 难题
跨站请求时，浏览器通常不会发送 cookie。这是为了防止跨站脚本攻击。如果你需要在跨站请求中发送 cookie，可以使用 JSONP，将 JSON 数据嵌入 HTML 页面中，在不发送 cookie 的情况下获取数据。
// 使用 JSONP 获取数据
$.ajax({
url: "https://example.com/api/data",
dataType: "jsonp",
success: function(data) {
console.log(data);
}
});
跨窗口存储的分享瓶颈
当你在不同窗口使用存储（localStorage 或 sessionStorage）时，数据通常不会在窗口之间共享。为了防止跨站脚本攻击，你需要使用 postMessage() 方法发送消息，在窗口之间同步存储数据。
// 发送消息
window.postMessage({
type: "setStorage",
key: "foo",
value: "bar"
}, "*");
// 接收消息
window.addEventListener("message", function(event) {
if (event.data.type === "setStorage") {
localStorage.setItem(event.data.key, event.data.value);
}
});
总结
本文探讨了如何处理 X-Frame-Options 导致的 iframe 无法嵌入的问题，以及跨站请求无法携带 cookie、跨窗口无法共享 storage 等相关问题。通过使用新窗口、JSONP 和 postMessage() 方法，我们找到了解决这些跨域嵌入困境的有效途径。
常见问题解答
-
为什么 iframe 嵌入会被阻止？
X-Frame-Options 响应头可以阻止 iframe 嵌入，以防止跨站脚本攻击。 -
如何绕过 X-Frame-Options 限制？
可以使用新窗口，在不违反安全限制的情况下嵌入 iframe。 -
跨站请求为什么不能发送 cookie？
跨站请求通常不会发送 cookie，以防止跨站脚本攻击。 -
如何解决跨站请求无法携带 cookie 的问题？
可以使用 JSONP 技术，将 JSON 数据嵌入 HTML 页面中，在不发送 cookie 的情况下获取数据。 -
跨窗口存储为什么不能共享？
为了防止跨站脚本攻击，跨窗口存储通常不会共享。你可以使用 postMessage() 方法发送消息，在窗口之间同步存储数据。
