20160917 攜程前端筆試題

1、智力題

2、選擇題

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屬性

 

3、問答題：

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>