【面筋烧烤手册】HTTP数据传输专题

网络数据传输专题

1、Ajax请求五个步骤

由js脚本发起HTTP请求，根据返回的数据，获取相应部分，并不用刷新页面

  • 例如：进行一次head请求

  • 创建多适配对象

  • 声明回调函数建立连接（配置请求方式）

  • 发送连接

  • 配置回调函数

    • 判断异步状态4
    • 判断交互状态200 304
    • 解析数据转成字符串
      • 是json类型对象Json.parse(res) 或 res.parseJson()
      • 不是json类型对象obj.toJsonString(); Json.stringify(obj)
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

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层连接建立成功

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/SiriusZHT/p/14365040.html