前端xss攻击和csrf攻击详解

xss攻击

xss攻击的核心是脚本攻击

xss【脚本类的攻击】网页js代码的一些执行,可能会导致让你的用户个人信息发送给黑客的服务器
攻击分为反射型,存储型,DOM型
反射型 , 和dom型属于是非持久的,
反射性可能往文档对象中的a标签的href的属性换了一个地址,或者插入一个DOM如a标签等等，来诱导用户点击黑客的url地址.或者用户通过点击Dom去改变事件执行函数然后让黑客通过document获取用户个人信息等等。

存储型：黑客通过改变dom的事件，去请求黑客服务器的恶意js代码给到客户端,把一些恶意的js脚本存储到前端。

原生js防止xss攻击我们一般对文本中的内容进行转义,&< >/’“”,引号等等进行转义。或者用innerText代替innerHTML

Vue当中使用v-text去编译我们的字符串,不要用v-html去转义。
React当中我们不需要转译因为react源码内部已经自动帮我们进行字符串的转译,React当中有一个api是可以和v-html一样功能的,dangerouslySetInnerHTML这个api会让字符串以dom的形式渲染到页面上，我们在使用这个api的时候要谨慎使用。

csrf攻击

**

csrf跨站点请求伪造【关键点是请求伪造】

**
可以理解为攻击者盗用了用户的身份,以用户的名义去发起恶意的请求。
比如你访问了一个银行网站，当你没有关闭这个银行网站的时候又去访问了黑客的网站，黑客就可以通过一些非法的手段去获取到你访问银行网站的cookie这些隐士信息，然后黑客就拿着你的隐私信息去伪造你的身份给银行网站发送一些非法请求。

防范措施,可以添加一个请求头refrer字段这个字段用来告诉后端是哪个域名或者哪个网站在请求后台的数据,如果可信任的网址就抛出异常给前端接口。

加token给前端加一个setCookie cookie值就是token，每次请求对比用户方token与服务端token是否吻合。