同源策略详解

一、定义

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

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

相关推荐
蟾宫曲16 分钟前
在 Vue3 项目中实现计时器组件的使用(Vite+Vue3+Node+npm+Element-plus,附测试代码)
前端·npm·vue3·vite·element-plus·计时器
秋雨凉人心17 分钟前
简单发布一个npm包
前端·javascript·webpack·npm·node.js
liuxin3344556619 分钟前
学籍管理系统:实现教育管理现代化
java·开发语言·前端·数据库·安全
qq132670294022 分钟前
运行Zr.Admin项目(前端)
前端·vue2·zradmin前端·zradmin vue·运行zradmin·vue2版本zradmin
魏时烟2 小时前
css文字折行以及双端对齐实现方式
前端·css
哥谭居民00012 小时前
将一个组件的propName属性与父组件中的variable变量进行双向绑定的vue3(组件传值)
javascript·vue.js·typescript·npm·node.js·css3
踢足球的,程序猿3 小时前
Android native+html5的混合开发
javascript
2401_882726483 小时前
低代码配置式组态软件-BY组态
前端·物联网·低代码·前端框架·编辑器·web
web130933203983 小时前
ctfshow-web入门-文件包含(web82-web86)条件竞争实现session会话文件包含
前端·github
胡西风_foxww3 小时前
【ES6复习笔记】迭代器(10)
前端·笔记·迭代器·es6·iterator