同源策略详解

一、定义

同源策略(Same-Origin Policy)是浏览器的一种安全策略,它用于限制一个源(origin)的文档或者脚本如何与另一个源的资源进行交互。这里的"源"是由协议(protocol)、域名(domain)和端口(port)三部分组成。只有当两个 URL 的协议、域名和端口完全相同的时候,才被认为是同源的。

二、目的

1. 安全性考虑

同源策略主要是为了防止恶意网站获取用户在其他网站上的敏感信息。如果没有同源策略,一个恶意网站可能会通过 JavaScript 等方式访问用户在银行网站等安全级别较高的网站上的账户信息、登录凭证等,从而导致用户隐私泄露和安全风险。

2. 防止跨站脚本攻击(XSS)和跨站请求伪造(CSRF)

2.1 XSS 攻击

是指攻击者通过注入恶意脚本到目标网站来获取用户信息或执行其他恶意操作。同源策略可以限制恶意脚本在不同源之间的访问权限,减少 XSS 攻击的影响。

2.2 CSRF 攻击

是指攻击者诱导用户在已登录的网站上执行非预期的操作。同源策略通过限制跨源请求,使得攻击者难以利用用户的登录状态在其他网站上发起恶意请求。

三、限制范围

1. DOM 访问限制

在非同源的情况下,一个网页的 JavaScript 脚本不能直接访问另一个网页的 DOM(文档对象模型)。

2. AJAX 请求限制

浏览器会限制 JavaScript 发起的 AJAX(Asynchronous JavaScript and XML)请求必须是同源的。如果试图从一个源向不同源发起 AJAX 请求,浏览器会阻止该请求。

3. Cookie、LocalStorage 和 SessionStorage 访问限制

非同源的网页之间不能直接访问彼此的 Cookie、LocalStorage 和 SessionStorage。

四、跨源通信的解决方案(绕过同源策略的合法方式)

1. CORS(跨源资源共享)

这是一种在服务器端和客户端共同实现的机制,用于允许跨源访问。服务器通过在响应头中设置`Access-Control-Allow-Origin`等相关头信息来指定哪些源可以访问本资源。

2. JSONP(JSON with Padding)

这是一种利用`<script>`标签不受同源策略限制的特点来实现跨源数据获取的方法。其基本原理是,客户端通过动态创建`<script>`标签,将其`src`属性指向一个跨源的 URL,这个 URL 返回的数据是一个包裹在函数调用中的 JSON 数据。

3. 通过代理服务器

可以在同源的服务器上设置代理服务器,将跨源请求转发到目标服务器。客户端只与同源的代理服务器进行通信,代理服务器再将请求转发到目标服务器并将响应返回给客户端。这样从客户端的角度看,它始终是在与同源的服务器进行通信,从而绕过了同源策略的限制。不过,这种方法需要在服务器端进行额外的配置和开发。

相关推荐
To_OC3 小时前
从一头雾水到跑通全流程:我用一个周末啃透了JWT登录鉴权
前端·后端·http
excel4 小时前
研究 Vue 3 源码的收获
前端·vue.js
可乐鸡翅yeah_6 小时前
业务中 M3U8 水印相关坑,硬水印和动态水印区别
前端·网络·数据库·ffmpeg·m3u8在线
lerhxx6 小时前
AI 应用如何高效优雅地恢复中断?—— "连接解耦 + 状态持久化"
前端·javascript
计算机魔术师6 小时前
METR 演示 AI 智能体如何篡改 Inspect 评估记录以掩盖不当行为
前端
前端snow7 小时前
ai agent --- 异步处理之 Rabbit MQ
前端
念何架构之路7 小时前
zap扩展生态与总结
java·前端·数据库
独孤九剑打醒他7 小时前
【原创开源】【概念设计】源 - 栅 - 漏 - 栅 - 源 横向双栅 MOS,低压交流多值逻辑芯片探索
前端·其他·架构·开源·硬件工程
mantou1328 小时前
我给 AI Agent 做了个「油猴」:让 Claude Code / Codex 直接用你已登录的浏览器
前端·javascript·后端
默_笙8 小时前
🍕 一个主编、三个工种、两本手册:搭一支 AI 调研队
前端·javascript