浏览器跨域限制的原因

问题

浏览器为什么要有跨域限制？

解答

跨域限制的核心目的是保护用户的上网安全。浏览器通过同源策略（Same-Origin Policy）防止恶意网站窃取用户数据或进行未授权操作。

没有 DOM 同源策略的风险

如果不同域的 iframe 可以相互访问 DOM，黑客可以构造钓鱼攻击：

<!-- 恶意网站 http://evil.com -->
<iframe src="http://mybank.com" width="100%" height="100%"></iframe>

攻击流程：

1. 黑客创建假网站，用 iframe 嵌套真实银行网站
2. 调整 iframe 样式使其占满整个页面，用户只能通过域名辨别真伪
3. 用户输入账号密码时，恶意网站通过跨域访问 iframe 的 DOM 节点获取表单数据
4. 账号密码被窃取

没有 XMLHttpRequest 同源策略的风险

如果 AJAX 请求不受同源限制，黑客可以发起 CSRF（跨站请求伪造）攻击：

// 恶意页面 http://evil.com 中的代码
fetch('http://mybank.com/api/transfer', {
  method: 'POST',
  credentials: 'include', // 自动携带 cookie
  body: JSON.stringify({ to: 'hacker', amount: 10000 })
});

攻击流程：

1. 用户登录银行网站 http://mybank.com，cookie 中保存了用户身份标识
2. 用户访问恶意页面 http://evil.com
3. 恶意页面向银行网站发起 AJAX 请求，浏览器自动携带银行网站的 cookie
4. 银行服务器验证 cookie 通过，执行转账等敏感操作
5. 整个过程在后台完成，用户毫无察觉

关键点

• 同源策略是浏览器的基础安全机制，限制不同源之间的资源访问
• DOM 同源策略防止恶意网站通过 iframe 窃取用户输入的敏感信息
• XMLHttpRequest 同源策略防止 CSRF 攻击，避免恶意网站冒用用户身份发起请求
• 跨域限制虽然增加了开发复杂度，但显著提升了用户上网安全性