前端页面数据回显_前端工程师的板砖之旅（第一话:找工作）

2021年毕业生现在已经在为工作开始焦虑咯！

不分专业不分学校，只要是即将毕业并且不考虑升学的毕业生，都在为找工作默默的奋斗到精疲力尽；

或是扎实专业基础，或是积极为转行做准备，又或是在美化简历，亦或是在招聘网积极投简历！

今天我们来说说互联网时代软件产品研发中不可缺少一种专业研发角色——前端工程师。

定义：前端工程师是互联网时代软件产品研发中不可缺少的一种专业研发角色。从狭义上讲，前端工程师使用 HTML、CSS、JavaScript 等专业技能和工具将产品UI设计稿实现成网站产品，涵盖用户PC端、移动端网页，处理视觉和交互问题。从广义上来讲，所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。(引用自百度百科)

话不多说，如果你专业是软件开发专业，你可能已经大概了解了前端工程师是做什么的了，其工作职责是什么了！虽然，可能你在学习过程中就已经体会到此专业的难度，但是在有挑战的同时，工资也是极其可观的！请看下图：

不管哪个行业，挑战和薪酬都是成正比的，除了有扎实的专业基础，还要能有实展才能的地方；首先，就是面临面试，其实我感觉，我们学校里学到的东西也很多，只是对于基础理论可能会差点，但是上手做项目的话，死磕还是能胜任，只是前期会比较辛苦；但是理论的缺失就导致不能很好的叙述自己学到的东西，不能面试到心仪的企业；总结一句话：缺乏面试经验和技巧！

那我现在来罗列一些面试需要用到的前端知识吧，这可能会帮到你，为你的面试之路增一抹亮色，让面试的你更有话说，更能准确的表达自己！

干货到来就没图了，好好看，好好学！

前端工程化

1

什么是"前端工程化"？

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

2

如何做"前端工程化"？

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

前端设计模式

前端常见的设计模式主要有以下几种，具体设计模式查看这篇文章。1. 单例模式2. 工厂模式3. 策略模式4. 代理模式5. 观察者模式6. 模块模式7. 构造函数模式8. 混合模式

前端安全性问题

xss跨站脚本攻击原理？如何进行？防御手段？

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

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

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

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攻击。

Sql脚本注入原理？如何进行？防御手段？  

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

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

防御手段：

使用预编译，绑定变量(推荐)。

检查数据类型。

过滤特殊字符和语句。

页面不错误回显。

web上传漏洞原理？如何进行？防御手段？  

如何进行：用户上传了一个可执行的脚本文件，并通过此脚本文件获得了执行服务器端命令的能力。

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

防御手段：

1.  有效的，将文件上传目录直接设置为不可执行，对于Linux而言，撤销其目录的'x'权限；实际中很多大型网站的上传应用都会放置在独立的存储上作为静态文件处理，一是方便使用缓存加速降低能耗，二是杜绝了脚本执行的可能性；

2. 文件类型检查：强烈推荐白名单方式，结合MIME Type、后缀检查等方式；此外对于图片的处理可以使用压缩函数或resize函数，处理图片的同时破坏其包含的HTML代码；

3.  使用随机数改写文件名和文件路径，使得用户不能轻易访问自己上传的文件；

4.  单独设置文件服务器的域名；

前端跨越问题

什么是跨域？  

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

什么是同源策略？  

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

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

如何解决跨域？能说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协议跨域

以上极专业的解读呢！来自于CSDN社区

https://blog.csdn.net/Raleway/article/details/104268283/

为了更利于我们接受呢，目前这一期就写那么多了，我们分段解读2020年

前端工程师面试题目吧！