Blog

深入浏览器-安全

time:2020.2.13

目录

  1. xss
  2. csrf

1 xss

1.1 什么是 xss

xss：跨站脚本攻击。cross-site scripting，区别与 css ，改名 xss

原理概括：xss 属于代码注入攻击，攻击者通过在用户网站上注入恶意代码，让浏览器执行，利用这些恶意代码获取用户的敏感信息，比如 cookie, sessionid 等，或者控制用户向目标服务器发起非法请求，从而危害信息安全

攻击者目标：

  1. 获取目标网站重要信息
  2. 攻击目标服务器或其他服务器

问题：

  1. 攻击者是通过哪些渠道实现代码注入的呢？
  2. 代码注入又有哪些方式？
  3. 如何防备 xss 攻击？
  4. 如何判断项目已有 xss 攻击风险？

1.2 xss 攻击渠道

首先需要了解，攻击者是通过哪些渠道向网站注入代码

或者说，你想要攻击别人网站，有哪些途径

攻击者角度：

  1. 主动 - ugc：user generate content，攻击者主动在你的网站上填写表单信息，如果网站没有对输入内容进行控制，则可能发生代码注入
  2. 主动 - url 参数：攻击者主动在访问你的网站参数后面增加恶意代码，则可能发生代码注入
  3. 主动 - post；攻击者通过 postman 等工具，直接向服务器发送信息，如果服务器信息处理不当，则可能发生代码注入
  4. 被动 - 第三方链接：提供一个参杂了自己恶意代码的链接给用户，用户访问这个链接到达目标网站，则可能发生代码注入
  5. 被动 - isp 中间商攻击：属于网络攻击

其他实现方式后续补充

攻击者在通过这些渠道，提供网站注入代码源数据，而网站开发者使用这些数据，如果没有得到合适处理，则会读取、存储、使用这些注入的恶意代码。
那么发生代码注入又有哪些方式呢？

1.3 xss 攻击注入方式

在了解了 xss 攻击渠道之后，我们需要知道攻击者是如何向网站注入代码的，也就是说，注入是如何实现的

代码攻击原理角度：

  1. innerHTML：攻击者通过提交表单保存非法数据、通过修改 url 参数操作，平台使用 innerHTML 使用这些非法数据，生成了非法 js 代码，比如插入 script 标签，href 和 src 插入 javascript: 开头
  2. 事件拦截：修改浏览器自带的事件 onload、onerror、onclick 等，拦截用户操作，获取中间数据。主要通过 iframe 嵌入目标网站
  3. postMessage 事件接收：随意接收了所有域事件，比如访问了非法网站，其发起了 postMessage 事件
  4. cookie 注入：受到中间商网络攻击

说白了就是开发者使用到了注入代码，没有做合理校验

我们在使用数据的时候，一定要抱有不信任的态度，对数据都做完整校验，才能将风险降到最低，攻击注入的方式太多了，也无法避免攻击，只有更好的防备

1.4 防备手段

首先根据 xss 注入方式，归纳一下 xss 攻击有哪些类型

  1. 存储型 xss：注入代码存在于服务器数据库，做 html 模板拼接时引发的注入
  2. 反射型 xss：用户交互产生的恶意代码，比如通过 url 参数注入代码，服务器接收参数并模板拼接成 html 返回给浏览器
  3. dom型 xss：通过网络劫持来注入恶意代码，比如 wifi 拦截、本地恶意软件拦截等

dom 型 xss 不同于前2种，引入注入代码的读取是在前端读取

问：那么防御应该是前端来做，还是后端来做呢？
答案：不同场景处理方式不同，前后端都需要预防，比如

  1. 服务端渲染：在服务端模板拼接时，html 字符串是在服务器发生的过程，只有后端在拼接的时候做校验、转义
  2. sql 注入：这个也是需要后端处理，在插入数据库之前需要校验和处理
  3. 浏览器渲染：需要前端不信任后弹返回数据，做充分数据校验

