同源策略

浏览器的安全可以化为三大块:Web页面安全,浏览器网络安全和浏览器系统安全。

首先来讲Web页面安全,如果说页面没有做安全限制,所有的资源可以接入,网站之间也可以互相执行对方的脚本文件,图片视频等等,那不就乱了套,而且总有坏蛋干坏事。比如说把你银行网站的用户名密码给劫持了(虽然本来就没钱)。

所以说为了预防这个问题,就有了同源策略

什么是同源策略

同源策略(Same-Origin Policy)是一种安全机制,它是在浏览器中实施的一项安全策略,旨在防止一个网页文档或脚本从一个源加载的内容与来自其他源的资源进行交互。"源"指的是协议(例如http和https)、域名和端口的组合。

同源策略的基本思想是,如果两个资源具有相同的协议、域名和端口,那么它们就属于同一个源,允许相互交互。如果两个资源的任何一个属性不同,就认为它们属于不同的源,浏览器会限制它们之间的交互,以防止潜在的安全风险。

下面是一个同源策略的例子:

假设有两个网页,一个是 www.zhuhe.com/page1 ,另一个是 www.zhuhe.com/page2, 它们属于同一个源,因为它们具有相同的协议(http)、相同的域名(www.zhuhe.com) 和相同的端口(默认端口80)。因此,这两个页面之间可以自由地进行资源交互,比如通过JavaScript进行数据传递。

然而,如果一个网页是www.zhuhe.com/page1, 另一个是www.zhuhe.org/page2, 它们属于不同的源,因为域名不同。根据同源策略,这两个页面之间的JavaScript代码不能直接互相访问对方的DOMCookie等敏感信息。这是为了防止恶意网站通过跨域请求来获取用户的敏感信息,保护用户的隐私和安全。

同源策略主要表现在DOM、Web数据和网络三个层面

  1. DOM层面: 同源策略限制了来自不同源之间的JavaScript脚本对当前DOM对象的读写操作权限。
  2. 数据层面: 同源策略限制了不同源站点之间的Cookie、IndexDB等等数据的读取。
  3. 网络层面: 同源策略限制了通过XMLHttpRequest等方式将站点的数据发送给不同源的站点(跨域问题)。

同源策略的利与弊

同源策略的设计主要是为了提高Web应用程序的安全性,但同时也带来了一些限制和挑战。

同源策略的好处

  1. 保护隐私: 同源策略就像一扇门,只有来自同一个地方的东西才能进来,其他地方的东西无法随意进入。这样,你在一个网页上输入的密码、银行卡信息等重要信息就不容易被其他不相干的网页偷走。
  2. 防止偷窥: 想象你在一个密闭的房间里,外面的人只能透过窗户看到你,但不能直接进来。同源策略就像这扇窗户,它让网页之间不能直接"看到"或者"影响"对方。
  3. 防止坏人: 想象一下,有个坏人站在街对面,想进你家。同源策略就像一条大街,防止这个坏人轻易过来。这样,恶意网站就不能随意攻击你的电脑,保护你的安全。

同源策略的坏处

  1. 隔离太严格: 有时候同源策略把东西隔得太严格了,像是你想分享照片给朋友,但因为不在同一个地方,就像是你的家和朋友的家被一道高墙分开了,分享变得麻烦。
  2. 增加开发难度: 开发人员在做一些网页功能的时候,因为同源策略的限制,有时候需要花更多的时间和精力来解决跨域的问题,有点像是在高墙上搭桥。
  3. 有时限制合作: 想象一下,你和朋友住在两个小岛上,虽然离得不远,但是因为有一条大河,只能通过桥来往。同源策略就像这条大河,虽然保护了你们各自的安全,但是有时候也限制了你们之间的合作。

用官方的话来总结一下利弊:

同源策略的利

  1. 安全性: 同源策略有效地防止了恶意网站通过跨域请求来获取用户的敏感信息。这有助于保护用户的隐私和防范一些网络攻击。
  2. 沙盒模型: 同源策略通过将不同源的资源隔离开来,创建了一个沙盒模型。这种模型有助于防止恶意代码对其他域的数据进行不受限制的访问。
  3. 防止CSRF攻击: 同源策略可以有效防止跨站请求伪造(CSRF)攻击,因为它限制了在不同域之间进行的请求。

同源策略的弊

  1. 限制数据交互: 同源策略限制了不同源之间的数据交互。这可能导致在开发Web应用时需要特殊的处理来解决跨域通信的问题,例如使用JSONP、CORS等技术。
  2. 跨域资源共享(CORS): 在实际应用中,需要进行跨域资源共享时,开发人员需要配置服务器支持CORS。这增加了开发的复杂性。
  3. 限制广告和分析: 对于广告和分析等服务来说,同源策略可能限制了它们对用户行为和数据的跨域收集,这可能对广告定向和用户分析造成一定影响。
相关推荐
Myli_ing17 分钟前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风19 分钟前
前端 vue 如何区分开发环境
前端·javascript·vue.js
PandaCave26 分钟前
vue工程运行、构建、引用环境参数学习记录
javascript·vue.js·学习
软件小伟28 分钟前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾1 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧1 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm1 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王2 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue