摘要：禁止內(nèi)聯(lián)腳本執(zhí)行規(guī)則較嚴(yán)格，目前發(fā)現(xiàn)使用。合理使用上報(bào)可以及時(shí)發(fā)現(xiàn)，利于盡快修復(fù)問題。因?yàn)槭录?huì)從目標(biāo)元素一層層冒泡至對(duì)象。允許給一個(gè)事件注冊(cè)多個(gè)監(jiān)聽。表示在捕獲階段觸發(fā)，表示在冒泡階段觸發(fā)。

Step-By-Step (點(diǎn)擊進(jìn)入項(xiàng)目) 是我于 2019-05-20 開始的一個(gè)項(xiàng)目，每個(gè)工作日發(fā)布一道面試題。
每個(gè)周末我會(huì)仔細(xì)閱讀大家的答案，整理最一份較優(yōu)答案出來，因本人水平有限，有誤的地方，大家及時(shí)指正。
如果想 加群 學(xué)習(xí)，關(guān)注公眾號(hào)，添加我為好友，我拉你進(jìn)群。

更多優(yōu)質(zhì)文章可戳: https://github.com/YvetteLau/...

本周面試題一覽:

什么是XSS攻擊，XSS 攻擊可以分為哪幾類？我們?nèi)绾畏婪禭SS攻擊？

如何隱藏頁面中的某個(gè)元素？

瀏覽器事件代理機(jī)制的原理是什么？

setTimeout 倒計(jì)時(shí)為什么會(huì)出現(xiàn)誤差？

XSS(Cross-Site Scripting，跨站腳本攻擊)是一種代碼注入攻擊。攻擊者在目標(biāo)網(wǎng)站上注入惡意代碼，當(dāng)被攻擊者登陸網(wǎng)站時(shí)就會(huì)執(zhí)行這些惡意代碼，這些腳本可以讀取 cookie，session tokens，或者其它敏感的網(wǎng)站信息，對(duì)用戶進(jìn)行釣魚欺詐，甚至發(fā)起蠕蟲攻擊等。

XSS 的本質(zhì)是：惡意代碼未經(jīng)過濾，與網(wǎng)站正常的代碼混在一起；瀏覽器無法分辨哪些腳本是可信的，導(dǎo)致惡意腳本被執(zhí)行。由于直接在用戶的終端執(zhí)行，惡意代碼能夠直接獲取用戶的信息，利用這些信息冒充用戶向網(wǎng)站發(fā)起攻擊者定義的請(qǐng)求。

根據(jù)攻擊的來源，XSS攻擊可以分為存儲(chǔ)型(持久性)、反射型(非持久型)和DOM型三種。下面我們來詳細(xì)了解一下這三種XSS攻擊：

1.1 反射型XSS

當(dāng)用戶點(diǎn)擊一個(gè)惡意鏈接，或者提交一個(gè)表單，或者進(jìn)入一個(gè)惡意網(wǎng)站時(shí)，注入腳本進(jìn)入被攻擊者的網(wǎng)站。Web服務(wù)器將注入腳本，比如一個(gè)錯(cuò)誤信息，搜索結(jié)果等，未進(jìn)行過濾直接返回到用戶的瀏覽器上。

反射型 XSS 的攻擊步驟：

攻擊者構(gòu)造出特殊的 URL，其中包含惡意代碼。

用戶打開帶有惡意代碼的 URL 時(shí)，網(wǎng)站服務(wù)端將惡意代碼從 URL 中取出，拼接在 HTML 中返回給瀏覽器。

用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行。

惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。

反射型 XSS 漏洞常見于通過 URL 傳遞參數(shù)的功能，如網(wǎng)站搜索、跳轉(zhuǎn)等。由于需要用戶主動(dòng)打開惡意的 URL 才能生效，攻擊者往往會(huì)結(jié)合多種手段誘導(dǎo)用戶點(diǎn)擊。

POST 的內(nèi)容也可以觸發(fā)反射型 XSS，只不過其觸發(fā)條件比較苛刻（需要構(gòu)造表單提交頁面，并引導(dǎo)用戶點(diǎn)擊），所以非常少見。

如果不希望被前端拿到cookie，后端可以設(shè)置 httpOnly (不過這不是 XSS攻擊 的解決方案，只能降低受損范圍)

如何防范反射型XSS攻擊

對(duì)字符串進(jìn)行編碼。

對(duì)url的查詢參數(shù)進(jìn)行轉(zhuǎn)義后再輸出到頁面。

app.get("/welcome", function(req, res) {
    //對(duì)查詢參數(shù)進(jìn)行編碼，避免反射型 XSS攻擊
    res.send(`${encodeURIComponent(req.query.type)}`); 
});

1.2 DOM 型 XSS

DOM 型 XSS 攻擊，實(shí)際上就是前端 JavaScript 代碼不夠嚴(yán)謹(jǐn)，把不可信的內(nèi)容插入到了頁面。在使用 .innerHTML、.outerHTML、.appendChild、document.write()等API時(shí)要特別小心，不要把不可信的數(shù)據(jù)作為 HTML 插到頁面上，盡量使用 .innerText、.textContent、.setAttribute() 等。

DOM 型 XSS 的攻擊步驟：

攻擊者構(gòu)造出特殊數(shù)據(jù)，其中包含惡意代碼。

用戶瀏覽器執(zhí)行了惡意代碼。

惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。

如何防范 DOM 型 XSS 攻擊

防范 DOM 型 XSS 攻擊的核心就是對(duì)輸入內(nèi)容進(jìn)行轉(zhuǎn)義(DOM 中的內(nèi)聯(lián)事件監(jiān)聽器和鏈接跳轉(zhuǎn)都能把字符串作為代碼運(yùn)行，需要對(duì)其內(nèi)容進(jìn)行檢查)。

1.對(duì)于url鏈接(例如圖片的src屬性)，那么直接使用 encodeURIComponent 來轉(zhuǎn)義。

2.非url，我們可以這樣進(jìn)行編碼：

