当前页需要的资源，从而提高这些资源的请求优先级crossorigin,否则会出现加载两次的问题<link rel="preload" href="/path/to/style.css" as="style">
<link rel="preconnect" href="//test.com">
<link rel="preconnect" href="//cdn.test.com" crossorigin>
其他页面（非本页面）可能使用到的资源，那么浏览器会在空闲时，就去预先加载这些资源放在http缓存内，还会解执行页面，进行预渲染,最常见的dns-prefetch<link rel="dns-prefetch" href="//test.com">
<link rel="prerender" href="//example.com/next-page.html">
超详细讲解open in new window、参考2open in new window、参考3open in new window、参考4open in new window
三次的目的：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误，所以服务器需要确认客户端是否收到了第二次握手；防止服务器等待造成资源浪费四次的目的是：服务队没收到关闭请求可能还有需要处理的没法立马关闭，所以只能先发送ack报文进行确定，等处理完了再发送FIN进行关闭解析请求，由于CDN 对域名解析过程进行了调整，所以用户端一般得到的是该域名对应的 CNAME 记录，此时浏览器需要再次对获得的 CNAME 域名进行解析才能得到缓存服务器实际的IP 地址。 注：在此过程中，全局负载均衡DNS 解析服务器会根据用户端的源IP 地址，如地理位置(北京还是上海)、接入网类型(电信还是网通)将用户的访问请求定位到离用户路由最短、位置最近、负载最轻的Cache 节点(缓存服务器)上，实现就近定位。定位优先原则可按位置、可按路由、也可按负载等。该域名CDN 缓存服务器的实际IP 地址，向缓存服务器发出访问请求;域名源服务器的真实IP 地址，再由缓存服务器向此真实IP 地址提交访问请求;在本地进行保存，以备以后使用，同时把得到的数据发送到客户端浏览器，完成访问的响应过程;浏览器中缓存可分为强缓存和协商缓存,第一次浏览器请求资源时会，将资源连同response header一起缓存下来，再次去请求资源时，首先从缓存中拿出资源的response header，判断是否命中强缓存，如果命中则直接从缓存中读取资源，不会发送请求到服务器，如果没有命中，则发送请求到服务器判断是否命中协商缓存,如果命中则将请求返回，但是不会返回这个资源的数据，而是告诉浏览器从缓存中加载资源;区别： 强缓存不会发送请求到服务器。
Expires或者Cache-Control这两个http response header实现 服务器时间与客户端时间相差较大时，缓存管理容易出现问题public(允许所有服务器缓存该资源)或 private(禁止中间服务器如代理服务器缓存资源) 标记Cache-Control优先级高于ExpiresLast-Modified，If-Modified-Since和ETag、If-None-Match这两对Header来管理的,命中协商缓存是返回状态码304 Not ModifiedHTTP:超文本传输协议；是网络协议一个标准；特性：无状态，默认端口是80
完成即断开，重新慢启动和 TCP 3次握手线头阻塞，导致请求之间互相影响长连接(默认 keep-alive)，复用断点续传、身份认证、状态管理、cache 缓存串行文本传输和最多连接数限制有问题；随机数random1以及支持的加密方式网站信息(企业、网站等各种信息和公钥)+一串生成的随机数加密后，通过第三方机构的私钥再次加密，生成数字签名第三方机构的公钥进行解密(本地已内置)并验证；然后得到服务器的公钥，随后客户端生成新的随机数(random3)，利用解密的公钥加密后传输给服务器第三个随机数对话密钥 用来加密接下来的对话内容 参考1open in new window、参考2open in new window简单来说，https是http的安全版，是在http基础上加上了SSL加密层（由SSL和TCP进行通信），并对传输数据进行加密；是非对称加密与对称加密双剑合璧，使用非对称加密算法传递用于对称加密算法的密钥，然后使用对称加密算法进行信息传递
WebSocket是基于HTTP1.1的协议，可以简单理解为创建了一条TCP连接;而HTTP2.0则是对HTML、CSS等JS资源的传输方式进行了优化
TCP:是面向连接的协议，也就是说，在收发数据前，必须和对方建立可靠的连接。 一个TCP连接必须要经过三次“对话”才能建立起来
UDP:是一个非连接的协议，传输数据之前源端和终端不建立连接， 当它想传送时就简单地去抓取来自应用程序的数据，并尽可能快地把它扔到网络上。 在发送端，UDP传送数据的速度仅仅是受应用程序生成数据的速度、 计算机的能力和传输带宽的限制； 在接收端，UDP把每个消息段放在队列中，应用程序每次从队列中读一个消息段
1、基于连接与无连接；
2、对系统资源的要求（TCP较多，UDP少）；
3、UDP程序结构较简单；
4、流模式与数据报模式 ；
5、TCP保证数据正确性，UDP可能丢包(基于 UDP 的 QUIC 协议 可以实现类似 TCP 的可靠性传输)；
6、TCP保证数据顺序，UDP不保证。
应用场景: TCP适用于文本传输,收发邮件等 UDP适用于即时通信、在线视频、网络电话等,也适用于服务系统内部数据传输,因为内部数据交互丢包率低,及时丢包最多也就是操作无效
XSS：跨站脚本攻击，是一种代码注入攻击，攻击者通过在目标网站上注入恶意脚本，使之在用户浏览器上运行；根据攻击来源，分为存储型,反射型,DOM型
存储型是将恶意代码提交到目标网站的数据库中，例如：发帖、评论、私信等；这种方式更隐蔽，因为不需要用户手动触发反射型是通过构造特殊的URL,并将其拼接到html中,其中包含恶意代码，如网站搜索、跳转等；因为需要用户打开URL才有效，所以一半都用多种手段诱导用户点击DOM型同样是通过特殊URL,前端通过JavaScript取出恶意代码并执行，恶意代码会获取用户数据并发送到指定网站或冒充用户行为DOM型是取出恶意代码并交由浏览器完成，属于前端JavaScript的安全漏洞，其它两种属于服务器端漏洞 通用XSS攻击防御： CSRF跨站点请求伪造，是攻击者盗用了用户的身份，以用户的名义发送恶意请求是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法；如诱导用户进入第三方网站并在第三方网站向用户发送跨站请求；利用用户的注册凭证，绕过后台用户验证;
<img src="http://bank.example/withdraw?amount=10000&for=hacker" > 和JSONP， // 方法一
<form method="POST" action="/upload?_csrf={{由服务端生成}}" enctype="multipart/form-data">
用户名: <input name="name" />
选择头像: <input name="file" type="file" />
<button type="submit">提交</button>
</form>
// 方法二 axios也是这么防御的
let csrfToken = Cookies.get('csrfToken');
function csrfSafeMethod(method) {
// 以下HTTP方法不需要进行CSRF防护
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
beforeSend: function(xhr, settings) {
if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
xhr.setRequestHeader('x-csrf-token', csrfToken);
}
},
});
界面操作劫持攻击 通过在页面可见控件上覆盖一个不可见的框(iframe)，使得用户误以为自己在操作正确的页面，从而在用户不知情的情况下篡改数据、窃取信息等。
参考1open in new window、参考2open in new window
MITM攻击就是通过拦截正常的网络通信数据，并进行数据篡改和嗅探来达到攻击的目的，而通信的双方却毫不知情。
防御：
options是浏览器基于跨域安全的考虑发起的预检请求;浏览器将CORS请求分为两类：简单请求（simple request）和非简单请求（not-simple-request）;而只有在非简单请求的情况下才会发起预检；非简单请求的条件：
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。