学习
实践
活动
工具
TVP
写文章
专栏首页CoxhuangWeb安全(一)---浏览器同源策略

Web安全(一)---浏览器同源策略

文章目录

  • Web安全(一) --- 浏览器同源策略
    • #1 什么是浏览器同源策略
      • #1.1 什么是同源 ?
      • #1.2 同源策略的限制
        • #1.2.1 不能读写Cookie、Session Storage、Local Storage、Cache、Indexed DB
        • #1.2.2 DOM
        • #1.2.3 异步请求
    • #2 跨域
      • #2.1 解决跨域的方法
      • #2.2 跨域资源共享(CORS)
        • # CORS方法如何携带Cookie
      • #2.3 Nginx反向代理

Web安全(一) — 浏览器同源策略

#1 什么是浏览器同源策略

浏览器的同源策略一直是开发中经常遇到的问题,它是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能都会受到影响

#1.1 什么是同源 ?

同源是指同 协议同域名同端口

注:IE 未将端口号加入到同源策略的组成部分之中

在浏览器中, <script><img><iframe><link>等标签都可以跨域加载,而不受浏览器的同源策略的限制, 这些带src属性的标签每次加载的时候,实际上都是浏览器发起一次GET请求, 不同于普通请求(XMLHTTPRequest)的是,通过src属性加载的资源,浏览器限制了JavaScript的权限,使其不能读写src加载返回的内容

浏览器同源策略中,除了上述的几个标签可以跨域加载外,其他出现跨域请求时,请求会发到跨域的服务器,并且会服务器会返回数据,只不过浏览器"拒收"返回的数据

#1.2 同源策略的限制

浏览器的同源策略目的是为了保护用户的信息安全,为了防止恶意网站窃取用户在浏览器上的数据,如果不是同源的站点,将不能进行如下操作 :

  • Cookie、LocalStorage 和 IndexDB 无法读写
  • DOM 和 Js对象无法获得
  • AJAX请求不能发送

#1.2.1 不能读写Cookie、Session Storage、Local Storage、Cache、Indexed DB

用户登录某个站点,站点后端服务器验证账号密码正确之后,会返回Cookie、Token 或者是用户名和密码给客户端浏览器,浏览器会将这些个人数据保存到Cookie、Session Storage、Local Storage、Cache、Indexed DB其中的一个(具体怎么保存,取决网站开发人员),如果浏览器没有同源策略,当用户访问恶意网站时,恶意网站就可以通过脚本获取用户的数据,这是极其不安全的行为

所以在不是同源的情况下,不能读写其他站点设置的Cookie、Session Storage、Local Storage、Cache、Indexed DB

#1.2.2 DOM

来自一个源的js只能读写自己源的DOM树不能读取其他源的DOM树

#1.2.3 异步请求

一般而言来自一个源的js只能向自己源的接口发送请求,不能向其他源的接口发送请求。当然其实本质是,一方面浏览器发现一个源的js向其他源的接口发送请求时会自动带上Origin头标识来自的源,让服务器能通过Origin判断要不要向应;另一方面,浏览器在接收到响应后如果没有发现Access-Control-Allow-Origin允许发送请求的域进行请求那也不允许解析

#2 跨域

不同域之间的访问就叫跨域,因为浏览器同源策略的限制,导致我们在不同源之间通信,出现了浏览器接受不到服务端返回数据的问题,这也是目前前后端分离的项目必须要解决的问题

#2.1 解决跨域的方法

  • 通过jsonp跨域
  • document.domain + iframe跨域
  • location.hash + iframe
  • window.name + iframe跨域
  • postMessage跨域
  • 跨域资源共享(CORS)
  • Nginx反向代理
  • nodejs中间件代理跨域
  • WebSocket协议跨域

下面主要讲两个平时我常用的解决跨域的方法 CORS 和 Nginx反向代理

#2.2 跨域资源共享(CORS)

只服务端设置Access-Control-Allow-Origin即可,前端无须设置,若要带cookie请求:前后端都需要设置。

  • 服务端需要设置以下响应头
Access-Control-Allow-Origin:http://www.admin.minhung.me // 一般用法(*,指定域,动态设置),*不允许携带认证头和cookies 
Access-Control-Allow-Credentials: true  // 是否允许后续请求携带认证信息(如:cookies),该值只能是true,否则不返回 
Access-Control-Max-Age: 1800 //预检结果缓存时间,也就是上面说到的缓存,单位:秒 
Access-Control-Allow-Methods:GET,POST,PUT,POST // 允许的请求动词, GET|POST|PUT|DELETE
Access-Control-Allow-Headers:x-requested-with,content-type //允许的请求头字段

# CORS方法如何携带Cookie

如果使用CORS解决跨域问题,除了后端服务器需要配置以上信息外,前端也需要进行如下配置 :

// 表示跨域请求时是否需要使用凭证
axios.defaults.withCredentials = true // Vue.js框架

并且,后端服务器不能配置Access-Control-Allow-Origin: *,一定要记住,如果配置为任意,不管withCredentials有没有设置,cookie也带不过去

#2.3 Nginx反向代理

