前端安全之XSS和CSRF

这两个内容实际上比较少见,属于安全问题,而不是前端技术问题。但前端在开发的时候还是要知道这个东西的。特别是在一些对安全敏感的领域。例如银行,互联网大厂。其实一般的小企业也是要注意的。毕竟,一般网站的安全性都是非常的脆弱的。

XSS(跨站脚本攻击)

简单来说,黑客利用漏洞将代码写入服务器,能够影响网站在所有用户面前的展示效果。也就是能篡改你的页面。

这个和sql注入是非常类似的。

防范设施:

1.vue框架本身的{{}}语法能够防止内容被转移。

2.尽量避免使用v-html标签,内联事件(onClick="...",onLoad="..."),eval。

3.如果一定要使用v-html标签,那么使用能防止XSS攻击的第三方库DomPurify。

4.开启CSP。

题外话:input里面的文本是不会被注入的,只有里面的文本变成html代码才会被注入。通过修改本地浏览器代码是不算XSS攻击的,那只是影响他本地的页面显示。XSS攻击是利用漏洞将代码写入服务器,能够影响网站在所有用户面前的展示效果。

CSRF(跨站请求伪造)

这个非常的厉害。比如你登录一个银行账号,你的账号密码被存储在银行网站的Cookie上。这时候,正巧你打开了一个危险网站,这个网站是可以直接读取你银行的Cookie信息直接登录你的账号。当然,这种情况只会发生在这个银行网站完全没有做安全防护的情况下。

防范设置:

1.使用CSRF token,后端生成一个动态的token,验证这个token的唯一性。这个和普通的token是独立的。

2.设置 SameSite Cookie 属性,限制第三方网站携带 Cookie。

3.添加二次确认或者恶意代码自动执行,添加验证码。

4.后端设置origin和Referer。

题外话:

既然Cookie这么危险,为什么要使用Cookie?不是的,Cookie是安全的,但需要你设置SameSite Cookie,使用CSRF等这些安全设置。Cookie在跨域方面是比较麻烦的。

localstorage存在xss攻击的风险。

各有利弊。可以配合使用。

相关推荐
数据库安全1 小时前
《金融电子化》:构建金融韧性运行安全体系:从灾备管理到主动防御新范式
大数据·安全·金融
太过平凡的小蚂蚁2 小时前
Kotlin 协程中常见的异步返回与控制方式(速览)
开发语言·前端·kotlin
咖啡の猫2 小时前
Vue初始化脚手架
前端·javascript·vue.js
晨枫阳3 小时前
uniapp兼容问题处理总结
前端·vue.js·uni-app
会开花的二叉树4 小时前
应用层网络协议深度解析:设计、实战与安全
网络·网络协议·安全
liusheng4 小时前
腾讯地图 SDK 接入到 uniapp 的多端解决方案
前端·uni-app
拉不动的猪4 小时前
如何处理管理系统中(Vue PC + uni-app 移动端):业务逻辑复用基本方案
前端·javascript·架构
边洛洛4 小时前
next.js项目部署流程
开发语言·前端·javascript
Zsnoin能4 小时前
浏览器连接 新北洋BTP-P33/P32蓝牙打印机,打印 二维码
前端
红树林074 小时前
beef-xss网页无法访问
安全·web安全·xss