function encodeHtml(str) {
    return str.replace(/"/g, """)
            .replace(/"/g, "'")
            .replace(//g, ">");
}

DOM 型 XSS 攻擊中，取出和執(zhí)行惡意代碼由瀏覽器端完成，屬于前端 JavaScript 自身的安全漏洞。

1.3 存儲(chǔ)型XSS

惡意腳本永久存儲(chǔ)在目標(biāo)服務(wù)器上。當(dāng)瀏覽器請(qǐng)求數(shù)據(jù)時(shí)，腳本從服務(wù)器傳回并執(zhí)行，影響范圍比反射型和DOM型XSS更大。存儲(chǔ)型XSS攻擊的原因仍然是沒有做好數(shù)據(jù)過濾：前端提交數(shù)據(jù)至服務(wù)端時(shí)，沒有做好過濾；服務(wù)端在接受到數(shù)據(jù)時(shí)，在存儲(chǔ)之前，沒有做過濾；前端從服務(wù)端請(qǐng)求到數(shù)據(jù)，沒有過濾輸出。

存儲(chǔ)型 XSS 的攻擊步驟：

攻擊者將惡意代碼提交到目標(biāo)網(wǎng)站的數(shù)據(jù)庫中。

用戶打開目標(biāo)網(wǎng)站時(shí)，網(wǎng)站服務(wù)端將惡意代碼從數(shù)據(jù)庫取出，拼接在 HTML 中返回給瀏覽器。

用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行。

惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。

這種攻擊常見于帶有用戶保存數(shù)據(jù)的網(wǎng)站功能，如論壇發(fā)帖、商品評(píng)論、用戶私信等。

如何防范存儲(chǔ)型XSS攻擊：

前端數(shù)據(jù)傳遞給服務(wù)器之前，先轉(zhuǎn)義/過濾(防范不了抓包修改數(shù)據(jù)的情況)

服務(wù)器接收到數(shù)據(jù)，在存儲(chǔ)到數(shù)據(jù)庫之前，進(jìn)行轉(zhuǎn)義/過濾

前端接收到服務(wù)器傳遞過來的數(shù)據(jù)，在展示到頁面前，先進(jìn)行轉(zhuǎn)義/過濾

除了謹(jǐn)慎的轉(zhuǎn)義，我們還需要其他一些手段來防范XSS攻擊:

1.Content Security Policy

在服務(wù)端使用 HTTP的 Content-Security-Policy 頭部來指定策略，或者在前端設(shè)置 meta 標(biāo)簽。

例如下面的配置只允許加載同域下的資源：

Content-Security-Policy: default-src "self"

前端和服務(wù)端設(shè)置 CSP 的效果相同，但是meta無法使用report

嚴(yán)格的 CSP 在 XSS 的防范中可以起到以下的作用：

禁止加載外域代碼，防止復(fù)雜的攻擊邏輯。

禁止外域提交，網(wǎng)站被攻擊后，用戶的數(shù)據(jù)不會(huì)泄露到外域。

禁止內(nèi)聯(lián)腳本執(zhí)行（規(guī)則較嚴(yán)格，目前發(fā)現(xiàn) GitHub 使用）。

禁止未授權(quán)的腳本執(zhí)行（新特性，Google Map 移動(dòng)版在使用）。

合理使用上報(bào)可以及時(shí)發(fā)現(xiàn) XSS，利于盡快修復(fù)問題。

2.輸入內(nèi)容長度控制

對(duì)于不受信任的輸入，都應(yīng)該限定一個(gè)合理的長度。雖然無法完全防止 XSS 發(fā)生，但可以增加 XSS 攻擊的難度。

3.輸入內(nèi)容限制

對(duì)于部分輸入，可以限定不能包含特殊字符或者僅能輸入數(shù)字等。

4.其他安全措施

HTTP-only Cookie: 禁止 JavaScript 讀取某些敏感 Cookie，攻擊者完成 XSS 注入后也無法竊取此 Cookie。

驗(yàn)證碼：防止腳本冒充用戶提交危險(xiǎn)操作。

點(diǎn)擊查看更多

屏幕并不是唯一的輸出機(jī)制，比如說屏幕上看不見的元素（隱藏的元素），其中一些依然能夠被讀屏軟件閱讀出來（因?yàn)樽x屏軟件依賴于可訪問性樹來闡述）。為了消除它們之間的歧義，我們將其歸為三大類：

完全隱藏：元素從渲染樹中消失，不占據(jù)空間。

視覺上的隱藏：屏幕中不可見，占據(jù)空間。

語義上的隱藏：讀屏軟件不可讀，但正常占據(jù)空。

1.display 屬性(不占據(jù)空間)

display: none;

2.hidden 屬性 (不占據(jù)空間)

HTML5 新增屬性，相當(dāng)于 display: none

1.利用 position 和 盒模型 將元素移出可視區(qū)范圍

設(shè)置 posoition 為 absolute 或 fixed，通過設(shè)置 top、left 等值，將其移出可視區(qū)域。(可視區(qū)域不占位)

position:absolute;
left: -99999px;

設(shè)置 position 為 relative，通過設(shè)置 top、left 等值，將其移出可視區(qū)域。（可視區(qū)域占位）

position: relative;
left: -99999px;

如希望其在可視區(qū)域不占位置，需同時(shí)設(shè)置 height: 0;

設(shè)置 margin 值，將其移出可視區(qū)域范圍（可視區(qū)域占位）。

margin-left: -99999px;

如果希望其在可視區(qū)域不占位，需同時(shí)設(shè)置 height: 0;

2.利用 transfrom

縮放(占據(jù)空間)

transform: scale(0);

如果希望不占據(jù)空間，需同時(shí)設(shè)置 height: 0

移動(dòng) translateX, translateY(占據(jù)空間)

transform: translateX(-99999px);

如果希望不占據(jù)空間，需同時(shí)設(shè)置 height: 0

旋轉(zhuǎn) rotate (占據(jù)空間)

transform: rotateY(90deg);

3.設(shè)置其大小為0

寬高為0，字體大小為0：

height: 0;
width: 0;
font-size: 0;

寬高為0，超出隱藏:

height: 0;
width: 0;
overflow: hidden;

4.設(shè)置透明度為0 (占據(jù)空間)

opacity: 0;

5.visibility屬性 (占據(jù)空間)

visibility: hidden

6.層級(jí)覆蓋，z-index 屬性 (占據(jù)空間)

position: relative;
z-index: -999;

再設(shè)置一個(gè)層級(jí)較高的元素覆蓋在此元素上。

7.clip-path 裁剪 (占據(jù)空間)

clip-path: polygon(0 0, 0 0, 0 0, 0 0);

aria-hidden 屬性 (占據(jù)空間)

讀屏軟件不可讀，占據(jù)空間，可見。

點(diǎn)擊查看更多

在說瀏覽器事件代理機(jī)制原理之前，我們首先了解一下事件流的概念，早期瀏覽器，IE采用的是事件捕獲事件流，而Netscape采用的則是事件冒泡。"DOM2級(jí)事件"把事件流分為三個(gè)階段，捕獲階段、目標(biāo)階段、冒泡階段?，F(xiàn)代瀏覽器也都遵循此規(guī)范。

事件代理又稱為事件委托，在祖先級(jí) DOM 元素綁定一個(gè)事件，當(dāng)觸發(fā)子孫級(jí)DOM元素的事件時(shí)，利用事件冒泡的原理來觸發(fā)綁定在祖先級(jí) DOM 的事件。因?yàn)槭录?huì)從目標(biāo)元素一層層冒泡至 document 對(duì)象。

