前端知识库-前端安全系列二(同源策略)

简介: 在我们日常开发中在与后台联调的时候是不是会经常遇到CORS错误,作为一名前端开发大家应该都知道这个事浏览器同源策略导致的,如何解决这个问题相信大家都有自己团队的方法。如有不了解的可以看下我之前总结过文章跨域解决方案,本文主要来分析下跨域的原因,以及跨域涉及到的API。

网络异常,图片无法展示
|

前言


在我们日常开发中在与后台联调的时候是不是会经常遇到CORS错误,作为一名前端开发大家应该都知道这个事浏览器同源策略导致的,如何解决这个问题相信大家都有自己团队的方法。如有不了解的可以看下我之前总结过文章跨域解决方案,本文主要来分析下跨域的原因,以及跨域涉及到的API。

SOP同源策略(源:协议 域名 端口)


在MDN中如此介绍同源策略:同源策略是一个重要的安全策略(也可以理解为一种规定),它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。

  • 关键词:限制 阻隔 恶意 减少
  • 目的:为了提供一个安全页面操作环境,保护用户信息不被窃取。
  • 阻止内容:大概可分为三类存储类(cookie访问 localstorage/sessionstorage访问) DOM类(iframe对DOM的操作 ) ajax类(ajax的请求)

网络异常,图片无法展示
|
注:上图是从网上找到一幅SOP示意图

下面介绍下同源策略限制的一些操作:

存储相关

  • cookie:cookie我们应该都很熟悉了,用来存储一些验证/基础信息等,如果没有同源策略的限制那网站的cookie就无法保证安全性了
//在客户端cookie是通过document.cookie来设置的
document.cookie="***;***;"
//另外在服务端也可以通过Set-Cookie来设置客户端的cookie

在cookie的设置中我们常用的一些设置属性都是以同源策略为基础的,如:path domain HttpOnly

  • localstorage/sessionstorage:另外浏览器的另外一种存储方式也是在同源限制的情况得以安全的使用,必须要满足同源条件才能在网站中自由读取localstorage和sessionstorage
//在同源策略的限制下,我们只能获取当前域下的数据
localStorage.getItem("key")

请求相关

同源策略限制了我们不同源的网站的ajax请求会被阻止,这个我们在日常开发中也会经常遇到,在日常联调中我们本地请求后台接口(未处理的情况)肯定会报跨域错误。导致此原因我们要理解本质上同源策略并不禁止跨域请求,而是在请求后拦截了请求的返回

//响应首部,用于预检请求中,列出了将会在正式请求的 字段中出现的首部信息
Access-Control-Allow-Headers:**
//响应首部 预检请求的应答中明确了客户端所要访问的资源允许使用的方法或方法列表。
Access-Control-Allow-Methods:**
//响应头指定了该响应的资源是否被允许与给定的origin共享
Access-Control-Allow-Origin:**

DOM相关

试想如果没有同源策略,攻击者只需要在钓鱼通过iframe引入他们想要攻击的网页,然后诱导用户通过钓鱼链接打开那么被攻击的网站,用户的操作对于攻击者而言便无秘密可言了。

//如果没有SOP,在钓鱼网站通过js可以随意后去当时的操作信息
<iframe src="*******"></iframe>

相关问题


为何同源策略下仍然需要防范CSRF攻击?

在上篇文章中说了web攻击的一种方式CSRF,上文已经说了防御的办法,本文就不再赘述,有兴趣的可以点开链接看看,那么既然有了同源策略的限制为何还能进行CSRF攻击? 核心点我们要明白SOP限制的内容是什么,在SOP中是不会阻止接口请求而是拦截请求结果,如此攻击者就可以在攻击网站中通过html标签的方式绕过SOP拦截,如常用的img标签:

<img src=http://******?action=****>

所以说浏览器安全需要我们考虑到方方面面,不能仅仅一个视角去判断。要知道千里之堤溃于蚁穴,一个漏洞和一百个漏洞并无区别。

总结


同源策略可以说是浏览器安全的基石,试想如果你打开一个钓鱼网站,这个网站可以随意获取你当前浏览器同时打开的其他网站信息,那我们还有什么安全可言。了解同源策略更是我们每一名前端开发的必修课,前端安全问题也是我们必须面对的问题之一,个人觉得同源策略就是在浏览器中形成一个个沙箱环境,让我们可以安全的浏览各个网站。另外作为一名前端开发者我们一定要写安全的代码,做一个稳重的程序员,守好安全的第一道防线。

