前端经典面试题60道，附答案！

为了安全性，双方可以使用对称加密的方式key进行信息交流，但是这种方式对称加密秘钥也会被拦截，也不够安全，进而还是存在被中间人攻击风险；

于是人们又想出来另外一种方式，使用非对称加密的方式；使用公钥/私钥加解密；通信方A发起通信并携带自己的公钥，接收方B通过公钥来加密对称秘钥；然后发送给发起方A；A通过私钥解密；双发接下来通过对称秘钥来进行加密通信；但是这种方式还是会存在一种安全性；中间人虽然不知道发起方A的私钥，但是可以做到偷天换日，将拦截发起方的公钥key;并将自己生成的一对公/私钥的公钥发送给B；接收方B并不知道公钥已经被偷偷换过；按照之前的流程，B通过公钥加密自己生成的对称加密秘钥key2;发送给A；

这次通信再次被中间人拦截，尽管后面的通信，两者还是用key2通信，但是中间人已经掌握了Key2;可以进行轻松的加解密；还是存在被中间人攻击风险；

• 解决困境：权威的证书颁发机构CA来解决；

• • 制作证书：作为服务端的A，首先把自己的公钥key1发给证书颁发机构，向证书颁发机构进行申请证书；证书颁发机构有一套自己的公私钥，CA通过自己的私钥来加密key1,并且通过服务端网址等信息生成一个证书签名，证书签名同样使用机构的私钥进行加密；制作完成后，机构将证书发给A；

• 校验证书真伪：当B向服务端A发起请求通信的时候，A不再直接返回自己的公钥，而是返回一个证书；

说明：各大浏览器和操作系统已经维护了所有的权威证书机构的名称和公钥。B只需要知道是哪个权威机构发的证书，使用对应的机构公钥，就可以解密出证书签名；接下来，B使用同样的规则，生成自己的证书签名，如果两个签名是一致的，说明证书是有效的；

签名验证成功后，B就可以再次利用机构的公钥，解密出A的公钥key1;接下来的操作，就是和之前一样的流程了；

• 中间人是否会拦截发送假证书到B呢？

因为证书的签名是由服务器端网址等信息生成的，并且通过第三方机构的私钥加密中间人无法篡改；所以最关键的问题是证书签名的真伪；

• https主要的思想是在http基础上增加了ssl安全层，即以上认证过程；

2、TCP三次握手和四次挥手

参考答案

三次握手之所以是三次是保证client和server均让对方知道自己的接收和发送能力没问题而保证的最小次数。

第一次client => server 只能server判断出client具备发送能力

第二次 server => client client就可以判断出server具备发送和接受能力。此时client还需让server知道自己接收能力没问题于是就有了第三次

第三次 client => server 双方均保证了自己的接收和发送能力没有问题

其中，为了保证后续的握手是为了应答上一个握手，每次握手都会带一个标识 seq，后续的ACK都会对这个seq进行加一来进行确认。

3、img iframe script 来发送跨域请求有什么优缺点？

参考答案

• iframe

优点：跨域完毕之后DOM操作和互相之间的JavaScript调用都是没有问题的

缺点：1.若结果要以URL参数传递，这就意味着在结果数据量很大的时候需要分割传递，巨烦。2.还有一个是iframe本身带来的，母页面和iframe本身的交互本身就有安全性限制。

• script

优点：可以直接返回json格式的数据，方便处理

缺点：只接受GET请求方式

• 图片ping

优点：可以访问任何url，一般用来进行点击追踪，做页面分析常用的方法

缺点：不能访问响应文本，只能监听是否响应

4、http和https的区别？

参考答案

http传输的数据都是未加密的，也就是明文的，网景公司设置了SSL协议来对http协议传输的数据进行加密处理，简单来说https协议是由http和ssl协议构建的可进行加密传输和身份认证的网络协议，比http协议的安全性更高。主要的区别如下：

• Https协议需要ca证书，费用较高。

• http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议。

