前置知识
1️⃣ 什么是 同源策略(Same Origin Policy)
浏览器的一条安全规则:不同来源的网页不能互相操作
2️⃣ 什么是 window.open 和 window.opener
window.open(url)
:打开一个新的子窗口(新标签页或弹窗)
**window.opener**
:在子窗口里,能获取到****谁打开了我(父窗口)
图示理解:
1 | 复制编辑 |
所以如果 b.html 和 a.html 是同源的,b.html 就可以用:
1 | window.opener.document.body.innerHTML |
来直接控制 a.html 的内容!
3️⃣ 什么是 JSONP 接口?
JSONP 是一种“跨域获取数据”的老办法。
它的原理是:通过 **<script>**
标签可以跨域加载 JS 脚本。
当你有 A 网站,想拿 B 网站的数据,如果拿最常见的 AJAX 写法:
1 | fetch("http://b.com/data") |
浏览器会告诉你跨域拿数据不安全,这是浏览器名为”同源策略”的保护机制,它只允许访问同域名的数据。
但是<script>
标签是个例外,它可以跨域加载 JS 文件,而且浏览器不会拦。
所以我们可以把需要拿取的数据包装成 JS,然后用<script>
标签来加载它。
4️⃣ 什么是回调函数(callback)?
你告诉服务器一个函数名,服务器就返回:函数名(数据)
这种格式。
例如传入?callback=handleData
,服务器返回handleData({...});
当我们把 callback 换成一段会执行的 JS 代码,服务器就会直接执行这段 JS。
其实我觉得这个名字取得很怪,这个函数在形参位置上,就是一个“你干完活把数据塞在这个位置上的函数”。
SOME 攻击是什么?
一句话总结:
SOME(Same Origin Method Execution)就是利用 JSONP 接口中 callback 可控的特性,在同源环境下远程调用页面中的 JS 函数,模拟用户操作(比如点击按钮、提交表单、安装插件等)。
1 | <!-- some1.html --> |
我们让 1.html 打开 2.html,然后跳转到 index.html。
1 | <!-- some2.html --> |
2.html 通过window.opener 访问 1.html(跳转后的 index.html),并请求 JSONP 接口执行 JS 代码。
因为 1 和 2 是同源的,所以 2 能控制 index.html,这就是同源。