XSS攻击
XSS攻击：Cross Site Scripting（跨站攻击），因为需要和css区分，简写为XSS。因为最初这种攻击是通过跨域实现的，但是现在html的注入方式趋于多样化，跨域这个特性已经不再明显了。
攻击原理：通过页面上存在漏洞的交互，向页面中注入可执行脚本，数据盗取、网站内容污染还是恶意软件分发。
反射型XSS攻击
通过页面上用户可输入信息的入口（例如url, input等），将恶意代码输入，并且展示在页面上，从而完成攻击
在demo的输入框中，输入如下代码：
<img onerror="alert(11)" src="xx">
可以看到，以下三种方式，有两种可以成功执行alert方法
vue中的双括号是对内容处理过的，只会以纯字符的形式展示，而v-html和dom原生方法都可能存在漏洞。
存储型XSS攻击
通过存在漏洞的数据交互（例如发表评论），将恶意代码上传至后台服务器中，在这段内容展示在其他用户的页面上时进行攻击
基于dom的xss攻击
通过在传输过程中劫持并修改dom内容，从而直接将恶意代码注入页面（可以通过wifi劫持，或是使用本地恶意软件等）
应对方式
前端：
- 直接识别并禁用特殊字符
- 将<>等代码相关字符使用<,>等html特殊字符进行转码
- vue中可以使用{{}}方式展示内容，使用v-html需要添加特殊的预防逻辑
- 使用CSP策略
后端：
- 后端也可以对<>等特殊字符进行转码，或者直接过滤掉，之后存入服务器中
- 写入cookie时采用httponly参数，这样恶意脚本无法获取用户的重要cookie内容
CSRF攻击
CSRF攻击：Cross Site Request Forgery(跨站请求伪造) 攻击者通过用户的登录状态，通过第三方站点进行攻击
举个例子： 现在有正常站点serve.com，和用来攻击的hacker.com站点。hacker站点在以下情况都满足时可以对serve进行CSRF攻击：
- 用户已经在serve正常登录，并存入cookie
- hacker站点掌握了serve的关键接口信息（例如，获取用户信息接口/userInfo）
- 用户进入hacker站点，并且在hacker页面踩雷调用了/userInfo接口
这时候hacker站点就可以带着用户的cookie对serve站点进行访问，从而完成用户登录。
（图片来自zhuanlan.zhihu.com/p/366715378…
应对方式
- cookie的sameSite参数（chrome的高版本sameSite已经默认是Lax）
- 后端通过请求中的origin和refer字段进行判断，过滤来自外名单外的请求来源
- serve站点生成特定token(不存放在cookie中)，并且请求时携带，这样hacker站点发起的请求无法通过token验证
SQL注入
SQL注入：攻击者通过可存储时页面交互（例如用户注册表单），将sql代码片段存入数据库中，从而在影响后端的sql执行
MDN上有详细的SQL注入实现案例
防御方式
- 后端需要对数据进行字符串转义，这块应该都有成熟的库进行处理了
