目录

同源策略详解

一、定义

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

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

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
HsuYang几秒前
Nuxt框架学习(一)——从简单的SSR起步
前端·javascript·架构
Qhappy2 分钟前
某里v2滑块,最新3.1.0版本,滑块验证
javascript
爷傲奈我何!8 分钟前
小程序中实现音频播放(原生 + uniapp)
前端·vue.js
Json_12 分钟前
uni-app 框架 调用蓝牙,获取 iBeacon 定位信标的数据,实现室内定位场景
前端·uni-app·蓝牙
日升13 分钟前
手把手带你掌握Zustand:轻量级React状态管理利器
前端·react.js·状态机
Copy_Paste_Coder13 分钟前
35岁大龄码农,用cursor独立做副业经历分享
前端·程序员
jqq66615 分钟前
(二)「造轮子」我也写了个Vue3脚手架!(项目环境搭建)
前端·javascript·vue.js
kooboo china.15 分钟前
SQL实战篇,数据库在Kooboo中的实际应用(一)
javascript·数据库·sql·sqlite
Json_16 分钟前
vue2 + element-ui 开发网站拼图小游戏-前端项目
前端·vue.js·element
顾名思远义19 分钟前
VxeGRid树形表格编辑难点
前端·vue.js