网络安全相关

November 02, 2020 2373

xss攻击

​ XSS攻击是指跨站脚本攻击，是一种黑客攻击的手段，往HTML或者是DOM中注入恶意脚本，当用户浏览页面时实施攻击。最初XSS攻击是通过跨域实现的，但是现在跨域已经不是唯一的实现方式了，XSS的名称（cross site scripting）却一直保存下来。

实现方式

XSS实现的三种方式：反射型，存储型，基于DOM型。

反射型：将恶意脚本当作用户发送给服务器的请求的一部分，然后服务器将恶意脚本返回给用户。

存储型：利用服务器漏洞将恶意脚本存储到服务器中，当用户访问页面执行恶意脚本。

基于DOM型：黑客利用各种手段比如说设置钓鱼WiFi，恶意软件，劫持用户请求的数据，然后用户加载修改过的页面。

预防攻击的方法

主要有以下几种方法：

一：使用服务器对输入脚本进行过滤或转码

比如服务器对script标签进行过滤，对<>进行转码

二：充分利用CSP（内容安全策略）

CSP包含以下内容：

  • 禁止加载其他域下的资源
  • 禁止加载内联脚本和未授权脚本
  • 禁止向第三方发送数据
  • 提供上报机制，便于修复问题

三：使用HTTPonly属性

设置cookie的HTTPonly属性，表明cookie只能使用在HTTP请求的过程中，JS脚本不能通过document.cookie访问。

CSRF

📕csrf（跨站请求伪造）是指，恶意脚本利用用户的浏览器，发送伪造的请求给用户认证过的网站，利用浏览器的漏洞：简单的身份验证只能保证请求是用户浏览器发送的，却不一定是用户想发送的。

防御：检查referer字段，请求来源的URL（包含协议、域名和参数），缺点是可能被恶意修改

添加校验token：要求用户浏览器提供不保存在cookie中，并且无法伪造的数据进行校验。通常是窗体的一个数据项，服务器附加伪随机数在窗体上，通过窗体发送的请求会携带这个伪随机数，提供给服务器进行校验

网络请求

如何中断网络请求

1、使用abortController

fetch是web获取资源的接口，终止fetch可以使用abortController，实例化创建一个对象，通过对象的signal属性来控制fetch。通过调用对象的abort方法，对象内部改变signal属性，实现fetch中断网络请求。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
const controller = new AbortController();
let signal = controller.signal;
 console.log('signal 的初始状态: ', signal);

const downloadBtn = document.querySelector('.download');
const abortBtn = document.querySelector('.abort');

downloadBtn.addEventListener('click', fetchVideo);

abortBtn.addEventListener('click', function() {
  controller.abort();
 console.log('signal 的中止状态: ', signal);
});

function fetchVideo() {
  //...
  fetch(url, {signal}).then(function(response) {
    //...
  }).catch(function(e) {
    reports.textContent = 'Download error: ' + e.message;
  })
}

2、axios的取消请求方法

使用axios的cancelToken.source（）工厂方法实例化一个对象，axios请求头添加cancelToken字段并且值为对象的token，通过调用对象的cancel方法，改变cancelToken字段的值，来实现取消请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios.get('https://mdn.github.io/dom-examples/abort-api/sintel.mp4', {
  cancelToken: source.token
}).catch(function (thrown) {
  // 判断请求是否已中止
  if (axios.isCancel(thrown)) {
    // 参数 thrown 是自定义的信息
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

网络请求组成

请求行、请求头、请求体、

请求行组成：请求方法、url、网络协议、

请求头：由属性和属性值组成

请求体：键值对形式传递参数

image-20220104161700086

查看评论