通过nginx配置一个代理服务器(域名与端口号和客户端不同)做跳板机,反向代理访问api.minhung.me接口,并且可以顺便修改cookie中admin.minhung.me信息,方便当前域cookie写入,实现跨域登录。

前端项目(admin.minhung.me:19700)

后端项目(api.minhung.me:19800)

在前端项目nginx配置中添加proxy_pass,将请求的接口代理到 api.minhung.me:19800

# 前端nginx配置 
server {
    listen       19700;
    server_name  admin.minhung.me;

    location / {
        proxy_pass   http://api.minhung.me:19800;  #反向代理
        proxy_cookie_domain api.minhung.me:19800 admin.minhung.me:19700; #修改cookie里域名
        index  index.html index.htm;
    }
}
本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://blog.csdn.net/Coxhuang复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 浏览器的同源策略

    同源策略是一个重要的安全策略,它用于限制同一个 origin 的文档或者它加载的脚本如何能与另一个源的资源进行交互,它能帮助阻隔恶意文档,减少可能被攻击的媒介

    小菠萝测试笔记
  • 关于浏览器同源策略

    游览器作为网页的入口,是我们直接与服务器进行交互的地方,听说过的浏览器安全事件也不在少数,因此浏览器安全也是浏览器竞争市场的重要因素。

    saucerman
  • 禁用浏览器的同源策略

    如前端项目在本地开发时出现跨域问题,在不修改后端且不配置代理的情况下,临时禁用同源策略是最为简单的方式。

    CodecWang
  • 浏览器同源策略及规避方式

    同源,何为同源,同源的意思就是协议、端口、域名三者均需要相同才能构成同源。例如 这个域名来说,https://为协议,www.oecom.cn为域名,默认的端...

    OECOM
  • 浏览器同源策略和跨域请求

    同源:如果两个页面拥有相同的协议(如http,https等),端口(80,443)和域名(www.happyjava.cn),那么这两个页面就属于同一个源。

    Happyjava
  • 用浏览器缓存绕过同源策略(SOP)限制

    本文分享的Writeup是作者在做Keybase.io的漏洞众测中发现的SOP(同源策略)绕过漏洞,由于Keybase.io在用的多个API端点都启用了CORS...

    FB客服
  • 程序员应对浏览器同源策略的姿势

    浏览器最基本的安全规范——同源策略(Same-Origin Policy)。所谓同源是指域名、协议、端口相同。不同源的浏览器脚本(javascript、Acti...

    有态度的马甲
  • 【安全】899- 前端安全之同源策略、CSRF 和 CORS

    你之所以会遇到 跨域问题,正是因为 SOP 的各种限制。但是具体来说限制了什么呢?

    pingan8787
  • Microsoft Edge和IE浏览器同源策略绕过漏洞分析

    最近爆出了IE浏览器和Edge浏览器跨域获取敏感信息的漏洞(绕过同源策略),不过并未被微软承认,于是天融信阿尔法实验室进行了一系列深度测试,看看此漏洞是否真实严...

    FB客服
  • 浏览器同源策略跨域问题的产生与解决

    1995年,同源政策由 Netscape 公司引入浏览器。目前,所有浏览器都实行这个政策。

    javascript.shop
  • 浏览器同源策略及跨域的解决方法

    同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说 ...

    laixiangran
  • Web Worker 中的 importScripts 和 baseHref 同源策略绕过问题

    原文链接:http://www.brokenbrowser.com/workers-sop-bypass-importscripts-and-basehref/...

    Seebug漏洞平台
  • 浏览器同源策略与如何解决跨域问题总结

    下表给出了与 URL http://store.company.com/dir/page.html 的源进⾏对⽐的示例:

    henu_Newxc03
  • [ Security ] WEB安全 ( 三 ) 之 Cookie安全策略

    首先,cookies 是一段字符串,这一段字符串是存储在前端的浏览器中。他的容量很小只有 4k 。由于 HTTP 协议是一个无状态的协议,在进行通信的时候都需要...

    GavinUI
  • AJAX 与跨域通信(一):AJAX 与同源策略

    在远古时代,如果浏览器需要从服务器请求资源,其交互模式为 “客户端发出请求 -> 服务端接收请求并返回相应 HTML 文档 -> 页面刷新,客户端加载新的 HT...

    Chor
  • 前端人员都懂的浏览器的同源策略,以及如何进行不同源间的相互访问

    作为前端开发人员,你要是连同源策略都不知道是什么,那就太说不过去了。本篇文章将讲述同源策略的定义, 以及当我们需要克服同源策略,如何进行跨域访问数据的方法。

    @零一
  • 常见Web安全问题及防御策略

    安全世界观一词是《白帽子讲Web安全》一书的开篇章节,多年后再读经典,仍然受益匪浅!

    前端江太公
  • Web安全(一)

    用户5878089
  • Python 使用CORS跨域资源共享解决flask服务器跨域问题、浏览器同源策略

    flask 装饰器跨域解决方法: 首先 pip install flask_cors 安装对应的库。

    小蓝枣

扫码关注腾讯云开发者

领取腾讯云代金券