• 使用不同的链接方式，端口也不同，一般而言，http协议的端口为80，https的端口为443

• http的连接很简单，是无状态的；HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议，比http协议安全。

5、什么是Bom？有哪些常用的Bom属性？

参考答案

Bom是浏览器对象

location对象

• location.href-- 返回或设置当前文档的URL

• location.search – 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamd… 返回包括(?)后面的内容?id=5&name=dreamdu

• location.hash – 返回URL#后面的内容，如果没有#，返回空 location.host – 返回URL中的域名部分，例如www.dreamdu.com

• location.hostname – 返回URL中的主域名部分，例如dreamdu.com

• location.pathname – 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/

• location.port – 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080

• location.protocol – 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:

• location.assign – 设置当前文档的URL

• location.replace() – 设置当前文档的URL，并且在history对象的地址列表中移除这个URL location.replace(url);

• location.reload() – 重载当前页面

history对象

• history.go() – 前进或后退指定的页面数

• history.go(num); history.back() – 后退一页

• history.forward() – 前进一页

Navigator对象

• navigator.userAgent – 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)

• navigator.cookieEnabled – 返回浏览器是否支持(启用)cookie

6、Cookie、sessionStorage、localStorage的区别

参考答案

共同点：都是保存在浏览器端，并且是同源的

• Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

• sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

• localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

• 保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个 月、一年等。

• 跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了 cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后 台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便

• 定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

7、Cookie如何防范XSS攻击

参考答案

XSS（跨站脚本攻击）是指攻击者在返回的HTML中嵌入javascript脚本，为了减轻这些攻击，需要在HTTP头部配上，set-cookie：

• httponly-这个属性可以防止XSS,它会禁止javascript脚本来访问cookie。

• secure - 这个属性告诉浏览器仅在请求为https的时候发送cookie。

结果应该是这样的：Set-Cookie=…

8、浏览器和 Node 事件循环的区别？

参考答案

其中一个主要的区别在于浏览器的event loop 和nodejs的event loop 在处理异步事件的顺序是不同的,nodejs中有micro event;其中Promise属于micro event 该异步事件的处理顺序就和浏览器不同.nodejs V11.0以上 这两者之间的顺序就相同了.

function test () {

console.log(‘start’)

setTimeout(() => {

console.log(‘children2’)

Promise.resolve().then(() => {console.log(‘children2-1’)})

}, 0)

setTimeout(() => {

console.log(‘children3’)

Promise.resolve().then(() => {console.log(‘children3-1’)})

}, 0)

Promise.resolve().then(() => {console.log(‘children1’)})

console.log(‘end’)

}

test()

// 以上代码在node11以下版本的执行结果(先执行所有的宏任务，再执行微任务)

// start

// end

// children1

// children2

// children3

// children2-1

// children3-1

// 以上代码在node11及浏览器的执行结果(顺序执行宏任务和微任务)

// start

// end

// children1

// children2

// children2-1

// children3

// children3-1

9、简述HTTPS中间人攻击

参考答案

https协议由 http + ssl 协议构成，具体的链接过程可参考SSL或TLS握手的概述

中间人攻击过程如下：

1. 服务器向客户端发送公钥。

2. 攻击者截获公钥，保留在自己手上。

3. 然后攻击者自己生成一个【伪造的】公钥，发给客户端。

4. 客户端收到伪造的公钥后，生成加密hash值发给服务器。

5. 攻击者获得加密hash值，用自己的私钥解密获得真秘钥。

6. 同时生成假的加密hash值，发给服务器。

7. 服务器用私钥解密获得假秘钥。

8. 服务器用加秘钥加密传输信息

防范方法：

1. 服务端在发送浏览器的公钥中加入CA证书，浏览器可以验证CA证书的有效性

10、说几条web前端优化策略

参考答案

(1). 减少HTTP请求数

这条策略基本上所有前端人都知道，而且也是最重要最有效的。都说要减少HTTP请求，那请求多了到底会怎么样呢？首先，每个请求都是有成本的，既包 含时间成本也包含资源成本