20160917 携程前端笔试题

一、智力题

二、选择题

1. 下列哪个样式定义后，内联（非块状）元素可以定义宽度和高度？（B）

A display:none　　　　B display:block　　　　C display: inherit　　　　D display: inline

2. var emp = new Array(3); for(var i in emp)

以下答案中能与for循环代码互换的是（A）

A for(var i=0; i<emp.length; i++)

3. 下面有关js中call和apply的描述，错误的是（A）

A 两者传递的参数不同，call函数第一个参数都是要传入给当前对象的对象，apply不是

B call传入的则是直接的参数列表。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

C call与aplly都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性

D apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入

4. 在js中，下列选项中不属于数组方法的是（D）

A reverse()　　　　B concat()　　　　C sort()　　　　D length()

5. 下面符合一个有效的js变量定义规则的是（B）

A with　　　　B _$te$t2　　　　C 2a　　　　D a bc

6. 下列哪个属于浏览器内核（AC）

A Trident　　　　B 360　　　　C Gecko　　　　D X5

7. 下列符合规范的AMD模块ID有？（A）

A ./foo/boo/woo　　　　B foo/boo/Woo　　　　C foo/boo/woo.js　　　　D ../../foo/Boo/WoO

参考：AMD规范

8. 下面有关html5标签说法错误的有？（B）

A <menu> 标签定义菜单列表。当希望列出表单控件时使用该标签

B <canvas> 比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容

C <audio> 标签定义声音，比如音乐或其他音频流

D <command> 标签定义命令按钮，比如单选按钮、复选框或按钮

解析： 这里考察HTML标签的使用：
<audio> 标签定义声音，比如音乐或其他音频流。 A正确。
<canvas> 标签定义图形，比如图表和其他图像。<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。 B错误，<article>标签定义外部的内容。比如来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。
<menu> 标签定义命令的列表或菜单。<menu> 标签用于上下文菜单、工具栏以及用于列出表单控件和命令。 C正确
command 元素表示用户能够调用的命令。<command> 标签可以定义命令按钮，比如单选按钮、复选框或按钮。只有当 command 元素位于 menu 元素内时，该元素才是可见的。否则不会显示这个元素，但是可以用它规定键盘快捷键。 

9. 下列哪些web安全措施用于防御csrf攻击（）

A 每次请求的token最好都不一样

B http响应添加Content-Security-Policy头部

C 前端对用户输入的内容进行编码

D 表单提交时需带上token并在服务器端校验通过才行

解析：感觉应该选和token有关的，AD？

CSRF（Cross-site request forgery），中文名称：跨站请求伪造，也被称为：one click attack/session riding，缩写为：CSRF/XSRF。

你这可以这么理解CSRF攻击：攻击者盗用了你的身份，以你的名义发送恶意请求。CSRF能够做的事情包括：以你名义发送邮件，发消息，盗取你的账号，甚至于购买商品，虚拟货币转账......造成的问题包括：个人隐私泄露以及财产安全。

要完成一次CSRF攻击，受害者必须依次完成两个步骤：

　　1.登录受信任网站A，并在本地生成Cookie。

　　2.在不登出A的情况下，访问危险网站B。

　　看到这里，你也许会说：“如果我不满足以上两个条件中的一个，我就不会受到CSRF的攻击”。是的，确实如此，但你不能保证以下情况不会发生：

　　1.你不能保证你登录了一个网站后，不再打开一个tab页面并访问另外的网站。

　　2.你不能保证你关闭浏览器了后，你本地的Cookie立刻过期，你上次的会话已经结束。（事实上，关闭浏览器不能结束一个会话，但大多数人都会错误的认为关闭浏览器就等于退出登录/结束会话了......）

　　3.上图中所谓的攻击网站，可能是一个存在其他漏洞的可信任的经常被人访问的网站。

防御：

　　1.服务端进行CSRF防御

　　服务端的CSRF方式方法很多样，但总的思想都是一致的，就是在客户端页面增加伪随机数。

　　(1).Cookie Hashing(所有表单都包含同一个伪随机值)：在表单里增加Hash值，以认证这确实是用户发送的请求。然后在服务器端进行Hash值验证

　　

　　(2).验证码

　　这个方案的思路是：每次的用户提交都需要用户在表单中填写一个图片上的随机字符串，厄....这个方案可以完全解决CSRF，但个人觉得在易用性方面似乎不是太好，还有听闻是验证码图片的使用涉及了一个被称为MHTML的Bug，可能在某些版本的微软IE中受影响。

