2020年前端面试题及答案（一）

一

大纲

1、前言

2、前端工程化

3、前端设计模式

4、前端安全性问题

5、前端跨域问题

6、前端数据加密

7、前端http相关问题

8、*前端基础知识点面试题

9、前端技术栈问题

前言

由于新冠肺炎疫情，现在成天呆在家里，加上也要准备面试，就在家里看面试题，看着网上一堆面试题，决定收集常见题目汇总一下。关于面试大纲，我认为每个人都是千差万别的。因为面试官都是对简历所写的项目经验进行深挖或者对你所掌握的基本技能进行考察。

前端工程化

1

什么是"前端工程化"？

前端工程化是使用软件工程的技术和方法来进行前端的开发流程、技术、工具、经验等规范化、标准化，其主要目的为了提高效率和降低成本，即提高开发过程中的开发效率，减少不必要的重复工作时间，而前端工程本质上是软件工程的一种，因此我们应该从软件工程的角度来研究前端工程。

2

如何做"前端工程化"？
前端工程化就是为了让前端开发能够“自成体系”，个人认为主要应该从模块化、组件化、规范化、自动化四个方面思考。

前端设计模式

前端常见的设计模式主要有以下几种，具体设计模式查看这篇文章。

1. 单例模式
2. 工厂模式
3. 策略模式
4. 代理模式
5. 观察者模式
6. 模块模式
7. 构造函数模式
8. 混合模式

前端安全性问题

这个是老的话题，有的在初中级前端面试中可能不会提到。但是在高级面试的时候，你要说出前端安全性问题防御，及前端常见安全性问题的攻击原理是什么。

1

xss跨站脚本攻击原理？如何进行？防御手段？
如何进行：如何XSS是指恶意攻击者利用网站没有对用户提交数据进行转义处理或者过滤不足的缺点，进而添加一些代码，嵌入到web页面中去。使别的用户访问都会执行相应的嵌入代码。从而盗取用户资料、利用用户身份进行某种动作或者对访问者进行病毒侵害的一种攻击方式。

主要原理：过于信任客户端提交的数据！

防御手段：不信任任何客户端提交的数据，只要是客户端提交的数据就应该先进行相应的过滤处理然后方可进行下一步的操作。

2

CSRF跨站请求伪造原理？如何进行？防御手段？
如何进行：当你在某网页登录之后，在没有关闭网页的情况下，收到别人的链接。例如:http://127.0.0.1/dvwa/vulnerabilities/csrf/?password_new=1&password_conf=1&Change=Change#

点击链接，会利用浏览器的cookie把密码改掉。

主要原理：在没有关闭相关网页的情况下，点击其他人发来的CSRF链接，利用客户端的cookie直接向服务器发送请求。

防御手段：

检测Referer

Anti-CSRF token机制

业务上要求用户输入原始密码（简单粗暴），攻击者在不知道原始密码的情况下，无论如何都无法进行CSRF攻击。

3

Sql脚本注入原理？如何进行？防御手段？
如何进行：利用现有应用程序，将（恶意）的SQL命令注入到后台数据库引擎执行的能力，它可以通过在Web表单中输入（恶意）SQL语句得到一个存在安全漏洞的网站上的数据库，而不是按照设计者意图去执行SQL语句。

主要原理：通过把SQL命令插入到Web表单提交或输入域名或页面请求的查询字符串，最终达到欺骗服务器执行恶意的SQL命令

防御手段：

使用预编译，绑定变量（推荐）。

检查数据类型。

过滤特殊字符和语句。

页面不错误回显。

4

web上传漏洞原理？如何进行？防御手段？
如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。

主要原理：当文件上传时没有对文件的格式和上传用户做验证，导致任意用户可以上传任意文件，那么这就是一个上传漏洞。

防御手段：

1. 最有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的’x’权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；
2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；
3. 使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；
4. 单独设置文件服务器的域名；

前端跨越问题

1

什么是跨域？
由浏览器同源策略限制的一类请求场景，当不同地址，不同端口，不同级别，不同协议就会构成跨域。

2

什么是同源策略？
所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。

它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。

3

如何解决跨域？ 能说1，2，7，8就行。
1、 通过jsonp跨域

2、CORS

3、 document.domain + iframe跨域

4、 location.hash + iframe

5、 window.name + iframe跨域

6、 postMessage跨域

7、 nginx代理跨域

8、 nodejs中间件代理跨域

9、 WebSocket协议跨域