网络数据传输专题
1、Ajax请求五个步骤
由js脚本发起HTTP请求，根据返回的数据，获取相应部分，并不用刷新页面
-
例如：进行一次head请求
-
创建多适配对象
-
声明回调函数建立连接（配置请求方式）
-
发送连接
-
配置回调函数
- 判断异步状态4
- 判断交互状态200 304
- 解析数据转成字符串
- 是json类型对象
Json.parse(res) 或 res.parseJson() - 不是json类型对象
obj.toJsonString(); Json.stringify(obj)
- 是json类型对象
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for Firefox, Mozilla, IE7, etc.
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders();
}
else
{
alert("Problem retrieving data:" + xmlhttp.statusText);
}
}
}
- 例如：在用户输入文本时建立服务器通信
<html>
<head>
<script type="text/javascript">
var xmlHttp=null;
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
try
{// Firefox, Opera 8.0+, Safari, IE7
xmlHttp=new XMLHttpRequest();
}
catch(e)
{// Old IE
try
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
}
var url="/ajax/gethint.asp?q=" + str;
url=url+"&sid="+Math.random();
xmlHttp.open("GET",url,false);
xmlHttp.send(null);
document.getElementById("txtHint").innerHTML=xmlHttp.responseText;
}
</script>
</head>
<body><form>
First Name:
<input type="text" id="txt1"
onkeyup="showHint(this.value)">
</form><p>Suggestions: <span id="txtHint"></span></p> </body>
</html>
2、Promise封装ajax
/**
* 封装一个函数 sendAJAX 发送 GET AJAX 请求
* 参数 URL
* 返回结果 Promise 对象
*/
function sendAJAX(url){
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.responseType = 'json';
xhr.open("GET", url);
xhr.send();
//处理结果
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
//判断成功
if(xhr.status >= 200 && xhr.status < 300){
//成功的结果
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
});
}
sendAJAX('https://api.apiopen.top/getJok')
.then(value => {
console.log(value);
}, reason => {
console.warn(reason);
});
3、Axios
import axios from 'axios'
//或者const axios = require('axios')
const instance = axios.create({
// url 是用于请求的服务器 URL
url: '/user'
// method 是创建请求时使用的方法
method: 'get', // default
// baseURL 将自动加在 url 前面，除非 url 是一个绝对 URL
// 它可以通过设置一个 baseURL 便于为 axios 实例的方法传递相对 URL
baseURL: 'https://some-domain.com/api/',
// transformRequest 允许在向服务器发送前，修改请求数据
// 只能用在 PUT、POST 和 PATCH 这几个请求方法
// 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream
transformRequest: [function (data, headers) {
// 对 data 进行任意转换处理
return data;
}],
// transformResponse 在传递给 then/catch 前，允许修改响应数据
transformResponse: [function (data) {
// 对 data 进行任意转换处理
return data;
}],
// headers 是即将被发送的自定义请求头
headers: {'X-Requested-With': 'XMLHttpRequest'},
// params 是即将与请求一起发送的 URL 参数
// 必须是一个无格式对象 (plain object) 或 URLSearchParams 对象
params: {
ID: 12345
},
// paramsSerializer 是一个负责 params 序列化的函数
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return QS.stringify(params, {arrayFormat: 'brackets'})
},
// data 是作为请求主体被发送的数据
// 只适用于这些请求方法 PUT、POST 和 PATCH
// 在没有设置 transformRequest 时，必须是以下类型之一：
// - string，plain object，ArrayBuffer，ArrayBufferView，URLSearchParams
// - 浏览器专属：FormData，File，Blob
// - Node专属：Stream
data: {
firstName: 'Fred'
},
// timeout 指定请求超时的毫秒数(0 表示无超时时间)
// 如果请求花费了超过 timeout 的时间，请求将被中断
timeout: 1000,
// withCredentials 表示跨域请求时是否需要使用凭证
withCredentials: false, // default
// adapter 允许自定义处理请求，以使测试更轻松
// 返回一个 promise 并应用一个有效的响应(查阅 [response docs](#response-api))
adapter: function (config) {
/* ... */
},
// auth 表示应该使用 HTTP 基础验证，并提供凭据
// 这将设置一个 Authorization 头，覆写掉现有的任意使用 headers 设置的自定义 Authorization 头
auth: {
username: 'janedoe',
password: 's00pers3cret'
},
// responseType 表示服务器响应的数据类型，可以是 arraybuffer、blob、document、json、text、stream
responseType: 'json', // default
// responseEncoding 表示对响应的编码
// Note：对于 responseType 为 stream 或 客户端请求会忽略
responseEncoding: 'utf-8',
// xsrfCookieName 是用作 xsrf token 值的 cookie 名称
xsrfCookieName: 'XSRF-TOKEN', // default
// xsrfHeaderName 是 xsrf token 值的 http 头名称
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// onUploadProgress 允许为上传处理进度事件
onUploadProgress: function (progressEvent) {
// ... ...
},
// onDownloadProgress 允许为下载处理进度事件
onDownloadProgress: function (progressEvent) {
// ... ...
},
// maxContentLength 定义允许的响应内容的最大尺寸
maxContentLength: 2000,
// validateStatus 定义对于给定的 HTTP 响应状态码是 resolve 或 reject promise。
// 如果 validateStatus 返回 true (或者设置为 null 或 undefined)，promise 将被 resolve，否则 promise 将被 reject
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// maxRedirects 定义在 node.js 中 follow 的最大重定向数目
// 如果设置为 0，将不会 follow 任何重定向
maxRedirects: 5,
// socketPath 用于在 node.js 中定义 UNIX Socket
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// 只能指定 socketPath 或 proxy，如果两者同时指定，将使用 socketPath
socketPath: null,
// httpAgent 和 httpsAgent 分别在 node.js 中用于定义在执行 http 和 https 时使用的自定义代理。
// 允许像这样配置选项。keepAlive 默认没有启用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// proxy 定义代理服务器的主体名称和端口
// auth 表示 HTTP 基础验证应当用于连接代理，并提供凭据
// 这将会设置一个 Proxy-Authorization 头，覆写掉已有的通过使用 header 设置的自定义 Proxy-Authorization 头
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: 'mikeymike',
password: 'rapunz31'
}
},
// cancelToken 指定用于取消请求的 cancel token
cancelToken: new CancelToken(function (cancel) {
// ... ...
})
})
.then(function (response) {
console.log(response.data);
console.log(response.status);
console.log(response.statusText);
console.log(response.headers);
console.log(response.config);
})
/*{
// data 由服务器提供的响应
data: {},
// status 来自服务器响应的 HTTP 状态码
status: 200,
// statusText 来自服务器响应的 HTTP 状态信息
statusText: 'OK',
// headers 服务器响应的头
headers: {},
// config 是为请求提供的配置信息
config: {},
// request 是生成当前响应的请求
// 在 node.js 中是最后一个 ClientRequest 实例 (在重定向中)
// 在浏览器中是 XMLHttpRequest 实例
request: {}
}*/
4、跨域
5、安全防攻击
什么是xss？什么是csrf？⭐⭐⭐⭐⭐
- xss脚本注入
不需要你做任何的登录认证，它会通过合法的操作（比如在url中输入、在评论框中输入），向你的页面注入脚本（可能是js、hmtl代码块等）。- 防御
编码：对用户输入的数据进行HTML Entity 编码。把字符转换成 转义字符。Encode的作用是将$ var等一些字符进行转化，使得浏览器在最终输出结果上是一样的。
过滤：移除用户输入的和事件相关的属性。
- 防御
- csrf跨域请求伪造
在未退出A网站的前提下访问B，B使用A的cookie去访问服务器- 防御：token，每次用户提交表单时需要带上token（伪造者访问不到），如果token不合法，则服务器拒绝请求
OWASP top10 （10项最严重的Web应用程序安全风险列表）都有哪些?⭐⭐⭐
-
SQL注入
-
在输入框里输入sql命令
-
失效的身份验证
-
拿到别人的cookie来向服务端发起请求，就可以做到登陆的目的
-
敏感数据泄露
-
明文传输状态下可能被抓包拦截，这时候就造成数据泄露
想做到抓包，比如在网吧，共享一个猫上网，这时候抓包就可行，方法网上一搜一大把
不过此风险大部分网站都能得到很好的解决，https或者md5加密都可以 -
XML 外部实体
-
失效的访问控制
-
安全配置错误
-
XSS
-
不安全的反序列化
-
使用含有已知漏洞的组件
-
不足的日志记录和监控
6、https
https和http有什么区别，https的实现原理？⭐⭐⭐⭐⭐
http无状态无连接，而且是明文传输，不安全
https传输内容加密，身份验证，保证数据完整性
https实现原理⭐⭐⭐⭐⭐
首先客户端向服务端发起一个随机值，以及一个加密算法
服务端收到后返回一个协商好的加密算法，以及另一个随机值
服务端在发送一个公钥CA
客户端收到以后先验证CA是否有效，如果无效则报错弹窗，有过有效则进行下一步操作
客户端使用之前的两个随机值和一个预主密钥组成一个会话密钥，在通过服务端传来的公钥加密把会话密钥发送给服务端
服务端收到后使用私钥解密，得到两个随机值和预主密钥，然后组装成会话密钥
客户端在向服务端发起一条信息，这条信息使用会话秘钥加密，用来验证服务端时候能收到加密的信息
服务端收到信息后返回一个会话秘钥加密的信息
都收到以后SSL层连接建立成功