前端必须懂的计算机网络知识系列文章：

  • DNS服务器和跨域问题
  • 计算机网络的分层模型
  • IP地址和MAC地址
  • 前端必须懂的计算机网络知识—(跨域、代理、本地存储)
  • 前端必须懂的计算机网络知识—(TCP)
  • 前端必须懂的计算机网络知识—(HTTP)
  • 前端必须懂的计算机网络知识—(XSS、CSRF和HTTPS)

HTTP为什么不安全

  1. 可能被窃听：
  • HTTP 本身不具备加密的功能,HTTP 报文使用明文方式发送
  • 由于互联网是由联通世界各个地方的网络设施组成,所有发送和接收经过某些设备的数据都可能被截获或窥视。(例如大家都熟悉的抓包工具:Wireshark),即使经过加密处理,也会被窥视是通信内容,只是可能很难或者无法破解出报文的信息而已
  1. 认证问题
  • 无法确认你发送到的服务器就是真正的目标服务器(可能服务器是伪装的)
  • 无法确定返回的客户端是否是按照真实意图接收的客户端(可能是伪装的客户端)
  • 无法确定正在通信的对方是否具备访问权限,Web服务器上某些重要的信息，只想发给特定用户即使是无意义的请求也会照单全收。无法阻止海量请求下的 DoS 攻击（Denial of Service，拒绝服务攻击）。
  1. 可能被篡改
  • 请求或响应在传输途中，遭攻击者拦截并篡改内容的攻击被称为中间人攻击（Man-in-the-Middle attack，MITM）。

XSS攻击

XSS，即为（Cross Site Scripting），中文名为跨站脚本,跨站脚本的重点不在“跨站”上，而在于“脚本”上。大多数XSS攻击的主要方式是嵌入一段远程或者第三方域上的JS代码，实际上是在目标网站的作用域下执行了这段第三方域上的js代码。

反射型XSS（非持久型XSS）

特点：就像镜子反射一样，浏览器发射含XSS的url，服务器将其反射回来

  1. 浏览器发生请求时，XSS代码出现在请求URL中，作为参数提交到服务器，
  2. 服务器解析并响应，响应结果中包含XSS代码，
  3. 最后浏览器解析并执行。

案例：表单提交

