同源策略详解

一、定义

同源策略(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. 通过代理服务器

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

相关推荐
醉方休9 分钟前
React中使用DDD(领域驱动设计)
前端·react.js·前端框架
excel14 分钟前
📖 小说网站的预导航实战:link 预加载 + fetch + 前进后退全支持
前端
学习3人组18 分钟前
React 样式隔离核心方法和最佳实践
前端·react.js·前端框架
世伟爱吗喽24 分钟前
threejs入门学习日记
前端·javascript·three.js
朝阳58137 分钟前
用 Rust + Actix-Web 打造“Hello, WebSocket!”——从握手到回声,只需 50 行代码
前端·websocket·rust
F2E_Zhangmo37 分钟前
基于cornerstone3D的dicom影像浏览器 第五章 在Displayer四个角落显示信息
开发语言·前端·javascript
slim~1 小时前
javaweb基础第一天总结(HTML-CSS)
前端·css·html
一支鱼1 小时前
leetcode常用解题方案总结
前端·算法·leetcode
小浣熊喜欢揍臭臭1 小时前
react+umi项目如何添加electron的功能
javascript·electron·react
惜.己1 小时前
针对nvm不能导致npm和node生效的解决办法
前端·npm·node.js