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

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

HTTP为何不安全

可能被窃听：

HTTP 自己不具有加密的功能,HTTP 报文使用明文方式发送
因为互联网是由联通世界各个地方的网络设施组成,全部发送和接收通过某些设备的数据均可能被截获或窥视。(例如你们都熟悉的抓包工具:Wireshark),即便通过加密处理,也会被窥视是通讯内容,只是可能很难或者没法破解出报文的信息而已

认证问题

没法确认你发送到的服务器就是真正的目标服务器(可能服务器是假装的)
没法肯定返回的客户端是不是按照真实意图接收的客户端(多是假装的客户端)
没法肯定正在通讯的对方是否具有访问权限,Web服务器上某些重要的信息，只想发给特定用户即便是无心义的请求也会照单全收。没法阻止海量请求下的 DoS 攻击（Denial of Service，拒绝服务攻击）。

可能被篡改

请求或响应在传输途中，遭攻击者拦截并篡改内容的攻击被称为中间人攻击（Man-in-the-Middle attack，MITM）。

XSS攻击

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

反射型XSS（非持久型XSS）

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

浏览器发生请求时，XSS代码出如今请求URL中，做为参数提交到服务器，
服务器解析并响应，响应结果中包含XSS代码，
最后浏览器解析并执行。

案例：表单提交html

//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).test
                        var 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代码发送给服务器，而后经过服务器散播node

黑客将XSS代码发送到服务器（无论是数据库、内存仍是文件系统等。）
其余人请求页面的时候就会带上XSS代码了。

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

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

DOM型XSS

特色：DOM XSS代码不须要服务器端的解析响应的直接参与，而是彻底经过浏览器端的DOM解析。web

浏览器的代码中含有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），中文名称：跨站请求伪造，攻击者盗用了你的身份，以你的名义发送恶意请求。数据库

特色：

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

案例：express

//钓鱼网站，利用用户的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的危害

篡改目标网站上的用户数据；
盗取用户隐私数据；
做为其余攻击向量的辅助攻击手法；
传播CSRF蠕虫。

CSRF的防护

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

Token和JWT

Token的特色

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

JWT

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

header：头部为base64字符串
payload：载荷为base64字符串
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('.');
    }
    //转换为base64
    toBase64(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.cn/post/6844903686775242760
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对1(前提示密钥不泄露)
算法公开、计算量小、加密速度快、加密效率高
客户端、服务器双方都须要维护大量的密钥，维护成本很高
因每一个客户端、服务器的安全级别不一样，密钥容易泄露，交易双方都使用一样钥匙，安全性得不到保证

非对称加密

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

完整性验证算法

常见的有 MD五、SHA一、SHA256，该类函数特色是函数单向不可逆、对输入很是敏感、输出长度固定，针对数据的任何修改都会改变散列函数的结果，用于防止信息篡改并验证数据的完整性
在信息传输过程当中，散列函数不能单独实现信息防篡改，由于明文传输，中间人能够修改信息以后从新计算信息摘要，所以须要对传输的信息以及信息摘要进行加密

密钥协商

身份验证

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

客户端 C 和服务器 S 进行通讯，中间节点 M 截获了两者的通讯
节点 M 本身计算产生一对公钥pub_M和私钥 pri_M
C 向 S 请求公钥时，M 把本身的公钥pub_M发给了 C
C 使用公钥pub_M加密的数据可以被M解密，由于M掌握对应的私钥pri_M，而C没法根据公钥信息判断服务器的身份，从而 C 和 M 之间创建了“可信”加密链接
中间节点 M 和服务器S之间再创建合法的链接，所以 C 和 S 之间通讯被M彻底掌握，M 能够进行信息的窃听、篡改等操做。

服务方 Server 向第三方机构CA提交公钥、组织信息、我的信息(域名)等信息并申请认证;
CA经过线上、线下等多种手段验证申请者提供信息的真实性，如组织是否存在、企业是否合法，是否拥有域名的全部权等;
如信息审核经过，CA会向申请者签发认证文件-证书。证书包含如下信息：申请者公钥、申请者的组织信息和我的信息、签发机构CA的信息、有效时间、证书序列号等信息的明文，同时包含一个签名; 签名的产生算法：首先，使用散列函数计算公开的明文信息的信息摘要，而后，采用CA的私钥对信息摘要进行加密，密文即签名;
客户端 Client 向服务器 Server 发出请求时，Server 返回证书文件;
客户端 Client 读取证书中的相关的明文信息，采用相同的散列函数计算获得信息摘要，而后，利用对应 CA的公钥解密签名数据，对比证书的信息摘要，若是一致，则能够确认证书的合法性，即公钥合法;
客户端还会验证证书相关的域名信息、有效时间等信息;客户端会内置信任CA的证书信息(包含公钥)，若是CA不被信任，则找不到对应 CA的证书，证书也会被断定非法。
客户端的证书从生产出来以后就内置在主机中

搭建一个HTTPS服务器

结语

前端必须懂的计算机网络知识系列已经所有结束，欢迎你们研究讨论！