//test.html
<body><textarea name="txt" id="txt" cols="80" rows="10"><button type="button" id="test">测试</button><script>var test = document.querySelector('#test')test.addEventListener('click', function () {var url = `/test?test=${txt.value}`   //1.发送一个GET请求var xhr = new XMLHttpRequest()xhr.onreadystatechange = function () {if (xhr.readyState === 4) {if ((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304) {// 3. 客户端解析JSON，并执行var str = JSON.parse(xhr.responseText).testvar node = `${str}`document.body.insertAdjacentHTML('beforeend', node)} else {console.log('error', xhr.responseText)}}}xhr.open('GET', url, true)xhr.send(null)}, false)</script>
</body>

//server.js
var express = require('express');
var router = express.Router();
router.get('/test', function (req, res, next) {// 2.服务端解析成JSON后响应res.json({test: req.query.test})
})

现在我们通过给textarea添加一段有攻击目的的img标签:

点击<测试>按钮，一个XSS攻击就发生了。下面图片中是获取了本地的部分cookie信息: 上面只是模拟攻击，通过alert获取到了个人的cookie信息。一般黑客会注入一段第三方的js代码，然后将获取到的cookie信息存到他们的服务器上，拿到我们的身份认证做一些违法的事情了。

存储型XSS（持久型XSS）

特点：黑客将XSS代码发送给服务器，然后通过服务器散播

  1. 黑客将XSS代码发送到服务器（不管是数据库、内存还是文件系统等。）
  2. 其他人请求页面的时候就会带上XSS代码了。

案例：最典型的就是留言板XSS。

  • 黑客提交了一条包含XSS代码的留言到数据库。
  • 当目标用户查询留言时，那些留言的内容会从服务器解析之后加载出来。
  • 浏览器发现有XSS代码，就当做正常的HTML和JS解析执行。XSS攻击就发生了。

DOM型XSS

特点：DOM XSS代码不需要服务器端的解析响应的直接参与，而是完全通过浏览器端的DOM解析。

  • 浏览器的代码中含有eval，new Function等将字符串内容执行的代码
  • 在执行的字符串中嵌入可以执行XSS代码字符串 案例：
test.addEventListener('click', function () {var node = window.eval(txt.value)window.alert(node)
}, false)//txt中的代码如下:
<img src='null' onerror='alert(123)' />

XSS危害

  • 通过document.cookie盗取cookie
  • 使用js或css破坏页面正常的结构与样式
  • 流量劫持（通过访问某段具有window.location.href定位到其他页面）
  • Dos攻击：利用合理的客户端请求来占用过多的服务器资源，从而使合法用户无法得到服务器响应。
  • 利用iframe、frame、XMLHttpRequest或上述Flash等方式，以（被攻击）用户的身份执行一些管理动作，或执行一些一般的如发微博、加好友、发私信等操作。
  • 利用可被攻击的域受到其他域信任的特点，以受信任来源的身份请求一些平时不允许的操作，如进行不当的投票活动。

XSS防御

XSS攻击可以看出，不能原样的将用户输入的数据直接存到服务器，需要对数据进行一些处理：

  • 过滤危险的DOM节点。如具有执行脚本能力的script, 具有显示广告和色情图片的img, 具有改变样式的link, style, 具有内嵌页面的iframe, frame等元素节点。
  • 过滤危险的属性节点。如on-, style, src, href等
  • 对cookie设置httpOnly,但是也会导致前台无法操作cookie，不太推荐。

CSRF

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，攻击者盗用了你的身份，以你的名义发送恶意请求。

特点：

  1. 登录受信任网站A，并在本地生成Cookie。
  2. 在不登出受信任网站A的情况下，访问危险网站B。
  3. 危险网站会向受信任A的网站发送请求，同时会携带受信任网站A本地生成Cookie(用同一个浏览器访问同一个域的接口)

案例：

//钓鱼网站，利用用户的cookie进行权限操作转账
<body onload="steal()"><iframe name="steal" display="none">
&emsp;&emsp;    <form method="POST"name="transfer"&emsp;action="http://www.myBank.com/Transfer.php">
&emsp;&emsp;&emsp;&emsp;    <input type="hidden" name="toBankId" value="11">
&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;<input type="hidden" name="money" value="1000">
&emsp;&emsp;&emsp;&emsp;</form>
&emsp;&emsp;</iframe>
</body>

CSRF的危害

  1. 篡改目标网站上的用户数据；
  2. 盗取用户隐私数据；
  3. 作为其他攻击向量的辅助攻击手法；
  4. 传播CSRF蠕虫。

CSRF的防御

  1. 验证码，因为验证码必须在受信任的网站上发送给浏览器的，并且伪造的网站和受信任的网站非同源，所以没有办法获取受信任网站发送的session，所以验证码是没有办法伪造的。
  2. refer，标识了当前请求的页面的源，伪造网站可以篡改成受信任的网站源，并不保险
  3. token，由于它是通过服务的发送给客户端的令牌，并且存储在浏览器的localstorage中，由于同源策略，并且token还有校验规则，所以token并不能轻易篡改。

Token和JWT

Token的特点

  1. session是通过cookie传输的，每次访问网站都会自主的带上，所以存在安全问题和浪费带宽，token存储在localstorage，可以选择性发送给后台，由于同源策略，安全性高
  2. session在集群服务器中很难实现共享，服务器必须存在一份sessionq清单，token不需要存储清单，共用一个密钥，发送token可以实现共享
  3. session销毁后会从清单消失，token的注销不好实现，没有清单证明这个token不能用，所以得用一个黑名单来标注

JWT

jwt是实现token的一种方式，一个token分3部分，3部分之间用“.”号做分隔：

  1. header：头部为base64字符串
  2. payload：载荷为base64字符串
  3. signature：签证 hader+payload经过key加密得出

EXP:eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c

  • JWT原理：
let jwt = {//解码decode(token,secret){let [header,content,sign] = token.split('.');let h = JSON.parse(this.formBase64ToString(header));let c = JSON.parse(this.formBase64ToString(content));if(sign !== this.sign([header,content].join('.'),secret){throw new Error ('Not allowd')}return c},//加码encode(payload,secret){let header = this.toBase64(JSON.stringify({'type':'JWT',alg:'HS25' }));let content = this.toBase64(JSON.stringify(payload));let sign = this.sign([header,content].join('.'),secret);return [header,content,sign].jion('.');}//转换为base64toBase64(str){return Buffer.from(str).toString('base64');}//签名sign(str,secret){return require('crypto').createHmac('sha256',secret).update(str);}
}module.exports = jwt;
  • JWT后台：
const express = require('express');
const bodyParser = require('body-parser')
const jwt = require('jwt-simple')
const userList=[{id:1,username:'kbz',password:'123456'}
]
const SECRET = 'MISS';
let app = express();
app.use(bodyParser.json);//因为请求头中有Authorization字段，这和跨域时要设置name传参数一样,可以参考：
//前端必须懂的计算机网络知识—(跨域、代理、本地存储)
//https://juejin.im/post/5bb1cc2af265da0ae5052496
app.use(function(req,res,next){res.setHeader('Access-Control-Allow-Origin',"*");res.setHeader('Access-Control-Allow-Headers',"Content-Type,Authorization");res.setHeader('Access-Control-Allow-Methods',"GET,POST,OPTIONS");if(req.method === 'OPTIONS'){res.end();}next();
})//登陆时发送token
app.post('/login',function(req,res,next){let user = req.body;userList.find(person=>(person.id === user.id));if(user){jwt.encode({id:user.id,username:user.username},SECRET)res.json({code:0,data:{token}})}else{res.json({code:1,data:'用户不存在'})}
})// 需要验证权限，则取token验证
// 请求头Authorization:Bearer token
app.get('/order',function(req,res,next){let authorization = req.headers['authorization'];if(authorization){let token = authorization.split(' ')[1];try{let user = jwt.decode(token,SECRET);req.user = user;}catch(e){res.status(401).send('Not Allowed')}}else{res.status(401).send('Not Allowed')}})
app.listen(3000);
  • JWT前台
//login.html
<input type="text" id='username' class="form-control">
<input type="text" id='password' class="form-control">
<span onclick='login()'></span>
<scrpipt>axios.post('/user').then(res=>{localStorage.setItem('token',res.data.data.token)location.href='/order'})
</script>//order.html
<scrpipt>axios.interceptors.request.use(function(config){let token = localStorage.getItem('token');if(token){config.headers.Authorization = 'Bearer '+ token}})axios.get('/order').then(res=>{console.log(res);})
</script>

HTTPS(HTTP+TLS/SSL)

TLS/SSL

TLS/SSL的功能实现主要依赖于三类基本算法：

  • 非对称加密实现身份认证和密钥协商
  • 对称加密算法采用协商的密钥对数据加密
  • 散列函数验证信息的完整性，针对于密钥泄露的不安全性 结合三类算法的特点，TLS 的基本工作方式:
  1. 客户端使用非对称加密与服务器进行通信，实现身份验证并协商对称加密使用的密钥
  2. 然后对称加密算法采用协商密钥对信息以及信息摘要进行加密通信，不同的节点之间采用的对称密钥不同，从而可以保证信息只能通信双方获取

对称加密

  • 相同的密钥可以用于信息的加密和解密，掌握密钥才能获取信息，能够防止信息窃听，通信方式是1对1(前提示密钥不泄露)
  • 算法公开、计算量小、加密速度快、加密效率高
  • 客户端、服务器双方都需要维护大量的密钥，维护成本很高
  • 因每个客户端、服务器的安全级别不同，密钥容易泄露，交易双方都使用同样钥匙，安全性得不到保证

非对称加密

  • 非对称加密算法的特点加密和解密分别使用不同的密钥,客户端用公钥对请求内容加密，服务器使用私钥对内容解密，反之亦然。
  • 相对来说加解密速度较慢，使用非对称加密在数据加密解密过程需要消耗一定时间，降低了数据传输效率
  • 公钥是公开的，所以针对私钥加密的信息，黑客截获后可以使用公钥进行解密，获取其中的内容
  • 公钥并不包含服务器的信息，使用非对称加密算法无法确保服务器身份的合法性，存在中间人攻击的风险，服务器发送给客户端的公钥可能在传送过程中被中间人截获并篡改

完整性验证算法

  • 常见的有 MD5、SHA1、SHA256，该类函数特点是函数单向不可逆、对输入非常敏感、输出长度固定，针对数据的任何修改都会改变散列函数的结果，用于防止信息篡改并验证数据的完整性
  • 在信息传输过程中，散列函数不能单独实现信息防篡改，因为明文传输，中间人可以修改信息之后重新计算信息摘要，因此需要对传输的信息以及信息摘要进行加密

密钥协商

身份验证

由于非对称加密无法确保服务器身份的合法性，存在中间人攻击的风险，例如：

  1. 客户端 C 和服务器 S 进行通信，中间节点 M 截获了二者的通信
  2. 节点 M 自己计算产生一对公钥pub_M和私钥 pri_M
  3. C 向 S 请求公钥时，M 把自己的公钥pub_M发给了 C
  4. C 使用公钥pub_M加密的数据能够被M解密，因为M掌握对应的私钥pri_M，而C无法根据公钥信息判断服务器的身份，从而 C 和 M 之间建立了“可信”加密连接
  5. 中间节点 M 和服务器S之间再建立合法的连接，因此 C 和 S 之间通信被M完全掌握，M 可以进行信息的窃听、篡改等操作。
  • 服务方 Server 向第三方机构CA提交公钥、组织信息、个人信息(域名)等信息并申请认证;
  • CA通过线上、线下等多种手段验证申请者提供信息的真实性，如组织是否存在、企业是否合法，是否拥有域名的所有权等;
  • 如信息审核通过，CA会向申请者签发认证文件-证书。证书包含以下信息：申请者公钥、申请者的组织信息和个人信息、签发机构CA的信息、有效时间、证书序列号等信息的明文，同时包含一个签名; 签名的产生算法：首先，使用散列函数计算公开的明文信息的信息摘要，然后，采用CA的私钥对信息摘要进行加密，密文即签名;
  • 客户端 Client 向服务器 Server 发出请求时，Server 返回证书文件;
  • 客户端 Client 读取证书中的相关的明文信息，采用相同的散列函数计算得到信息摘要，然后，利用对应 CA的公钥解密签名数据，对比证书的信息摘要，如果一致，则可以确认证书的合法性，即公钥合法;
  • 客户端还会验证证书相关的域名信息、有效时间等信息;客户端会内置信任CA的证书信息(包含公钥)，如果CA不被信任，则找不到对应 CA的证书，证书也会被判定非法。
  • 客户端的证书从生产出来之后就内置在主机中

搭建一个HTTPS服务器

搭建一个HTTPS服务器

结语

前端必须懂的计算机网络知识系列已经全部结束，欢迎大家研究讨论！

前端必须懂的计算机网络知识—(XSS、CSRF和HTTPS)相关推荐

  1. 前端必须懂的计算机网络知识—(跨域、代理、本地存储)

    前端必须懂的计算机网络知识系列文章: DNS服务器和跨域问题 计算机网络的分层模型 IP地址和MAC地址 前端必须懂的计算机网络知识-(跨域.代理.本地存储) 前端必须懂的计算机网络知识-(TCP) ...

  2. 前端必须懂的计算机网络知识—(跨域、代理、本地存储)（掘金）

    1.同源策略与跨域:浏览器只对网络请求有同源限制,同源就是协议.域名和端口号一致,不同源的客户端脚本在没有明确授权的情况下,不能读写对方XHR资源,反之不同源脚本读取对方XHR资源就是跨域. 转载于: ...

  3. 前端需要了解的计算机网络知识， 这一篇就够了！(图文并茂，万字长文！)

    作者:lio-mengxiang 原文链接:https://juejin.im/post/5e51febde51d4526c932b390 本文主要目的也是为了非科班前端补充计算机科班基础知识,比如你 ...

  4. 前端需要了解的计算机网络知识， 这一篇就够了！

    上一篇讲了非科班前端需要掌握的.基本的计算机组成原理. 这篇开撸计算机网络. 本文主要目的也是为了非科班前端补充计算机科班基础知识,比如你要做node开发,不熟悉数据如何在网络中传输的话,理解很多AP ...

  5. 前端需要知道的计算机网络知识

    1 Web 机制 无论通过有线方式 (通常是网线) 还是无线方式(比如 wifi 或蓝牙),通信需要进行连接,网络上的每台计算机需要链接到路由器(router). 路由器确保从一台计算机上发出的一条信 ...

  6. 【前端教程】前端要懂的色域知识

    rgb(255, 0, 0)真的是红色吗 现在有个 CSS 色值:rgb(255, 0, 0),请问一下各位,在网页上展示的是什么颜色? 各位可能不用思考就马上能够脱口而出:红色! But,各位有没有 ...

  7. 前端安全系列：如何防止XSS攻击？

    前端安全 随着互联网的高速发展,信息安全问题已经成为企业最为关注的焦点之一,而前端又是引发企业安全问题的高危据点.在移动互联网时代,前端人员除了传统的 XSS.CSRF 等安全问题之外,又时常遭遇网络 ...

  8. 一图看懂新一代人工智能知识体系大全

    来源:财经头条 摘要:人工智能的发展离不开基础支持层和技术层,基础支持层包括大数据.计算力和算法:技术层包括计算机视觉.语音识别和自然语言处理.人工智能的技术本质是什么,本文会详细分析. 人工智能的发 ...

  9. 学习web前端要了解的HTML5知识有哪些?

    今天要跟大家分享的文章是关于学习web前端要了解的HTML5知识有哪些?随着智能手机.平板电脑等移动终端设备越来越普及,用户在移动端花的时间也越来越长.H5开始火热起来,以文字.图片.动画.声音等相结 ...

最新文章

  1. python 基础 9.0 安装MySQL-python-1.2.5客户端
  2. 【NOI2016】优秀的拆分（后缀数组）
  3. 更改IE浏览器默认的源文件编辑器
  4. An easy problem（hdu2055）
  5. 程序员的选房神技，GitHub上的房源爬虫
  6. (1) redis windows安装
  7. TextView跑马灯效果
  8. Android系统 (190)---Android：JSON 简介 amp; 解析方式 讲解（Gson、AS自带org.json、Jackson）
  9. 链接选项-rpath的一个问题记录
  10. Java的IO操作（五） - PrintStream类、字符流、Reader和Writer、带缓冲的字符流BufferedReader和BufferedWriter...
  11. SQL挂起，需要重新启动计算机?
  12. 爬虫课第一次报错总结
  13. xbox手柄接收器驱动_Xbox精英手柄，对这款游戏手柄使用感受
  14. 应届生面试反问环节该问什么，提高面试官好感
  15. 计算机屏幕方向变化,知识：如何切换笔记本电脑屏幕的方向_计算机的基本知识_IT /计算机_信息...
  16. 用计算机制作课程表,怎么用word做表格-Word制作课程表的方法，学习必备表格，简单易学...
  17. css模糊遮罩效果_如何实现遮罩模糊样式？
  18. Android Q 上的Biometric生物识别之Face人脸识别流程
  19. 【Android Compose】实现宜家 双联列表
  20. 智慧CAD手机看图隐私政策

热门文章

  1. 剑指offer (03)：数组中重复的数字 (C++ Python 实现)
  2. 第四：RobotFramework+Allure2生成精美测试报告
  3. python接口自动化（十）--post请求四种传送正文方式（详解）
  4. pytorch初入门学习记录
  5. Spring Boot+JPA 查询数据方式与代码演示
  6. js 实现ReplaceAll 的方法
  7. 学习python时间安排_Python时间和日期学习
  8. echo 多行_分享laravel-echo-server广播服务搭建-Laravel
  9. 项目部署到服务器需要做什么,项目部署到服务器。
  10. java中流关闭如何打开_关于java中流关闭的问题