　　(3).One-Time Tokens(不同的表单包含一个不同的伪随机值)

　　在实现One-Time Tokens时，需要注意一点：就是“并行会话的兼容”。如果用户在一个站点上同时打开了两个不同的表单，CSRF保护措施不应该影响到他对任何表单的提交。考虑一下如果每次表单被装入时站点生成一个伪随机值来覆盖以前的伪随机值将会发生什么情况：用户只能成功地提交他最后打开的表单，因为所有其他的表单都含有非法的伪随机值。必须小心操作以确保CSRF保护措施不会影响选项卡式的浏览或者利用多个浏览器窗口浏览一个站点。

参考：http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

 

10. 关于XSS，下列说法正确的是（）

A 从cookies中获取用户名并输出到页面的过程并不会导致XSS

B CSRF是XSS的一种

C XSS都是后端未对数据做安全检查造成的

D XSS全称是Cross Site Script

解析：XSS：跨站脚本攻击（Cross Site Scripting）。

我们所说跨站脚本是指在远程WEB页面的html代码中插入的具有恶意目的的数据，用户认为该页面是可信赖的，但是当浏览器下载该页面，嵌入其中的脚本将被解释执行，有时候跨站脚本被称为"XSS"，这是因为"CSS"一般被称为分层样式表，这很容易让人困惑，如果

你听某人提到CSS或者XSS安全漏洞，通常指得是跨站脚本。

对XSS最佳的防护应该结合以下两种方法：验证所有输入数据，有效检测攻击；对所有输出数据进行适当的编码，以防止任何已成功注入的脚本在浏览器端运行。

大概选D？

 

11. 在iphone6手机屏幕上，标准出厂值情况下，下列哪个尺寸最大（D）

A 1em　　　　B 1px　　　　C 1pt　　　　D 1vh

解析：

px：绝对单位，页面按精确像素展示

em：相对单位，基准点为父节点字体的大小，如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。

rem：相对单位，可理解为”root em”, 相对根节点html的字体大小来计算，CSS3新加属性，chrome/firefox/IE9+支持。

vw：viewpoint width，视窗宽度，1vw等于视窗宽度的1%。
vh：viewpoint height，视窗高度，1vh等于视窗高度的1%。
vmin：vw和vh中较小的那个。
vmax：vw和vh中较大的那个。

%:百分比
in:寸
cm:厘米
mm:毫米
pt:point，大约1/72寸

pc:pica，大约6pt，1/6寸

ex：取当前作用效果的字体的x的高度，在无法确定x高度的情况下以0.5em计算(IE11及以下均不支持，firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀)

ch:以节点所使用字体中的“0”字符为基准，找不到时为0.5em(ie10+,chrome31+,safair7.1+,opera26+,ios safari 7.1+,android browser4.4+支持)

 

12. 下列声明数组的语句中，错误的选项是（A）

A var arra[] = new Array(3)(4)

B var array = new Array()

C var array = new Array('3','4')

D var array = new Array(3)

 

13. 下面有关jquery事件的响应，描述错误的是（C）

A onmousedown 某个鼠标按键被按下

B onload是某个页面的css js html文档结构和图像被完成加载

C onfocus元素失去焦点

D onclick鼠标点击某个对象

解析：blur失去焦点，focus得到焦点

 

14. 下面哪一个选项不属于document对象的方法（C）

A getElementsById()

B focus()

C bgColor()

D getElementById()

 

15. 要动态改变层中内容可以使用的方法有（AB）

a)innerHTML
b)innerText
c)通过设置层的隐藏和显示来实现
d)通过设置层的样式属性的display属性

 

三、问答题：

1. 使用过第三方的js库或框架吗？列出一些你使用过的，谈谈它们的优点？

 

2. 请用5种不同的方式实现未知高度宽度的元素垂直水平居中？

3. 设计并实现一个combox（下拉选择框）

1） combox内容可编辑，下拉展示区域可滚动（一共包含了10w条数据）

2） 根据输入内容做prefix匹配，展示匹配到的可选择内容列表（要求提高匹配效率、考察算法能力，空间复杂度和时间复杂度均衡）

4. 下面这个js程序输出的是什么？

<script language="JavaScript">

var bb=1; function aa(bb){bb=2; alert(bb);};aa(bb); alert(bb);

</script>