添加到頁面上的事件數(shù)量會(huì)影響頁面的運(yùn)行性能，如果添加的事件過多，會(huì)導(dǎo)致網(wǎng)頁的性能下降。采用事件代理的方式，可以大大減少注冊(cè)事件的個(gè)數(shù)。

事件代理的當(dāng)時(shí)，某個(gè)子孫元素是動(dòng)態(tài)增加的，不需要再次對(duì)其進(jìn)行事件綁定。

不用擔(dān)心某個(gè)注冊(cè)了事件的DOM元素被移除后，可能無法回收其事件處理程序，我們只要把事件處理程序委托給更高層級(jí)的元素，就可以避免此問題。

允許給一個(gè)事件注冊(cè)多個(gè)監(jiān)聽。

提供了一種更精細(xì)的手段控制 listener 的觸發(fā)階段(可以選擇捕獲或者是冒泡)。

對(duì)任何 DOM 元素都是有效的，而不僅僅是對(duì) HTML 元素有效。

addEventListener 接受3個(gè)參數(shù)，分別是要處理的事件名、實(shí)現(xiàn)了 EventListener 接口的對(duì)象或者是一個(gè)函數(shù)、一個(gè)對(duì)象/一個(gè)布爾值。

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);

options(對(duì)象) | 可選

capture: Boolean。true 表示在捕獲階段觸發(fā)，false表示在冒泡階段觸發(fā)。默認(rèn)是 false。

once:Boolean。true 表示listener 在添加之后最多只調(diào)用一次，listener 會(huì)在其被調(diào)用之后自動(dòng)移除。默認(rèn)是 false。

passive: Boolean。true 表示 listener 永遠(yuǎn)不會(huì)調(diào)用 preventDefault()。如果 listener 仍然調(diào)用了這個(gè)函數(shù)，客戶端將會(huì)忽略它并拋出一個(gè)控制臺(tái)警告。默認(rèn)是 false。

useCapture(Boolean) | 可選

useCapture 默認(rèn)為 false。表示冒泡階段調(diào)用事件處理程序，若設(shè)置為 true，表示在捕獲階段調(diào)用事件處理程序。

如將頁面中的所有click事件都代理到document上:

document.addEventListener("click", function (e) {
    console.log(e.target);
    /**
    * 捕獲階段調(diào)用調(diào)用事件處理程序，eventPhase是 1; 
    * 處于目標(biāo)，eventPhase是2 
    * 冒泡階段調(diào)用事件處理程序，eventPhase是 3；
    */ 
    console.log(e.eventPhase);
    
}, false);

與 addEventListener 相對(duì)應(yīng)的是 removeEventListener,用于移除事件監(jiān)聽。

點(diǎn)擊查看更多

setTimeout 只能保證延時(shí)或間隔不小于設(shè)定的時(shí)間。因?yàn)樗鼘?shí)際上只是將回調(diào)添加到了宏任務(wù)隊(duì)列中，但是如果主線程上有任務(wù)還沒有執(zhí)行完成，它必須要等待。