相关文章
|
7月前
|
缓存 安全 JavaScript
前端安全:Vue应用中防范XSS和CSRF攻击
【4月更文挑战第23天】本文探讨了在Vue应用中防范XSS和CSRF攻击的重要性。XSS攻击通过注入恶意脚本威胁用户数据,而CSRF则利用用户身份发起非授权请求。防范措施包括:对输入内容转义、使用CSP、选择安全的库;采用Anti-CSRF令牌、同源策略和POST请求对抗CSRF;并实施代码审查、更新依赖及教育团队成员。通过这些实践,可提升Vue应用的安全性,抵御潜在攻击。
1006 0
|
1月前
|
存储 前端开发 安全
前端小白逆袭记:如何快速掌握前端安全知识,保护用户数据安全?
【10月更文挑战第30天】作为一名前端小白,我在初入职场时对前端安全几乎一无所知。但随着项目深入,我逐渐意识到前端安全的重要性,特别是在保护用户数据方面。本文将分享我在快速掌握前端安全知识的心得和技巧,包括防范XSS、CSRF攻击、敏感信息处理、使用HTTPS协议等内容,希望能为同样在前端道路上奋斗的你提供帮助。
31 3
|
4月前
|
Java 开发者 关系型数据库
JSF与AWS的神秘之旅:如何在云端部署JSF应用,让你的Web应用如虎添翼?
【8月更文挑战第31天】在云计算蓬勃发展的今天,AWS已成为企业级应用的首选平台。本文探讨了在AWS上部署JSF(JavaServer Faces)应用的方法,这是一种广泛使用的Java Web框架。通过了解并利用AWS的基础设施与服务,如EC2、RDS 和 S3,开发者能够高效地部署和管理JSF应用。文章还提供了具体的部署步骤示例,并讨论了使用AWS可能遇到的挑战及应对策略,帮助开发者更好地利用AWS的强大功能,提升Web应用开发效率。
74 0
|
4月前
|
安全 算法 前端开发
外滩大会安全 AR 沙盘首秀--背后的前端技术
外滩大会安全 AR 沙盘首秀--背后的前端技术
|
6月前
|
监控 安全 前端开发
前端安全:XSS攻击与防御策略
抵御XSS攻击的关键策略包括输入验证、输出编码、设置安全HTTP头如CSP和X-XSS-Protection、谨慎管理存储和会话、使用DOMPurify等库进行数据清理、采用安全编码实践、教育用户和开发人员、实施多层防御、持续测试和更新。其他措施如使用非渲染模板引擎、限制错误信息、使用WAF、加密数据、遵守安全编码标准和进行安全审计也是重要步骤。
161 0
|
7月前
|
存储 安全 前端开发
PHP医院安全不良事件管理系统源码(AEMS)前端vue2+element+后端laravel8不良事件上报与闭环管理
医院不良事件上报与管理系统结合现代医院管理思路,遵照PDCA全面质量循环管理方法而设计,并在多家大型三甲医院成熟运用。系统从事件上报、基于人、机、料、法 、环的RCA分析、事件整改、效果评估实现了结构化、标准化、智能化的管理和分析,满足医院可追溯化、全流程闭环管理要求,满足等级医院评审细则要求,大力提高医院不良事件上报的效率,保障事件分析的准确性,促进医疗安全的提高,避免同类事件再次发生,改善整个医院医疗安全,从而实现医院安全医疗的目标。
85 3
|
7月前
|
SQL 安全 前端开发
前端安全方面
前端安全方面
52 0
|
7月前
|
缓存 负载均衡 前端开发
前端反向代理的神奇世界:加速、安全与缓存的秘密(上)
前端反向代理的神奇世界:加速、安全与缓存的秘密(上)
前端反向代理的神奇世界:加速、安全与缓存的秘密(上)
|
7月前
|
缓存 前端开发 安全
前端反向代理的神奇世界:加速、安全与缓存的秘密(下)
前端反向代理的神奇世界:加速、安全与缓存的秘密(下)
|
7月前
|
安全 前端开发 算法
前端知识笔记(三十八)———HTTPS:保护网络通信安全的关键
前端知识笔记(三十八)———HTTPS:保护网络通信安全的关键
76 0

热门文章

最新文章