adodo0829/blog

浏览器安全相关

Opened this issue · 0 comments

adodo0829 commented

浏览器安全相关

浏览器安全可以划分为Web页面安全、浏览器网络安全和浏览器系统安全三大方面.

同源策略

如果两个 URL 的协议、域名和端口都相同,我们就称这两个 URL 同源.
浏览器默认两个相同的源之间是可以相互访问资源和操作 DOM 的;
两个不同的源之间若想要相互访问资源或者操作 DOM,那么会有一套基础的安全策略的制约,我们把这称为同源策略...
同源策略主要表现在 DOM、Web 数据和网络这三个层面

// 两个同源的 url
https://m.feng.com/?page=1
https://m.feng.com/?page=2
  • 1.DOM 层
    同源策略限制了来自不同源的js脚本对当前 DOM 对象读和写的操作
// 如果位于同源下的两个页面可以通过window操作
// 如果位于不同源的两个页面不能相互操纵 DOM
// window.postMessage是HTML5的一个接口,可实现不同窗口不同页面的跨域通讯
  • 2.数据层
    同源策略限制了不同源的站点读取当前站点的Cookie,IndexDB,LocalStorage等数据
  • 3.网络层
同源策略限制了通过 XMLHttpRequest 等方式将站点的数据发送给不同源的站点

跨域的几种方式

克服上面同源策略的限制, 实现不同域下的交互操作

JSONP

利用 <script> 标签没有跨域限制的漏洞,网页可以得到从其他来源动态产生的 JSON 数据。JSONP请求一定需要对方的服务器做支持才可以.
但缺点是仅支持get方法具有局限性,不安全可能会遭受XSS攻击。

// client.js
function jsonp({ url, params, callback }) {
  return new Promise((resolve, reject) => {
    let script = document.createElement('script')
    window[callback] = function(data) {
      resolve(data)
      document.body.removeChild(script)
    }
    params = { ...params, callback } // wd=b&callback=show
    let arrs = []
    for (let key in params) {
      arrs.push(`${key}=${params[key]}`)
    }
    script.src = `${url}?${arrs.join('&')}`
    document.body.appendChild(script)
  })
}
jsonp({
  url: 'http://localhost:3000/say',
  params: { wd: 'hello world' },
  callback: 'show'
}).then(data => {
  console.log(data)
})

// server.js
let express = require('express')
let app = express()
app.get('/say', function(req, res) {
  let { wd, callback } = req.query
  console.log(wd) // Iloveyou
  console.log(callback) // show
  res.end(`${callback}('哈喽')`)
})
app.listen(3000)

CORS

服务端设置 Access-Control-Allow-Origin 就可以开启 CORS.该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网站都可以访问资源

postMessage

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递;
它可用于解决以下方面的问题:

  • 页面和其打开的新窗口的数据传递
  • 多窗口之间消息传递
  • 页面与嵌套的iframe消息传递

websocket

Websocket是HTML5的一个持久化的协议,它实现了浏览器与服务器的全双工通信,同时也是跨域的一种解决方案。WebSocket和HTTP都是应用层协议,都基于 TCP 协议。但是 WebSocket 是一种双向通信协议,在建立连接之后,WebSocket 的 server 与 client 都能主动向对方发送或接收数据。同时,WebSocket 在建立连接时需要借助 HTTP 协议,连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

// client.js
let socket = new WebSocket('ws://localhost:3000');
socket.onopen = function () {
  socket.send('heelo');//向服务器发送数据
}
socket.onmessage = function (e) {
  console.log(e.data);//接收服务器返回的数据
}
// server.js
let express = require('express');
let app = express();
let WebSocket = require('ws');
let wss = new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
  ws.on('message', function (data) {
    console.log(data);
    ws.send('world')
  });
})
x

代理 proxy

  • nginx 反向代理
    通过nginx配置一个代理服务器（域名与domain1相同,端口不同）做跳板机,反向代理访问domain2接口,并且可以顺便修改cookie中domain信息,方便当前域cookie写入,实现跨域登录
// proxy服务器
server {
    listen       81;
    server_name  www.domain1.com;
    location / {
        proxy_pass   http://www.domain2.com:8080;  #反向代理
        proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
        index  index.html index.htm;

        # 当用webpack-dev-server等中间件代理接口访问nignx时，此时无浏览器参与，故没有同源限制，下面的跨域配置可不启用
        add_header Access-Control-Allow-Origin http://www.domain1.com;  #当前端只跨域不带cookie时，可为*
        add_header Access-Control-Allow-Credentials true;
    }
}

攻击的几种方式

XSS

在 html 文件或者 dom 中注入了 js 脚本, 在用户浏览页面时利用 js 脚本获取一些信息, 比如 cookie 信息, 监听用户行为,生成广告等

  • 存储型 XSS
因为一些漏铜,js代码被储存到了服务器,然后这段代码被发送到浏览器,
当用户访问页面时,会被 这段js代码获取一些隐私信息
  • 反射型
当用户给服务器发请求时, js代码被插入到请求中;
服务器返回信息时又把这段代码发回来, 常见的场景就是聊天室.
上次看一次直播的时候还遇到了, 哈哈:(
  • 基于 DOM 的 XSS
通过网络劫持, 在 html文件传输过程中修改了其中的内容
  • XSS 预防
// 前端过滤, 服务端设置头部信息和过滤
- 标签过滤
- 利用CSP
参考https://mp.weixin.qq.com/s/myLY1HKyzNiYV9OXhvAlPw

CSRF

利用用户的登录状态和服务器的漏洞, 伪造请求去进行一些操作

  • csrf 预防
- cookie 的 SameSite属性: strict, lax, none
- reffer 验证
- token 验证

http 劫持

http 在传输数据的过程中都是明文传输,这样可能被劫持篡改

  • http 预防
- 使用 https 加密数据
加密与解密
公钥与私钥
数字证书