UsubeniFantasy
·
讲透同源策略
💡
原文中文，约6400字，阅读约需16分钟。
📝
内容提要
同源策略限制了前端访问不同源的资源，但仍有一些方法可以使用。解决跨域问题可使用CORS协议和postMessage。
🎯
关键要点
- 同源策略（SOP）定义为同协议、同 host、同端口视为同源。
- 同源策略限制了前端访问不同源的资源，导致 Canvas 污染、iframe 内部信息获取和 Ajax 请求失败等问题。
- 虽然同源策略带来限制，但仍有方法可以访问不同源的资源，如链接、重定向、表单提交和某些标签。
- 所有无限制的情景只能获取数据，不能修改数据，确保安全性。
- 同源策略的存在主要是为了防止网络安全问题，如跨站请求伪造（CSRF）和宿主对 iframe 的肆意操作。
- CORS 协议用于允许跨域资源共享，基于 HTTP 协议，通过请求头和响应头实现。
- CORS 协议的工作流程包括发送预检请求（preflight）和根据服务器返回的 CORS 配置信息判断是否允许真实请求。
- CORS 协议允许开发者获取异域数据，但在 cookie 等请求凭证上仍需额外配置。
- 可以通过反向代理将异域接口服务整合为同域，开发环境常用 Webpack 和 Vite，生产环境常用 nginx。
- postMessage 方法用于不同窗口（如 iframe）间的数据交流，确保信息来源可信。
- websocket 可以绕过同源策略，但对服务器负荷大，不常用作替代方案。
- JSONP 是一种过时的跨域解决方案，通过返回函数包裹的数据实现跨域访问，现已不常用。
- 同源策略的本质是保证非同源信息只读，为用户提供更安全的网络环境，开发者需应对跨域限制。
🏷️
标签
➡️
