同源策略详解

一、定义

同源策略（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 请求，浏览器会阻止该请求。

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

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

1. CORS（跨源资源共享）

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

2. JSONP（JSON with Padding）

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

3. 通过代理服务器

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