如果你對(duì)前面這句話不是非常理解，那么有必要了解一下 JS的運(yùn)行機(jī)制。

（1）所有同步任務(wù)都在主線程上執(zhí)行，形成一個(gè)執(zhí)行棧（execution context stack）。

（2）主線程之外，還存在"任務(wù)隊(duì)列"(task queue)。

（3）一旦"執(zhí)行棧"中的所有同步任務(wù)執(zhí)行完畢，系統(tǒng)就會(huì)讀取"任務(wù)隊(duì)列"，看看里面有哪些事件。那些對(duì)應(yīng)的異步任務(wù)，于是結(jié)束等待狀態(tài)，進(jìn)入執(zhí)行棧，開始執(zhí)行。

（4）主線程不斷重復(fù)上面的第三步。

如 setTimeout(()=>{callback();}, 1000) ，即表示在1s之后將 callback 放到宏任務(wù)隊(duì)列中，當(dāng)1s的時(shí)間到達(dá)時(shí)，如果主線程上有其它任務(wù)在執(zhí)行，那么 callback 就必須要等待，另外 callback 的執(zhí)行也需要時(shí)間，因此 setTimeout 的時(shí)間間隔是有誤差的，它只能保證延時(shí)不小于設(shè)置的時(shí)間。

我們只能減少執(zhí)行多次的 setTimeout 的誤差，例如倒計(jì)時(shí)功能。

倒計(jì)時(shí)的時(shí)間通常都是從服務(wù)端獲取的。造成誤差的原因：

1.沒有考慮誤差時(shí)間（函數(shù)執(zhí)行的時(shí)間/其它代碼的阻塞）

2.沒有考慮瀏覽器的“休眠”

完全消除 setTimeout的誤差是不可能的，但是我們減少 setTimeout 的誤差。通過對(duì)下一次任務(wù)的調(diào)用時(shí)間進(jìn)行修正，來減少誤差。

let count = 0;
let countdown = 5000; //服務(wù)器返回的倒計(jì)時(shí)時(shí)間
let interval = 1000;
let startTime = new Date().getTime();
let timer = setTimeout(countDownStart, interval); //首次執(zhí)行
//定時(shí)器測(cè)試
function countDownStart() {
    count++;
    const offset = new Date().getTime() - (startTime + count * 1000);
    const nextInterval = interval - offset; //修正后的延時(shí)時(shí)間
    if (nextInterval < 0) {
        nextInterval = 0;
    }
    countdown -= interval;
    console.log("誤差：" + offset + "ms，下一次執(zhí)行：" + nextInterval + "ms后，離活動(dòng)開始還有：" + countdown + "ms");
    if (countdown <= 0) {
        clearTimeout(timer);
    } else {
        timer = setTimeout(countDownStart, nextInterval);
    }
}

如果當(dāng)前頁面是不可見的，那么倒計(jì)時(shí)會(huì)出現(xiàn)大于100ms的誤差時(shí)間。因此在頁面顯示時(shí)，應(yīng)該重新從服務(wù)端獲取剩余時(shí)間進(jìn)行倒計(jì)時(shí)。當(dāng)然，為了更好的性能，當(dāng)?shù)褂?jì)時(shí)不可見(Tab頁切換/倒計(jì)時(shí)內(nèi)容不在可視區(qū)時(shí))，可以選擇停止倒計(jì)時(shí)。

為此，我們可以監(jiān)聽 visibityChange 事件進(jìn)行處理。

點(diǎn)擊查看更多

[1] MDN addEventListener

[2] https://www.ecma-internationa...

[3] http://www.xuanfengge.com/js-...

謝謝各位小伙伴愿意花費(fèi)寶貴的時(shí)間閱讀本文，如果本文給了您一點(diǎn)幫助或者是啟發(fā)，請(qǐng)不要吝嗇你的贊和Star，您的肯定是我前進(jìn)的最大動(dòng)力。https://github.com/YvetteLau/...

關(guān)注公眾號(hào)，加入技術(shù)交流群。