那么，有哪些常用的 xss 防备手段呢？也就是说，我们在前端开发时，应该在哪些地方注意？

  1. html 插入：在使用 innerHTML, outerHTML, document.write(), v-html 等时，需要做合理数据校验，尽量采用 .textContent, .setAttribute 方法
  2. csp 禁止非法事件重写：浏览器的 onload, onerror, onclick 事件都可以被重写，这个可以开启 csp 严格校验，尽量采用 addEventListener 实现
  3. js 方法执行：setTimeout, setInterval, eval 等方法可以直接执行字符串，尽量别直接执行字符串，函数方法名自己写，内部参数做严格校验
  4. a 标签 javascript:：在 a 标签拼接 url 参数时，要做参数校验
  5. 输入长度控制：增加 xss 攻击的难度
  6. csp 严格模式：禁止加载外域的文件，禁止内联 script 脚本执行，禁止外域提交，禁止未授权脚本执行
  7. 敏感 cookie 设置 Http-only
  8. postMessage 做安全校验

csp 可以通过 http response header 或者 html meta 来设置 <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">。default-src ‘self’; 这条限制本域、非内联资源执行

1.5 xss 攻击的检测

使用合理的检测工具，可以帮助我们尽快的找出潜在 xss 攻击风险，比如 Mozilla HTTP Observatory

1.6 csp 规则

常规添加 meta 或者 http header

  meta: {
    // 开启同源严格模式
    'Content-Security-Policy': { 
      'http-equiv': 'Content-Security-Policy', 
      'content': "default-src 'self' *.hello.com 'unsafe-inline' 'unsafe-eval'; font-src 'self' data:; img-src 'self' data: blob:; connect-src 'self' http: ws:;" 
    },
  },

2 csrf

cross site request forege

攻击要点

  1. 服务器存在明显的 csrf 漏洞
  2. 黑客通过链接获取用户的 cookie，通过第三方网站发起请求

防御要点

  1. 阻止黑客获取用户 cookie：设置 SameSite
  2. 服务器对 http 请求的 origin, referer 做校验
  3. 服务器动态生成 CSRF Token，当 http 请求发起时会带上，而第三方网站是不会有的

3 一些常见知识点

  1. innerHTML 在 html5 中会忽略内部的 script 标签，这个是浏览器预防 xss 攻击的自带手段
  2. 网络劫持是 xss 攻击的一种重要手段，服务器渲染会改变 html 模板引入 script 造成 xss 攻击，前端渲染通过劫持 xhr 请求，伪造假数据，更改 a 标签为 javascript:alert("xss") 等手段

4 web 设计安全

  1. 身份认证：走统一登录
  2. 访问控制：所有接口必须登录之后可以访问，也就是说需要带上 cookie, token 等身份信息；角色权限控制，防止越权
  3. 会话管理：cookie, session, token 超时控制；jwt签名密钥高复杂度，不能泄漏，并严格校验 signature，payload 不能包含密码等敏感信息；身份认证 cookie 设置 http-only
  4. 个人敏感信息保护：密钥、账号加密存储
  5. 验证码安全：每次随机生成
  6. 传输安全：启用 https
  7. 信息提示：设置友好错误提示，避免系统异常、奔溃、错误时暴露出敏感信息数据；前端代码不能包含 token 等敏感信息
  8. 文件上传安全控制：严格校验文件名、内容，设置文件后缀白名单
  9. 第三方组件安全：使用指定版本的第三方组件
  10. 日志审计：后台应用必须对安全事件、操作事件做日志记录，做到有迹可循

安全编码规范：

  1. 禁止敏感信息硬编码
  2. 禁止使用含安全漏洞的第三方编辑器版本

代码安全扫描：sonar

5 安全加密算法

  1. 不能使用包含安全弱点的算法，比如 sha1, md5 及其衍生的算法；禁止使用 ECB 加密模式
  2. AES 推荐算法：AES/GCM/NoPadding
  3. SHA-256 算法用于加密用户登录口令时必须加 salt，且 salt 长度和哈希算法的长度一致

参考文章

  1. 谷歌发布实验性可信类型API
  2. 美团-前端安全系列-xss
  3. mdn csp
  4. w3c csp2