xss攻击
以存储型 XSS攻击为例 攻击者将恶意脚本存储在服务器上，当其他用户访问包含恶意脚本的页面时，脚本会从服务器上加载并在用户的浏览器中执行
假设有一个简单的留言板功能，黑客在留言板上输入恶意脚本,客户端为经任何处理和校验将以下内容提交给服务器，服务器也为特殊化处理，并将其存入数据库中。并返回所有用户都可以浏览的评论区，此时就会出现xss攻击（注意黑客脚本中也可能获取你的token cookie等信息）
<script>alert('你的账号已被攻陷，点击确定查看详情！'); </script>
解答1个疑问，为啥vue中的v-html不会执行
<script>alert(/xss/)</script>
那v-html能否防御xss攻击？ 很明显是不行的。比如注入的内容是：
<template>
<div class="">
<p v-html="hStr"></p>
</div>
</template>
<script>
export default {
name: "App",
components: {},
props: {},
data() {
return {
hStr: "<img src='xxx' onerror='alert(/xss/)' />",
};
},
computed: {},
watch: {},
created() {},
mounted() {},
methods: {},
};
</script>
预防 XSS：
- 输入验证和过滤： 对于用户输入的数据，进行验证和过滤，确保输入符合预期格式和规则。
- 输出转义：在将用户输入的内容显示在页面上之前，对输出进行合适的转义
- 使用v-text代替v-html
- 使用 HttpOnly 和 Secure 标志： 在设置 cookie 时，使用 HttpOnly 和 Secure 标志。HttpOnly 标志可以防止 JavaScript 访问 cookie，从而减少 XSS 攻击获取用户 cookie 的可能性。
- 避免直接操作 DOM，innerhtml = '浏览器地址栏输入的内容'
csrf攻击
攻击过程：
-
用户登录受信任网站A，并获取相应的身份验证Cookie或会话。
-
用户在未登出网站A的情况下，访问了恶意网站B。
-
恶意网站B中包含对受信任网站A的请求，这些请求可能是隐藏的表单提交、图片加载或AJAX请求等。重要的是，这些请求在网站A的上下文中有效，因为浏览器会自动包含网站A的Cookie信息。
-
用户的浏览器在访问恶意网站B的同时，会执行其中包含的对网站A的请求，从而导致未经用户授权的操作在网站A上执行。
例如，假设受信任网站A是一个在线银行网站，攻击者在恶意网站B中创建了一个隐藏的表单提交，该表单目标指向网站A的转账页面，并填写了转账1000美元给攻击者账户的请求。如果用户在已经登录网站A的情况下，访问了恶意网站B，表单将被自动提交并执行转账操作，而用户并不知情。
防范CSRF攻击的措施包括但不限于以下几种
-
CSRF令牌（CSRF Token）：在表单中包含一个随机生成的CSRF令牌，每次提交请求时都验证该令牌的有效性。攻击者无法获取受信任网站A生成的令牌，从而无法成功伪造请求。
-
同源策略：浏览器的同源策略阻止恶意网站B在受信任网站A上执行请求。同源策略要求请求的协议、域名和端口号必须完全一致。
-
验证HTTP Referer：服务器可以验证请求的HTTP Referer头部，确保请求来源是受信任的网站。
-
需要用户进行敏感操作时，要求再次输入密码或其他额外的验证步骤。
