网站开发中 敬请期待,手机app制作流程,建设部质监局网站,apache 配置网站「面试专栏」前端面试之浏览器原理篇#x1f3d4;️序言#x1f304;一、http和https协议#xff08;一#xff09;http和https之间的关系#x1f9ed;1、http和https是什么#xff1f;2、http和https的区别#xff08;二#xff09;http协议#x1f9ed;1、http1.0、… 「面试专栏」前端面试之浏览器原理篇️序言一、http和https协议一http和https之间的关系1、http和https是什么2、http和https的区别二http协议1、http1.0、http1.1、http2.0协议的基本内容1http1.02http1.13http2.02、http1.0、http1.1、http2.0协议之间的区别1http1.0和http1.1主要区别2http1.1和http2.0主要区别3、http2.01http2.0项目设定目标2http2.0特性4、说下http缓存吧浏览器缓存1什么是缓存又有什么用2你知道有哪些缓存方式吗3缓存位置4http的缓存是怎么生效的5、http常见的头部字段1General通用首部2Response响应首部3Request请求首部4Cookie6、http状态码7、http的请求方式场景1http请求方式2GET和HEAD的区别3GET和POST的区别4为什么跨域的复杂请求需要预检8、http请求过程1问题集锦2问题解答3补充9、http的渲染步骤三https协议1、https的优缺点1优点2缺点2、https的访问过程问题集锦简略解释详细解释3、https为什么是安全的4、https如何进行性能优化1https访问速度优化2https计算性能优化️二、浏览器存储1、浏览器存储的方式2、cookie、localStorage和sessionStorage1cookie、localStorage和sessionStorage是什么2cookie、localStorage和sessionStorage的异同点3、cookie的用途1保存用户登录状态2跟踪用户行为4、session和token1Session2Token️三、跨域1、什么是同源策略2、为什么浏览器会有同源策略3、同源策略限制内容有哪些4、跨域问题解决方案1通过jsonp跨域2通过修改document.damain来进行跨域主域相同3使用window.name来进行跨域4使用HTML5新引进的window.postMessage方法5cors6动态创建script7利用location.hash 跨域8websocket9nginx的反向代理⛺四、前端安全1、跨站脚本攻击XSS1XSS是什么2XSS的攻击类型3如何防御XSS2、跨站请求伪造csrf1什么是csrf2csrf攻击流程3CSRF的特点4CSRF攻击场景5CSRF常见的攻击类型6如何防御csrf7CSRF与 XSS 区别️五、其他问题1、Chrome浏览器用过哪些调试工具2、浏览器内核的理解六、结束语彩蛋 One More Thing️pdf内容获取️更新地址️番外篇️序言
大家都知道浏览器原理对于前端面试来说是一个久经不衰的话题。因为浏览器所设计到的内容真的是非常非常的广。小到一个简单的 http 知识大到跨域问题前端安全问题等等都涉及到前端安全相关。所以自然而然地也是面试中一个非常重要地考点之一。
在下面的这篇文章中将讲解关于我在准备面试过程中遇到的所有浏览器相关的问题并将进行系统的归纳和总结。一起来开启你的 http 学习旅途⑧~
一、http和https协议
一http和https之间的关系
1、http和https是什么
HTTP(HyperText Transfer Protocol)超文本传输协议
HTTPS(Hypertext Transfer Protocol Secure)超文本传输安全协议
2、http和https的区别
httphttps名称超文本传输协议超文本传输安全协议默认端口80443发送方式明文发送加密传输安全性安全性相对差容易被监听、被伪装、被篡改安全性相对较好防止监听、防止伪装、防止篡改响应速度响应快3个包响应慢12个包tcp 3个 ssl 9个成本较低成本较高证书需要购买链接缓存相对高效相对不高会增加数据开销和功耗
口语化答题
http 是超文本传输协议是互联网上应用最为广泛的一种网络协议是一个 客户端 和 服务器端 请求和应答的标准用于从 WWW 服务器传输超文本到本地浏览器的传输协议它可以使浏览器更加高效使网络传输减少。 而对于https它是以安全为目标的http通道是http的安全版在http中加入了ssl层https的安全基础是ssl。这一段解答http和https是什么
http 的连接很简单是无状态的传输的数据都是没有加密的也就是明文的网景公司设置了 ssl 协议来对 http 协议传输的数据进行加密处理所以说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议比http协议的安全性更高。解答明文和加密发送的内容
http 是超文本传输协议信息是明文传输https协议需要证书且费用较高是具有安全性的ssl加密传输协议使用不同的连接方式端口不同一般来说http协议的端口是80而https的端口为443。解答端口号问题
使用 https 协议可以认证用户和服务器确保数据发送到正确的客户端和服务器端。对于 https 协议的工作原理客户端在使用 https 方式与 web 服务器通信时首先客户使用https 的 url 访问服务器则要求 web 服务器建立 ssl 连接 web 服务器接收到客户端的请求之后会将网站的证书返回或者传输给客户端然后客户端和 web 服务器端开始协商 ssl 连接的安全等级也就是加密等级通过双方协商一致的安全等级建立会话密钥然后通过网站的公钥来加密会话密钥并传送给网站。web服务器通过自己的私钥解密出会话密钥通过会话密钥加密与客户端之间的通信 解答 https 的连接方式
建议使用 https 比起同等 http 网站使用 https 加密的网站在搜索结果中的排名会更高哦
https 协议握手阶段比较费时会使页面加载时间延长 50% 增加 10%~20% 的耗电 https 缓存也不如 http 高效会增加数据开销 ssl 证书也是需要钱的功能越强大证书费用越高同时 ssl 证书是需要绑定 ip 的不能在同一个 ip 上绑定多个域名。解答 https 的缺点
小 Tips
www即 World Wide Web 是万维网的简称。为什么是 80 端口80是 http 协议的默认端口是在输入网站的时候其实浏览器 非 IE 已经帮你输入协议了所以你输入 baudu.com 其实是访问了 baidu.com:80 。
二http协议
1、http1.0、http1.1、http2.0协议的基本内容
1http1.0
引入时间 http1.0 是1996年引入的。
主要内容
http1.0 仅提供了最基本的认证用户名和密码都未加密http1.0 仅支持短连接每次发送数据都会经过 TCP 三次握手和四次挥手效率低http1.0 只使用了header的 ifmodified-Since 和 Expires 作为缓存失效的标准http1.0 不支持端点续传每次发送数据都会发送全部数据http1.0 认为每台计算机都只能绑定一个IP地址不支持虚拟网络。
2http1.1
引入时间http1.1是1999年引入的。
主要内容 http1.1 使用了摘要算法 (MD5/SHA-1) 进行身份验证 http1.1 默认使用长连接即只需要建立一次连接可以传输多次数据传输完成之后只需要一次切断即可。通过请求头的 keep-alive 设置 ( connection: keep-alive/close ) http1.1 支持断点续传通过请求头的 Range 实现此功能 http1.1 使用了虚拟网络在一台物理服务器上可以存在多个虚拟主机共享同一个 IP 地址。
3http2.0
引入时间2015年建立。
主要内容 头部压缩利用HPACK算法进行压缩 为什么引入头部压缩 由于HTTP1.1头部经常出现Cookie、Accept、Sever、Range等字段可能会占用几百到几千字节而 body 有时只有几十字节“头重身轻”。 二进制格式 HTTP2.0 选择了更靠近TCP/IP的二进制格式抛弃了ASCII码提高了解析效率 强化安全 HTTP2.0 一般都跑在HTTPS上 多路复用一个连接上可以有多个请求。 小tips 记忆点算法、连接、头部、断电续传、虚拟网络 2、http1.0、http1.1、http2.0协议之间的区别
1http1.0和http1.1主要区别
①长连接
http1.0 需要使用keep-alive 参数来告知服务器端要建立一个长连接而 http1.1 默认支持长连接使用长连接的原因在于 http 是基于TCP/IP协议的创建一个 TCP 连接需要经过三次握手有一定的开销如果每次通讯都要重新建立连接的话对性能有影响。因此最好能维持一个长连接可以用一个长连接来发多个请求。
②节约带宽
http1.1 支持只发送header信息不带任何 body 信息如果服务器认为客户端有权限请求服务器则返回100否则返回401 客户端如果接受到 100 才开始把请求 body 发送到服务器这样当服务器返回 401 的时候客户端就可以不用发送请求 body 了节约了带宽 另外 http1.1 还支持只传送内容的一部分这样当客户端已经有一部分的资源后只需要跟服务器请求另外的部分资源即可这是支持文件断点续传的基础。
③HOST域虚拟网络
http1.1 可以在 web server 上例如tomat设置虚拟站点也就是说 web server 上的多个虚拟站点可以共享同一个ip和端口http1.0 是没有host域的 http1.1 才支持这个参数。
2http1.1和http2.0主要区别
①多路复用
在 http1.1 协议中浏览器客户端在同一时间针对同一域名的请求有一定数据限制超过限制数目的请求会被阻塞。http2.0 使用了多路复用的技术做到同一个连接并发处理多个请求而且并发请求的数量比 http1.1 大了好几个数量级。当然 http1.1 也可以多建立几个 TCP 连接来支持处理更多并发的请求但是创建 TCP 连接本身也是有开销的。
②首部压缩
http1.1 不支持 header 数据的压缩 http2.0 使用HPACK算法对 header 的数据进行压缩这样数据体积小了在网络上传输就会更快。
③服务器推送
意思是说当我们对支持 http2.0 的 web server 请求数据的时候服务器会顺便把一些客户端需要的资源一起推送到客户端免得客户端再次创建连接发送请求到服务器端获取。这种方式非常合适加载静态资源。那么服务器端推送的这些资源是存在哪里呢其实是存在客户端的某处地方客户端直接从本地加载这些资源就可以了不用走网络速度自然是快很多的。
3、http2.0
1http2.0项目设定目标 页面加载时间 ( PLT ) 减少 50% 。 无需网站作者修改任何内容。 将部署复杂性降至最低无需变更网络基础设施。 与开源社区合作开发此新协议。 收集真实性能数据验证实验性协议是否有效。
2http2.0特性
①多路复用(请求与响应复用)
在 http1.1 中浏览器客户端在同一时间针对同一域名下的请求有一定数量限制连接数量超过限制会被阻塞。
http2.0 使用了多路复用的技术做到同一个连接并发处理多个请求且多路复用允许同时通过单一的 HTTP/2 连接发送多重的请求-响应信息。
②二进制分帧层
HTTP/2 所有性能增强的核心在于新的二进制分帧层它定义了如何封装 HTTP 消息并在客户端与服务器之间传输。
HTTP2.0 会将所有的传输信息分割为更小的信息或者帧二进制分帧并对他们进行二进制编码。
③标头压缩
每个 HTTP 传输都需要承载一组标头这些标头说明了传输的资源及其属性。
HTTP/2 使用 HPACK 压缩格式来压缩请求和响应标头元数据 HPACK 压缩格式是 支持通过静态霍夫曼代码对传输的标头字段进行编码从而减小了各个传输的大小。 要求客户端和服务器同时维护和更新一个包含之前见过的标头字段的索引列表换句话说它可以建立一个共享的压缩上下文此列表随后会用作参考对之前传输的值进行有效编码。
④服务器推送
HTTP/2 除了对最初请求的响应外服务器还可以向客户端推送额外资源而无需客户端明确地请求很适合加载静态资源。
⑤数流优先级
将 HTTP 消息分解为很多独立的帧之后我们就可以复用多个数据流中的帧客户端和服务器交错发送和传输这些帧的顺序就成为关键的性能决定因素。
为了做到这一点HTTP/2 标准允许每个数据流都有一个关联的权重和依赖关系
可以向每个数据流分配一个介于 1 至 256 之间的整数每个数据流与其他数据流之间可以存在显式依赖关系。
⑥每个来源一个连接
每个数据流都拆分成很多帧而这些帧可以交错还可以分别设定优先级。 因此所有 HTTP/2 连接都是永久的而且仅需要每个来源一个连接随之带来诸多性能优势。
⑦流控制
流控制是一种阻止发送端向接收端发送大量数据的机制以免超出后者的需求或处理能力。
在什么情况下会用到流控制呢一般在发送方可能非常繁忙、处于较高的负载之下也可能仅仅希望为特定数据流分配固定量的资源的情况下。会用到流控制。
4、说下http缓存吧浏览器缓存
1什么是缓存又有什么用
定义缓存是一种保存资源副本并在下次请求时直接使用该副本的技术。
作用
可以显著提高网站和应用程序的性能。减少了等待时间和网络流量。减少了显示资源表示形式所需的时间。使得页面加载更加快速。缓解服务器端压力提升性能。
2你知道有哪些缓存方式吗
浏览器缓存代理缓存网关缓存CDN 缓存反向代理缓存
3缓存位置
1Service Worker
Service Worker 的缓存与浏览器其他内建的缓存机制不同它可以让我们自由控制缓存哪些文件、如何匹配缓存、如何读取缓存并且缓存是持续性的。
2Memory Cache内存中的缓存
读取高效但是持续性很短一旦关闭 Tab 页面内存中的缓存也就被释放了。
3Disk Cache硬盘中的缓存
读取速度慢容量和存储时效性上有优势。
4Push Cache推送缓存
push Cache 是 http/2 中的内容只在会话Session中存在一旦会话结束就被释放并且缓存时间也很短暂。
4http的缓存是怎么生效的
http缓存分为强制缓存和协商缓存。
1强制缓存
强制缓存就是文件直接从缓存中获取不需要发送请求。
2协商缓存
协商缓存意思是文件已经被缓存了但是否从缓存中读取是需要和服务器进行协商具体如何协商要看请求头/响应头的字段设置相比于强制缓存协商缓存是需要发送请求的。
3强缓存相关字段
Cache-Control通用消息头字段被用于在http请求和响应中通过指定指令来实现缓存机制。
强缓存相关字段有 expirescache-control。如果 cache-control 与 expires 同时存在的话 cache-control 的优先级高于 expires。
缓存请求指令
Cache-Control: no-cache 、 no-store 、 max-ageseconds 、 max-stale[seconds] 、 min-freshseconds 、 no-transform 、 only-if-cached
缓存响应指令
Cache-control: public 、 private 、 no-cache 、 no-store 、 no-transform 、 proxy-revalidate 、 max-ageseconds 、 s-maxageseconds 、 must-revalidate
cache-control指令解释
指令说明public所有内容都将被缓存(客户端和代理服务器都可缓存)private内容只缓存到私有缓存中(仅客户端可以缓存代理服务器不可缓存)no-cache必须先与服务器确认返回的响应是否被更改然后才能使用该响应来满足后续对同一个网址的请求。因此如果存在合适的验证令牌 (ETag)no-cache 会发起往返通信来验证缓存的响应如果资源未被更改可以避免下载。no-store所有内容都不会被缓存到缓存或 Internet 临时文件中must-revalidation/proxy-revalidation如果缓存的内容失效请求必须发送到服务器/代理以进行重新验证max-agexxx (xxx is numeric)缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高
4协商缓存相关字段
协商缓存相关字段有 Last-Modified/If-Modified-SinceEtag/If-None-Match 。
5协商缓存生效过程
浏览器第一次请求 浏览器第二次请求 6浏览器缓存——如何选择什么时候用哪一个呢
浏览器缓存分为强缓存和协商缓存。当客户端请求某个资源时获取缓存的流程如下
先根据这个资源的一些 http header 判断它是否命中强缓存如果命中则直接从本地获取缓存资源不会发请求到服务器当强缓存没有命中时客户端会发送请求到服务器服务器通过另一些 request header 验证这个资源是否命中协商缓存称为 http 再验证如果命中服务器将请求返回但不返回资源而是告诉客户端直接从缓存中获取客户端收到返回后就会从缓存中获取资源强缓存和协商缓存共同之处在于如果命中缓存服务器都不会返回资源 区别是强缓存不对服务器发送请求但协商缓存会。当协商缓存也没命中时服务器就会将资源发送回客户端。当 ctrlf5 强制刷新网页时直接从服务器加载跳过强缓存和协商缓存当 f5 刷新网页时跳过强缓存但是会检查协商缓存。 详细文章补充 原文你知道304吗图解强缓存和协商缓存 链接https://juejin.cn/post/6974529351270268958 5、http常见的头部字段
1General通用首部
字段说明Request URL请求的域名Request Method请求方式Status Code返回的状态码Remote Address请求的远程地址
2Response响应首部
字段说明Cache-Control服务器应遵循的缓存机制Connection连接方式keep-alive保持持久连接Content-EncodingWeb服务器表明自己使用了什么压缩方法gzip、deflateContent-LanguageWeb服务器告诉浏览器自己响应的对象的语言Content-LengthWeb服务器告诉浏览器自己响应的对象的长度Content-RangeWeb服务器表明该响应包含的部分对象为整个对象的哪个部分比如Content-Range:bytesContent-TypeWeb服务器告诉浏览器自己响应对象的类型。比如Content-Type:application/xmlETag告知客户端实体标识是一种可将资源以字符串形式做唯一标识的方式值有强弱之分ExpiredWeb服务器表明该实体什么时候过期Last-ModifiedWeb服务器表明该实体最后修改时间Set-Cookie开始状态管理所使用的Cookie信息Location与redirection配合使用重定向
3Request请求首部
字段说明Accept可接受的响应内容类型Content-TypesAccept-Charset可接受的字符集Accept-Encoding浏可接受的响应内容的编码方式Accept-Language浏览器接收支持的语言Accept-Datetime可接受的按照时间来表示的响应内容版本Authorization用于表示 HTTP 协议中需要认证资源的认证信息Cache-Control用来指定当前的请求/回复中的是否使用缓存机制Connection客户端浏览器想要优先使用的连接类型Cookie由之前服务器通过Set-Cookie设置的一个HTTP协议CookieContent-MD5请求体的内容的二进制 MD5 散列值数字签名以 Base64 编码的结果Content-Length以 8 进制表示的请求体的长度Content-Type请求体的 MIME 类型 用于 POST 和 PUT 请求中Referrer来源协议即发送请求页面的urlExpect表示客户端要求服务器做出特定的行为From发起此请求的用户的邮件地址If-Modified-Since允许在对应的资源未被修改的情况下返回 304 未修改If-None-Match条件请求判断实体ETag与资源的ETag是否不一致如果不一致则返回200请求响应和协商缓存如果一致则返回304未修改 304 Not Modified从本地缓存中读取即可。If-Unmodified-Since仅当该实体自某个特定时间以来未被修改的情况下才发送回应Max-Forwards限制该消息可被代理及网关转发的次数Range表示请求某个实体的一部分字节偏移以 0 开始User-Agent浏览器的身份标识字符串Upgrade要求服务器升级到一个高版本协议
4Cookie
1Cookie服务的首部字段
首部字段名说明首部类型Set-Cookie开始状态管理所使用的的Cookie信息响应首部字段Cookie客户端接收到的Cookie信息请求首部字段
Set-Cookie字段的属性
属性说明NAMEVALUE赋予Cookie的名称和其字段值必须项expiresDATECookie的有效期指定浏览器可发送Cookie的有效期若不指定则默认为浏览器关闭前为止pathPATH用于限制指定Cookie发送范围的文件目录若不指定则默认为文档所在目录domain-域名作为Cookie适用对象的域名若不指定则默认为创建Cookie的服务器名Secure仅在HTTPS安全通信时才会发送CookiehttpOnly加以限制使Cookie不能被JavaScript脚本访问
Cookie
告知服务器客户端想获得http状态管理支持时就会在请求中包含从服务器接收到的Cookie。接收多个时同样可以以多个发送。
6、http状态码
状态码描述1XX提示信息2XX成功请求被成功处理3XX重定向相关4XX客户端错误5XX服务器端错误
常见的有200正常 、404无法找到该网页资源 、304跳转页面 、500服务器错误等具体如下
状态码含义用途100Continue 继续客户端应继续其请求101Switching Protocols 切换协议服务器根据客户端的请求切换协议。只能切换到更 高级的协议例如切换到 HTTP 的新版本协议200OK 请求成功一般用于 GET 与 POST 请求201Created 已创建成功请求并创建了新的资源202Accepted 已接受已经接受请求但未处理完成203Non-Authoritative Information 非授权信息请求成功。但返回的 meta 信息不在原始的服务器而是一个副本204No Content 无内容服务器成功处理但未返回内容。在未更新网页的情况下 可确保浏览器继续显示当前文档205Reset Content 重置内容服务器处理成功用户终端例如浏览器应重置文档视图。可通过此返回码清除浏览器的表单域206Partial Content 部分内容服务器成功处理了部分 GET 请求300Multiple Choices 多种选择请求的资源可包括多个位置相应可返回一个资源特征与地址的列表用于用户终端例如浏览器选择301Moved Permanently 永久移动请求的资源已被永久的移动到新 URI返回信息会 包括新的 URL浏览器会自动定向到新 URL。今后任何新的请求都应使用新的 URI 代替302Found 临时移动与 301 类似。但资源只是临时被移动。客户端应继续使用原有 URI304Not Modified 未修改所请求的资源未修改服务器返回此状态码时不会返回任何资源。客户端通常会缓存访问过的资源通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源305Use Proxy 使用代理所请求的资源必须通过代理访问400Bad Request客户端请求的语法错误服务器无法理解401Unauthorized请求要求用户的身份认证402Payment Required保留将来使用403Forbidden服务器理解请求客户端的请求但是拒绝执行此请求404Not Found服务器无法根据客户端的请求找到资源网页。通过此代码网站 设计人员可设置您所请求的资源无法找到的个性页面405Method Not Allowed客户端请求中的方法被禁止503Service Unavailable由于超载或系统维护服务器暂时无法处理客户端的请求。 延时的长度可包含在服务器的 Retry-After 头信息中504Gateway Time-out充当网关或代理的服务器未及时从远端服务器获取请求505HTTP Version not supported服务器不支持请求的 HTTP 协议的版本无法完成处理
7、http的请求方式场景
1http请求方式
get 请求指定的页面信息并返回实体主体post 请求服务器接受所指定的文档作为对所标识的 URL 的新的从属实体head 类似于get请求只不过返回的响应中没有具体的内容用户获取报头options 允许客户端查看服务器的性能比如说服务器支持的请求方式等等PUT 传输文件DELETE 删除文件OPTIONS 询问支持的方法TRACE 追踪路径CONNECT 要求用隧道协议连接代理。
2GET和HEAD的区别
HEAD 方法与 GET 相同除了服务器在响应中不得返回消息正文。响应 HEAD 请求的 HTTP 标头中包含的元信息应该与响应GET请求发送的信息相同。此方法可用于获取有关请求所隐含的实体的元信息而无需转移实体主体本身。此方法通常用于测试超文本链接的有效性、可访问性和最新修改。对 HEAD 请求的响应可以是可缓存的因为响应中包含的信息可以用于从该资源更新先前缓存的实体。如果新的字段值表示缓存的实体与当前实体不同如Content-Length Content-MD5 ETag 或 Last-Modified 的更改所指示则缓存必须将缓存条目视为过期。
3GET和POST的区别
GET 参数通过 url 传递 POST 放在 body 中。http协议规定 url 在请求头中所以大小被限制得很小。GET 请求在 url 中传递的参数是有长度限制的而 POST 没有。原因见上↑↑↑GET 在浏览器回退时是无害的而 POST 会再次提交请求。GET 请求会被浏览器主动 cache 而 POST 不会除非主动设置。GET 比 POST 更不安全因为参数直接暴露在 url 中所以不能用来传递敏感信息。对参数的数据类型 GET 只接受 ASCII 字符而 POST 没有限制。GET 请求只能进行 url(x-wwwform-urlencoded) 编码而 POST 支持多种编码方式。GET 产生一个数据包 POST产生两个 TCP 数据包。对于 GET 方式的请求浏览器会把 http 的 header 和 data 一并发送出去服务器响应 200 返回数据。而对于 POST 浏览器先发送 header 服务器响应 100 continue 浏览器再发送 data 服务器响应 200 OK 返回数据。
4为什么跨域的复杂请求需要预检
复杂请求可能会对服务器产生副作用。例如 delete 和 put 它们都会对服务器数据进行修改所以在请求之前都要先询问服务器当前网页域名是否在服务器的许可名单中服务器允许后浏览器才会发出正式的请求否则不会发送正式请求。
8、http请求过程
1问题集锦
从浏览器地址栏输入url后发生了什么url渲染过程解析url中的参数写代码url输入到页面展示的全过程html解析渲染过程
2问题解答 浏览器对请求的 url 进行 DNS 域名解析找到真实的 IP 地址 根据这个 IP 找到对应的服务器发起 TCP 的三次握手 建立 TCP 连接后发起 HTTP 请求 服务器响应 HTTP 请求浏览器得到 html 代码 浏览器解析 html 代码并请求 html 代码中的资源如 js 、 css 、图片等 注先得到 html 代码才能去找这些资源 浏览器对页面进行渲染呈现给用户 服务器关闭 TCP 连接。
3补充
在了解了 http 请求过程后需引申了解
① DNS 域名如何解析
②TCP 三次握手
③为什么要三次握手
④为什么 HTTP 请求要基于 TCP 来实现
⑤ TCP 四次挥手
⑥为什么要四次挥手
⑦为什么建立连接是三次握手关闭连接是四次挥手
⑧如果已经建立连接但是客户端突然出现故障了怎么办
⑨ http 的请求方式有哪些。
9、http的渲染步骤
http渲染步骤为
①解析HTML文件构建DOM Tree②解析CSS文件构建CSSOM TreeCSS规则树③将DOM Tree和CSSOM Tree合并构建Render Tree渲染树④reflow重排根据Render Tree进行节点信息计算layout⑤repaint重绘根据计算好的信息绘制整个页面Painting。
三https协议
1、https的优缺点
1优点
1发送数据到正确的客户端
使用 HTTPS 协议可认证用户和服务器确保数据发送到正确的客户机和服务器。
2更安全
HTTPS 协议是由 SSLHTTP 协议构建的可进行加密传输、身份认证的网络协议要比 http 协议安全可防止数据在传输过程中不被窃取、改变确保数据的完整性。
3增加中间人攻击的成本
HTTPS是现行架构下最安全的解决方案虽然不是绝对安全但它大幅增加了中间人攻击的成本。
4搜索排名更高
谷歌在2014跳转搜索算法采用 HTTPS 加密的网站在搜索结果中的排名将会更高。
百度也在2018年发布百度对 HTTPS 站点的扶持态度表明 HTTPS 将作为优质特征之一影响搜索排序。
2缺点
1页面渲染更耗时间
因为SSL的缘故HTTPS协议握手阶段比较费时会使页面的加载时间延长近 50% 。
2成本增加
SSL证书需要花钱功能越强大的证书费用越高。
3HTTPS连接缓存不如HTTP高效
HTTPS连接缓存不如 HTTP 高效会增加数据开销和功耗甚至已有的安全措施也会因此而受到影响。
4SSL证书通常需要绑定IP
SSL证书通常需要绑定IP不能在同一 IP上绑定多个域名 IPv4 资源不可能支撑这个消耗。
5有局限性
HTTPS 协议的加密范围也比较有限在黑客攻击、拒绝服务攻击、服务器劫持等方面几乎起不到什么作用。最关键的 SSL 证书的信用链体系并不安全特别是在某些国家可以控制 CA 根证书的情况下中间人攻击一样可行。
2、https的访问过程
问题集锦
https的握手过程https的请求过程https的加密和解密过程
简略解释
客户使用 http 的 URL 访问 Web 服务器要求与 Web 服务器建立 SSL 连接。Web服务器收到客户端请求后会将网站的证书信息证书中包含公钥传送一份给客户端。客户端的浏览器与 Web 服务器开始协商 SSL 连接的安全等级也就是信息加密的等级。客户端的浏览器根据双方同意的安全等级建立会话密钥然后利用网站的公钥将会话密钥加密 并传送给网站。Web 服务器利用自己的私钥解密出会话密钥。Web 服务器利用会话密钥加密与客户端之间的通信。 详细解释
客户端发起HTTPS 请求
用户在浏览器里输入一个 https 网址然后连接到 server 的 443 端口。
服务端的配置
就是指上述提到的数字证书
传送证书
Web 服务器收到客户端请求后会将网站的证书信息证书中包含公钥传送一份给客户端。
客户端解析证书
客户端会对证书进行判断验证公钥是否有效存在问题弹出会警告若没有问题生成一个随机值私钥然后用证书继续进行加密
传送加密信息
客户端将上加密后的随机值私钥提供给服务端服务端会对其进行解密
服务端解密信息
服务端解密后得到随机值私钥然后把内容通过该值进行对称加密。对称加密就是指把要返回的信 息和随机值私钥混合加密这样除非知道随机值私钥不然无法获取数据。
传输加密后的信息
继续将加密后的信息传递给客户端
客户端解密信息
客户端用之前生成的私钥随机值解密服务端传过来的信息于是获取了解密后的内容。 3、https为什么是安全的
HTTPS 相对于 HTTP 协议加入了TLS/SSL它的全称为安全传输层协议是介于TCP和HTTP之间的一层安全协议。
TLS/SSL 的功能实现主要依赖三类基本算法散列函数hash、对称加密、非对称加密。这三类算法的作用如下
基于散列函数验证信息的完整性对称加密算法采用协商的秘钥对数据加密非对称加密实现身份认证和秘钥协商。 4、https如何进行性能优化
1https访问速度优化
1设置HSTS
服务端返回一个HSTS的http header浏览器获取到头部之后在一段时间内不管用户输入www.baidu.com 还是http://www.baidu.com 都会默认将请求内部跳转成https://www.baidu.com 。
2Session resume
Session resume顾名思义就是复用Session实现简化握手。
减少了CPU消耗因为不需要进行非对称秘钥交换的计算。
提升访问速度不需要进行第二次的完全握手节省了一个 RTT 和计算耗时。3Nginx设置Ocsp stapling
OSCP Stapling工作原理简单来说就是浏览器发起Client Hello时会携带一个Certificate status request的扩展服务端看到这个扩展后将OSCP内容直接返回给浏览器完成证书状态检查。由于浏览器不需要向CA站点查询证书状态这个功能对访问速度的提升非常明显。
4使用SPDY或者HTTP2
SPDY 最大的特性就是多路复用能将多个 HTTP 请求在同一个连接上一起发出去不像目前的 HTTP 协议只能串行地逐个发送请求。
HTTP2 支持多路复用有同样的效果。
SPDY 和 HTTP2 目前的实现默认使用HTTPS协议。
SPDY 和 HTTP2 都支持现有的 HTTP 语义和API对web应用几乎是透明的。5False start
简单概括 False Start 的原理就是在 client_key_exchange 发出时将应用层数据一起发出来能够节省一个 RTT 。
2https计算性能优化
1优先使用 ECC椭圆加密算术
ECC 椭圆加密算术相比普通的离散对数计算在速度和性能上要强很多。
对称密钥大小RSA和DH密钥大小ECC密钥大小80102416011220482241283072256192768038425615360521
对称密钥算法 AES 、 DES 、 RC4
非对称加密算法 RSA 、 DH 、 ECC
2使用最新版的 openssl
openSSL 是一个开放源代码的软件库包应用程序可以使用这个包来进行安全通信避免窃听。
一般来讲新版的 OpenSSL 相比老版的计算速度和安全性都会有提升。
3硬件加速方案 SSL 专用加速卡。 GPUSSL 加速。
4TLS 远程代理计算
️二、浏览器存储
1、浏览器存储的方式
特性cookielocalStoragesessionStorageindexedDB数据生命周期一般由服务器生成可以设置过期时间除非被清理否则一直存在页面关闭就清理除非被清理否则一直存在数据存储大小4K5M5M无限与服务端通信每次都会携带在header中对于请求性能有一定影响不参与不参与不参与
补充cookie 原本并不是用来储存的而是用来与服务端通信的需要存取请自行封装 api。
而 localStorage 则自带 getItem 和 setItem 方法使用很方便。
localStorage 注意点 localStorage 只能存字符串存取 JSON 数据需配合 JSON.stringify() 和 JSON.parse() 遇上禁用 setItem 的浏览器需要使用 try...catch 捕获异常。
2、cookie、localStorage和sessionStorage
1cookie、localStorage和sessionStorage是什么
1cookie cookie 是一个非常具体的东西指的就是浏览器里面能永久存储的一种数据仅仅是浏览器实现的一种数据存储功能。 cookie 由服务器生成发送给浏览器浏览器把 cookie 以kv的形式保存到某个目录下的文本文件内下一次请求同一网站时会把该 cookie 发送给服务器。 cookie 的过期时间由客户端设置。若不设置过期时间则表示这个 cookie 的生命期为浏览器会话期间关闭浏览器窗口 cookie 就会消失。这种生命期为浏览器会话期的 cookie 被称为会话cookie。如果设置了过期时间则在设置的 cookie 过期时间之前一直有效即使窗口或浏览器关闭也会一直有效。 会话cookie一般不存储在硬盘而是保存在内存里当然这个行为并不是规范规定的。若设置了过期时间浏览器就会把cookie保存到硬盘上关闭后再打开浏览器后这些 cookie 仍然有效直到超过设定的过期时间。对于保存在内存里的 cookie 不同的浏览器有不同的处理方式。 可用 document.cookie 来设置 cookie 的值。cookie的值是键值对的形式存在当设置的键一样时会覆盖掉原先的值。当键不一样时对进行叠加操作。
2localStorage
始终有效窗口或浏览器关闭也一直保存因此用作持久数据同源窗口都会共享并且不会失效不管窗口或者浏览器关闭与否都会始终生效。
3sessionStorage 浏览器存储的一种形式。 仅在当前浏览器窗口关闭前有效不可能持久保持。 在相同浏览器里如果是在当前页面里面跳转进入一个新的页面可以共享而如果是直接打开一个新的页面不能共享。
2cookie、localStorage和sessionStorage的异同点
1三者的相同点在于
都是保存在浏览器端、且同源的。
2三者的区别在于 与服务器通信不同 cookie 数据始终在同源的 http 请求中携带即使不需要即 cookie 在浏览器和服务器间来回传递而sessionStorage和localStorage不会自动把数据发送给服务器仅在本地保存 cookie 会随着 http 请求被发送出去而 loacalStorage 和 sessionStorage 不会随着 http 请求被发送出去。 cookie 数据还有路径path的概念可以限制 cookie 只属于某个路径下。 存储大小限制也不同 cookie 数据不能超过4K同时因为每次 http 请求都会携带 cookie、所以 cookie 只适合保存很小的数据如会话标识 sessionStorage 和 localStorage 虽然也有存储大小的限制但比 cookie 大得多可以达到 5M 或更大。 数据有效期不同 sessionStorage 仅在当前浏览器窗口关闭之前有效 localStorage 始终有效窗口或浏览器关闭也一直保存因此用作持久数据 cookie 只在设置的 cookie 过期时间之前有效即使窗口关闭或浏览器关闭。 作用域不同 sessionStorage 不在不同的浏览器窗口中共享即使是同一个页面 localstorage 和 cookie 在所有同源窗口中都是共享的
3、cookie的用途
1保存用户登录状态
例如将用户 id 存储于一个 cookie 内这样当用户下次访问该页面 时就不需要重新登录了现在很多论坛和社区都提供这样的功能。
cookie 还可以设置过期时间当超过时间期限后cookie 就会自动消失。因此系统往往可以提示用户保持登录状态的时间常见选项有一个月、三个 月、一年等。
2跟踪用户行为
例如一个天气预报网站能够根据用户选择的地区显示当地的天气情况。 如果每次都需要选择所在地是繁琐的当利用了 cookie 后就会显得很人性化了系统能够记住上一次访问的地区当下次再打开该页面时它就会自动显示上次用户所在地区 的天气情况。
因为一切都是在后台完成所以这样的页面就像为某个用户所定制的一样使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能那么可以使用 cookie 来记录用户的选项例如背景色、分辨率等。当用户下次访问时仍然可以保存上一次访问的界面风格。
4、session和token
1Session
举个例子
session 从字面上讲就是会话。这个就类似于你和一个人交谈你怎么知道当前和你交谈的是张三而不是李四呢对方肯定有某种特征长相、身高等等表明他就是张三。session 也是类似的道理服务器要知道当前发请求给自己的是谁。为了做这种区分服务器就要给每个客户端分配不同的“身份标识”这个身份表示也就是我们平常所说的 sessionId 。然后客户端每次向服务器发请求的时候都带上这个“身份标识”服务器就知道这个请求来自于谁了。至于客户端怎么保存这个“身份标识”可以有很多种方式对于浏览器客户端大部分情况下都默认采用 cookie 的方式当然也可以使用 localStorage 和 sessionStorage 存储这个身份标识大家可以依据自身需求进行使用。需要注意的是 session 为一个会话当页面不同即使是同一页面打开两次也被视为同一次会话。服务器使用 session 把用户的信息临时保存在了服务器上用户离开网站后 session 会被销毁。这种用户信息存储方式相对 cookie 来说更安全但是 session 有一个缺陷如果web服务器做了负载均衡那么下一个操作请求到了另一台服务器的时候 session 会丢失。
综上所述对session做个总结
当程序需要为某个客户端的请求创建一个 session 时服务器首先检查这个客户端的请求里是否已包含了一个 session 标识 称为 sessionId 如果已包含则说明以前已经为此客户端创建过 session 服务器就按照此 sessionId 把其对应的 session 检索出来使用检索不到会新建一个反之如果客户端请求不包含 sessionId 则为客户端创建一个 session 并且生成一个与此 session 相关联的 sessionId sessionId 的值应该是一个既不会重复又不容易被找到规律以仿造的字符串这个 sessionId 将被在本次响应中返回给客户端保存。保存这个 sessionId 的方式可以采用 cookie 也可以是 locaStorage 和 sessionStorage 这样在交互过程中浏览器可以自动的按照规则把这个标识发送给服务器。
2Token 在Web领域基于 Token 的身份验证随处可见。在大多数使用 Web API 的互联网公司中 token 是多用户下处理认证的最佳方式。 以下几点特性会让你在程序中使用基于 Token 的身份验证 无状态、可扩展支持移动设备跨程序调用安全。 大部分你见到过的 API 和 Web 应用都使用 token 。例如 Facebook , Twitter , Google , GitHub 等。 详细文章补充 原文解决浏览器存储问题不得不了解的cookie,localStorage和sessionStorage 链接https://juejin.cn/post/6973404323904503844 ️三、跨域
1、什么是同源策略
浏览器自带的一种安全策略它是指网址中的协议、域名、端口三个都相同时才能互相访问即若协议、域名、端口有一个不相同时浏览器禁止页面加载或执行与自身不同域的脚本。
2、为什么浏览器会有同源策略
因为如果没有同源策略别人就可以轻松的获取我们网站的 cookie 信息或是对网页进行 DOM 操作
这是一件非常恐怖的事情尤其是 cookie 信息它里面存在着 sessionID 这是与服务端的 session 会话的重要凭证如果被别人得到了 cookie有很大可能会造成数据被盗取等后果。
3、同源策略限制内容有哪些
存储在浏览器中的数据如 localStroage 、 Cookie 和 IndexedDB 不能通过脚本跨域访问不能通过脚本操作不同域下的 DOM 不能通过 ajax 请求不同域的数据。
4、跨域问题解决方案
1通过jsonp跨域
问题集锦
JSONP 的原理JSONP 如何安全通信
1JSONP的原理
JSONPJSON with Padding 是数据格式 JSON 的一种“使用模式”可以让网页从别的网域要数据。
根据 XmlHttpRequest对象受到同源策略的影响而利用 script 元素的这个开放策略网页可以得到从其他来源动态产生的 JSON 数据而这种使用模式就是所谓的 JSONP 。
用 JSONP 抓到的数据并不是 JSON 而是任意的 JavaScript 用 JavaScript 解释器运行而不是用 JSON 解析器解析。
所以通过 Chrome 查看所有 JSONP 发送的 Get 请求都是 js 类型而非 XHR 。
2JSONP包含两部分回调函数和数据
回调函数是当响应到来时要放在当前页面被调用的函数。
数据就是传入回调函数中的 json 数据也就是回调函数的参数了。
function handleResponse(response){console.log(The responsed data is: response.data);
}
var script document.createElement(script);
script.src http://www.baidu.com/json/?callbackhandleResponse;
document.body.insertBefore(script, document.body.firstChild);
/*handleResonse({data: zhe})*/
//原理如下
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({data: zhe}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成3缺点
只能使用Get请求。不能注册success、error等事件监听函数不能很容易的确定 JSONP 请求是否失败。JSONP 是从其他域中加载代码执行容易受到跨站请求伪造的攻击其安全性无法确保。
2通过修改document.damain来进行跨域主域相同
1前提条件
这两个域名必须属于同一个基础域名而且所用的协议端口都要一致否则无法利用 document.domain 进行跨域所以只能跨子域
在根域范围内允许把 domain 属性的值设置为它的上一级域。例如在 aaa.xxx.com 域内可以把 domain 设置为 xxx.com 但不能设置为 xxx.org 或者 com 。
2举例
比如http://www.a.com/a.html和http://www.script.a.com/b.html
①在www.a.com/a.html中
document.domain a.com;
var ifr document.createElement(iframe);
ifr.src http://www.script.a.com/b.html;
ifr.display none;
document.body.appendChild(ifr);
ifr.onload function(){var doc ifr.contentDocument || ifr.contentWindow.document;//在这里操作doc也就是b.htmlifr.onload null;
};②在www.script.a.com/b.html中
document.domain ‘a.com’;
在两个 html 下通过 js 将 document.name xxx.com; 设置一致来达到互相访问的作用。
3使用window.name来进行跨域
1如何适用window.name进行跨域
window.name 通过在 iframe 一般动态创建中加载跨域HTML文件来起作用。然后 HTML 文件将传递给请求者的字符串内容赋值给 window.name 。然后请求者可以检索 window.name 值作为响应。
2限制
iframe 标签的跨域能力
window.name 属性值在文档刷新后依旧存在的能力且最大允许2M左右。
3举例
比如http://www.a.com/a.html和http://www.b.com/b.html
①a.html
scriptvar iframe document.createElement(iframe);iframe.style.display none; // 隐藏var state 0; // 防止页面无限刷新iframe.onload function() {if(state 1) {console.log(JSON.parse(iframe.contentWindow.name));// 清除创建的iframeiframe.contentWindow.document.write();iframe.contentWindow.close();document.body.removeChild(iframe);} else if(state 0) {state 1;// 加载完成指向当前域防止错误(proxy.html为空白页面)// Blocked a frame with origin http://www.a.com/a.html from accessing a cross-origin frame.iframe.contentWindow.location http://www.a.com/a.html;}};iframe.src http://www.b.com/b.html;document.body.appendChild(iframe);
/script②在b.com/b.html中包含
scriptwindow.name 要传送的内容;
/script4使用HTML5新引进的window.postMessage方法
1window.postMessage方法
HTML5 新特性可以用来向其他所有的 window 对象发送消息。需要注意的是我们必须要保证所有的脚本执行完才发送 MessageEvent 如果在函数执行的过程中调用了它就会让后面的函数超时无法执行。
2举例
①a.com/index.html
iframe idifr srcb.com/index.html/iframe
script typetext/javascriptwindow.onload function() {var ifr document.getElementById(ifr);var targetOrigin http://b.com; // 若写成http://b.com/c/proxy.html效果一样// 若写成http://c.com就不会执行postMessage了ifr.contentWindow.postMessage(I was there!, targetOrigin);};
/script②b.com/index.html
script typetext/javascriptwindow.addEventListener(message, function(event){// 通过origin属性判断消息来源地址if (event.origin http://a.com) {alert(event.data); // 弹出I was there!alert(event.source); // 对a.com、index.html中window对象的引用// 但由于同源策略这里event.source不可以访问window对象}}, false);
/script5cors
1cors跨域
Cross-Origin Resource SharingCORS 跨域资源共享是一份浏览器技术的规范提供了 Web 服务从不同域传来沙盒脚本的方法以避开浏览器的同源策略确保安全的跨域数据传输。现代浏览器使用 CORS 在 API 容器如 XMLHttpRequest 来减少 HTTP 请求的风险来源。与 JSONP 不同CORS 除了 GET 要求方法以外也支持其他的 HTTP 要求。
2服务器一般需要增加如下响应头的一种或几种
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 864003跨域请求默认不会携带Cookie信息如果需要携带请配置下述参数
Access-Control-Allow-Credentials: true
// Ajax设置
withCredentials: true4IE中对CORS的实现是xdr
var xdr new XDomainRequest();
xdr.onload function(){console.log(xdr.responseText);
}
xdr.open(get, http://www.baidu.com);
......
xdr.send(null);5其它浏览器中的实现就在xhr中
var xhr new XMLHttpRequest();
xhr.onreadystatechange function () {if(xhr.readyState 4){if(xhr.status 200 xhr.status 304 || xhr.status 304){console.log(xhr.responseText);}}
}
xhr.open(get, http://www.baidu.com);
......
xhr.send(null);6实现跨浏览器的CORS
unction createCORS(method, url){var xhr new XMLHttpRequest();if(withCredentials in xhr){xhr.open(method, url, true);}else if(typeof XDomainRequest ! undefined){var xhr new XDomainRequest();xhr.open(method, url);}else{xhr null;}return xhr;
}
var request createCORS(get, http://www.baidu.com);
if(request){request.onload function(){......};request.send();
}6动态创建script
script 标签不受同源策略的限制。
function loadScript(url, func) { var head document.head || document.getElementByTagName(head)[0]; var script document.createElement(script); script.src url; script.onload script.onreadystatechange function() { if(!this.readyState || this.readyState loaded || this.readyState complete) { func(); script.onload script.onreadystatechange null; } }; head.insertBefore(script, 0);}window.baidu { sug: function(data) { console.log(data); }}loadScript(http://suggestion.baidu.com/su?wdw, function() {console.log(loaded)}); //我们请求的内容在哪里 //我们可以在chorme调试面板的source中看到script引入的内容7利用location.hash 跨域
1原理
原理是利用 location.hash 来进行传值。
2举例
假设域名 a.com 下的文件 cs1.html 要和 cnblogs.com 域名下的 cs2.html 传递信息。
① cs1.html 首先创建自动创建一个隐藏的iframe iframe 的 src 指向 cnblogs.com 域名下的 cs2.html 页面
② cs2.html 响应请求后再将通过修改 cs1.html 的 hash 值来传递数据
③同时在 cs1.html 上加一个定时器隔一段时间来判断 location.hash 的值有没有变化一旦有变化则获取获取 hash 值
注由于两个页面不在同一个域下 IE 、 Chrome 不允许修改 parent.location.hash 的值所以要借助于 a.com 域名下的一个代理 iframe 。
代码如下
先是a.com下的文件cs1.html文件
function startRequest() {var ifr document.createElement(iframe); ifr.style.display none; ifr.src http://www.cnblogs.com/lab/cscript/cs2.html#paramdo;document.body.appendChild(ifr);}
function checkHash() {try { var data location.hash ? location.hash.substring(1) : ; if(console.log) { console.log(Now the data is data); } } catch(e) {};
}
setInterval(checkHash, 2000);cnblogs.com域名下的cs2.html:
//模拟一个简单的参数处理操作switch(location.hash) { case #paramdo:callBack(); break; case #paramset://do something……break;
}function callBack() { try { parent.location.hash somedata; } catch(e) {// ie、chrome的安全机制无法修改parent.location.hash// 所以要利用一个中间的cnblogs域下的代理iframe var ifrproxy document.createElement(iframe); ifrproxy.style.display none; ifrproxy.src http://a.com/test/cscript/cs3.html#somedata; // 注意该文件在a.com域下 document.body.appendChild(ifrproxy);}
}a.com下的域名cs3.html
//因为parent.parent和自身属于同一个域所以可以改变其location.hash的值parent.parent.location.hash self.location.hash.substring(1);8websocket
问题集锦
实时协作编辑使用什么协议websocketwebsocket是什么与轮询有什么不同Websocket怎么建立的和HTTP的关系Websocket有没有同源限制
1websocket是什么
web sockets是一种浏览器的API它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)
2web sockets原理
客户端会发起一个HTTP请求给服务器请求升级协议之后服务器进行协议切换并返回给客户端至此建立的连接会使得从HTTP协议升级为web socket协议。
3什么时候会用到websocket
只有在支持web socket协议的服务器上才能正常工作。
var socket new WebSockt(ws://www.baidu.com);//http-ws; https-wss
socket.send(hello WebSockt);
socket.onmessage function(event){var data event.data;
}4轮询
轮询是指客户端向服务端接二连三的询问是否有新消息。兼容性短轮询 长轮询 WebSocket。性能方面Websocket 长轮询 短轮询。
9nginx的反向代理
1nignx是什么
可以不用目标服务器配合不过需要搭建一个中转 nginx 服务器用于转发请求。需要在运维层面修改且有可能请求的资源并不在我们的控制范围内第三方所以该方式不能作为通用的解决方案。
⛺四、前端安全
1、跨站脚本攻击XSS
1XSS是什么
跨站脚本攻击缩写为 XSS (Cross Site Scripting)是利用网页的漏洞通过某种方式给网页注入恶意代码使用户加载网页时执行注入的恶意代码。
2XSS的攻击类型
XSS 一共分为三种
非持久型跨站也叫反射型持久型跨站也叫存储型DOM 跨站
1非持久型跨站反射型
①攻击步骤
攻击者构造出特殊的 URL 其中包含恶意代码。用户打开带有恶意代码的 URL 时网站服务端将恶意代码从 URL 中取出拼接在 HTML 中返回给浏览器。用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。
②攻击场景
反射型 XSS (也被称为非持久性 XSS )漏洞常见于通过 URL 传递参数的功能如网站搜索、跳转等。
③攻击方式
由于需要用户主动打开恶意的 URL 才能生效攻击者往往会结合多种手段诱导用户点击。
POST 的内容也可以触发反射型 XSS 只不过其触发条件比较苛刻需要构造表单提交页面并引导用户点击所以非常少见。
2持久型跨站存储型
①攻击步骤
攻击者将恶意代码提交到目标网站的数据库中。用户打开目标网站时网站服务端将恶意代码从数据库取出拼接在HTML中返回给浏览器。用户浏览器接收到响应后解析执行混在其中的恶意代码也被执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。
②攻击场景
存储型 XSS 攻击 (也被称为持久型 XSS )常见于带有用户保存数据的网站功能如论坛发帖、商品评论、用户私信等。
③危害
它是最危险的一种跨站脚本相比反射型 XSS 和 DOM 型 XSS 具有更高的隐蔽性所以危害更大因为它不需要用户手动触发。
任何允许用户存储数据的 web 程序都可能存在存储型 XSS 漏洞当攻击者提交一段 XSS 代码后被服务器端接收并存储当所有浏览者访问某个页面时都会被 XSS 。
3DOM跨站
①攻击步骤
攻击者构造出特殊的 URL 其中包含恶意代码。用户打开带有恶意代码的 URL 。用户浏览器接收到响应后解析执行前端 JavaScript 取出 URL 中的恶意代码并执行。恶意代码窃取用户数据并发送到攻击者的网站或者冒充用户的行为调用目标网站接口执行攻击者指定的操作。
②危害
DOM通常代表在html、xhtml和xml中的对象使用 DOM 可以允许程序和脚本动态的访问和更新文档的内容、结构和样式。它不需要服务器解析响应的直接参与触发XSS依靠的是浏览器端的DOM解析所以防范DOM型XSS完全就是前端的责任,须注意。 小结 反射型跟存储型的区别是 存储型 XSS 的恶意代码存在数据库里反射型 XSS 的恶意代码存在 URL 里。 DOM 型跟前两种区别是 DOM 型 XSS 攻击中取出和执行恶意代码由浏览器端完成属于前端 JavaScript 自身的安全漏洞而其他两种 XSS 都属于服务端的安全漏洞。 三者的对比 类型存储区插入点反射型 XSSURLHTML存储型 XSS后端数据库HTMLDOM 型 XSS后端数据库/前端存储/URL前端 JavaScript3如何防御XSS
只要有输入数据的地方就可能存在 XSS 危险。
1设置HttpOnly
在 cookie 中设置 HttpOnly 属性后 js 脚本将无法读取到 cookie 信息。
2转义字符串
XSS 攻击大多都是由数据的输入和输出作为攻击点进行攻击所以针对这几个攻击点对数据进行过滤。
其中数据包括前端数据的输入和输出、后端数据的输入和输出。
那么数据过滤是什么又如何对数据进行过滤呢
数据过滤是对输入格式的检查例如邮箱电话号码用户名密码……等按照规定的格式输入。它不仅仅是前端负责后端也要做相同的过滤检查。如果没有做数据过滤攻击者完全可以绕过正常的输入流程直接利用相关接口向服务器发送设置。
因此可以通过封装过滤函数对数据进行过滤目的是将几个攻击者常用的输入内容都进行转移这样就避免了浏览器解析成了脚本代码。
function escape(str) {str str.replace(//g, amp;);str str.replace(//g, lt;);str str.replace(//g, gt;);str str.replace(//g, quto;);str str.replace(//g, #39;);str str.replace(//g, #96;);str str.replace(/\//g, #x2F;);return str;
}3白名单
对于显示富文本来说不能通过上面的办法来转义所有字符因为这样会把需要的格式也过滤掉。这种情况通常采用白名单过滤的办法当然也可以通过黑名单过滤但是考虑到需要过滤的标签和标签属性实在太多更加推荐使用白名单的方式。 详细文章补充原文浅谈Web前端安全策略xss和csrf及又该如何预防链接https://juejin.cn/post/6972690033694228494 2、跨站请求伪造csrf
1什么是csrf
跨站请求伪造(Cross-site request forgery)也被称为 one-click attack 或者 session riding 通常缩写为 CSRF 或者 XSRF 是一种挟制用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。如攻击者诱导受害者进入第三方网站在第三方网站中向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证绕过后台的用户验证达到冒充用户对被攻击的网站执行某项操作的目的。
2csrf攻击流程
要完成一次 CSRF 攻击受害者必须依次完成两个步骤
登录受信任网站A并在本地生成 Cookie 。在不登出A的情况下访问危险网站B。
看到这里你也许会说“如果我不满足以上两个条件中的一个我就不会受到 CSRF 的攻击”。是的确实如此但你不能保证以下情况不会发生
你不能保证你登录了一个网站后不再打开一个 tab 页面并访问另外的网站。你不能保证你关闭浏览器了后你本地的 Cookie 立刻过期你上次的会话已经结束。事实上关闭浏览器不能结束一个会话但大多数人都会错误的认为关闭浏览器就等于退出登录/结束会话了…上述中所说的网站可能是一个存在其他漏洞但又很受信任的且经常被人访问的网站。
3CSRF的特点
攻击一般发起在第三方网站而不是被攻击的网站。被攻击的网站无法防止攻击发生。攻击利用受害者在被攻击网站的登录凭证冒充受害者提交操作而不是直接窃取数据。整个过程攻击者并不能获取到受害者的登录凭证仅仅是“冒用”。
4CSRF攻击场景
跨站请求可以用各种方式
图片 URL 、超链接、 CORS 、 Form 提交等等。部分请求方式可以直接嵌入在第三方论坛、文章中难以进行追踪。CSRF 通常是跨域的因为外域通常更容易被攻击者掌控。但是如果本域下有容易被利用的功能比如可以发图和链接的论坛和评论区攻击可以直接在本域下进行且这种攻击更加危险。
5CSRF常见的攻击类型
1GET类型的CSRF
GET 类型的 CSRF 利用非常简单只需要一个 HTTP 请求一般会这样利用
img srchttp://bank.example/withdraw?amount10000forhacker 在受害者访问含有这个img的页面后浏览器会自动向 http://bank.example/withdraw?accountxiaomingamount10000forhacker 发出一次 HTTP 请求。 bank.example 就会收到包含受害者登录信息的一次跨域请求。
2POST类型的CSRF
这种类型的 CSRF 利用起来通常使用的是一个自动提交的表单如 form actionhttp://bank.example/withdraw methodPOSTinput typehidden nameaccount valuexiaoming /input typehidden nameamount value10000 /input typehidden namefor valuehacker /
/form
script document.forms[0].submit(); /script访问该页面后表单会自动提交相当于模拟用户完成了一次POST操作。
POST类型的攻击通常比 GET 要求更加严格一点但仍并不复杂。任何个人网站、博客被黑客上传页面的网站都有可能是发起攻击的来源后端接口不能将安全寄托在仅允许 POST 上面。
3链接类型的CSRF
链接类型的 CSRF 并不常见比起其他两种用户打开页面就中招的情况这种需要用户点击链接才会触发。这种类型通常是在论坛中发布的图片中嵌入恶意链接或者以广告的形式诱导用户中招攻击者通常会以比较夸张的词语诱骗用户点击例如
a hrefhttp://test.com/csrf/withdraw.php?amount1000forhacker taget_blank重磅消息
a/6如何防御csrf
1验证码
强制用户必须与应用进行交互才能完成最终请求。此种方式能很好的遏制 csrf 但是用户体验比较差。
2Referer check
请求来源限制此种方法成本最低但是并不能保证 100% 有效因为服务器并不是什么时候都能取到 Referer 并且低版本的浏览器存在伪造 Referer 的风险。
3token
token 验证的 CSRF 防御机制是公认最合适的方案。
7CSRF与 XSS 区别
通常来说 CSRF 是由 XSS 实现的CSRF 时常也被称为 XSRFCSRF 实现的方式还可以是直接通过命令行发起请求等。本质上讲XSS 是代码注入问题CSRF 是 HTTP 问题。 XSS 是内容没有过滤导致浏览器将攻击者的输入当代码执行CSRF 则是因为浏览器在发送 HTTP 请求时候。自动带上 cookie 而一般网站的 session 都存在 cookie 里面( Token 验证可以避免)。 详细文章补充原文浅谈Web前端安全策略xss和csrf及又该如何预防链接https://juejin.cn/post/6972690033694228494 ️五、其他问题
1、Chrome浏览器用过哪些调试工具
Element 面板鼠标console 面板对一些提示信息进行输出sources 面板调试 js Network 面板查看网络请求的状态、接口调用的情况……。
2、浏览器内核的理解
1主要分为两个部分渲染引擎、js引擎
渲染引擎 负责取得网页的内容html css img …以及计算网页的显示方式然后输出至显示器或者打印机浏览器的内核不同对于网页的语法解释也不同所以渲染的效果也不一样。js引擎 解析和执行 javascript 来实现网页的动态效果。
2部分浏览器的内核
IE trident内核Fireforx gekco内核Safari webkit内核Opera 以前是presto内核Opera现已改用Google - Chrome 的Blink 内核Chrome: Blink(基于webkitGoogle与Opera Software共同开发)
六、结束语
在上文中从 http 的基础知识到浏览器缓存问题再到跨域前端安全问题系统地梳理了浏览器在前端面试中的考点。
到这里本文就讲解结束啦希望对大家有帮助~
如对文章有补充或者有发现小细节错误欢迎小伙伴们评论区留言或联系 vx:MondayLaboratory 及时订正~
让这份面试内容更加地尽善尽美造福更多在备试中的小伙伴们
最后预祝各位看到这篇文章的小伙伴们都能够斩获到自己心仪的 offer ~
彩蛋 One More Thing
️pdf内容获取 微信关注公众号 星期一研究室 回复关键字 浏览器面试pdf 即可获取相关 pdf 内容~ 回复 面试大全pdf 可获取全专栏内容
️更新地址 offer来了面试专栏
️番外篇
如果您觉得这篇文章有帮助到您的的话不妨点赞支持一下哟~~以上就是本文的全部内容我们下期见
