前端安全之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攻击的风险。

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

相关推荐
国科安芯14 小时前
关于软错误的常见问题解答
单片机·嵌入式硬件·安全·硬件架构·软件工程
骑自行车的码农14 小时前
React 合成事件的设计原理 2
前端·react.js
JamesGosling66614 小时前
详解 Vue 3.6 Vapor Mode:从原理到问题,看透 VDOM 逐步退场的底层逻辑
前端·vue.js
一个很帅的帅哥15 小时前
Vue中的hash模式和history模式
前端·vue.js·history模式·hash模式
进阶的鱼15 小时前
React+ts+vite脚手架搭建(三)【状态管理篇】
前端·javascript·react.js
By北阳15 小时前
Less resolver error:‘~antd/es/style/themes/index.less‘ wasn‘t found.
前端·elasticsearch·less
西洼工作室15 小时前
SSE与轮询技术实时对比演示
前端·javascript·css
小红帽61516 小时前
使用burp工具的intruder模块进行密码爆破
网络·安全·html
老赵聊算法、大模型备案16 小时前
2025年6-8月中国大模型备案分析报告
大数据·人工智能·安全·语言模型·aigc
IT_陈寒16 小时前
Vite 5.0 性能优化实战:3 个关键配置让你的构建速度提升50%
前端·人工智能·后端