手機(jī)站首頁(yè)散文詩(shī)歌雜文隨筆日記小小說(shuō)

散文網(wǎng) » 科技 »學(xué)習(xí) » web前端網(wǎng)絡(luò)安全：詳解瀏覽器跨域訪問(wèn)的幾種辦法！

web前端網(wǎng)絡(luò)安全：詳解瀏覽器跨域訪問(wèn)的幾種辦法！

2021-06-11 14:36 作者:C語(yǔ)言編程__Plus 0人讀過(guò) | 我要投稿

摘要：本文討論web前端安全問(wèn)題以及應(yīng)對(duì)措施，瀏覽器同源策略以及對(duì)資源跨域訪問(wèn)的幾種解決方案

今天說(shuō)一說(shuō)和前端相關(guān)的Web安全問(wèn)題和開(kāi)發(fā)過(guò)程中經(jīng)常遇到的跨域問(wèn)題。

1.1 XSS

基本原理

XSS (Cross-Site Scripting)，跨站腳本攻擊通過(guò)在用戶的瀏覽器內(nèi)運(yùn)行非法的HTML標(biāo)簽或JavaScript進(jìn)行的一種攻擊。

攻擊手段

攻擊者往?Web?頁(yè)面里插入惡意網(wǎng)頁(yè)腳本代碼，當(dāng)用戶瀏覽該頁(yè)面時(shí)，嵌入Web?頁(yè)面里面的腳本代碼會(huì)被執(zhí)行，從而達(dá)到攻擊者盜取用戶信息或其他侵犯用戶安全隱私的目的。

XSS攻擊分類

反射型xss攻擊。通過(guò)給被攻擊者發(fā)送帶有惡意腳本的URL或?qū)⒉豢尚艃?nèi)容插入頁(yè)面，當(dāng)URL地址被打開(kāi)或頁(yè)面被執(zhí)行時(shí)，瀏覽器解析、執(zhí)行惡意腳本。

反射型xss的攻擊步驟：1.?攻擊者構(gòu)造出特殊的?URL或特殊數(shù)據(jù)；2.?用戶打開(kāi)帶有惡意代碼的?URL?時(shí)，Web服務(wù)器將惡意代碼從?URL?中取出，拼接在?HTML?中返回給瀏覽器；3.?用戶瀏覽器接收到響應(yīng)后解析執(zhí)行，混在其中的惡意代碼也被執(zhí)行；4.?惡意代碼竊取用戶數(shù)據(jù)并發(fā)送到攻擊者的網(wǎng)站，或者冒充用戶的行為，調(diào)用目標(biāo)網(wǎng)站接口執(zhí)行攻擊者指定的操作。

防御：1.Web頁(yè)面渲染的所有內(nèi)容或數(shù)據(jù)都必須來(lái)自服務(wù)端；2.?客戶端對(duì)用戶輸入的內(nèi)容進(jìn)行安全符轉(zhuǎn)義，服務(wù)端對(duì)上交內(nèi)容進(jìn)行安全轉(zhuǎn)義；3.避免拼接html。

存儲(chǔ)型xss。惡意腳本被存儲(chǔ)在目標(biāo)服務(wù)器上。當(dāng)瀏覽器請(qǐng)求數(shù)據(jù)時(shí)，腳本從服務(wù)器傳回瀏覽器去執(zhí)行。

存儲(chǔ)型xss的攻擊步驟：1.?攻擊者將惡意代碼提交到目標(biāo)網(wǎng)站的數(shù)據(jù)庫(kù)中；2.用戶瀏覽到目標(biāo)網(wǎng)站時(shí)，前端頁(yè)面獲得數(shù)據(jù)庫(kù)中讀出的惡意腳本時(shí)將其渲染執(zhí)行。

防御：防范存儲(chǔ)型XSS攻擊，需要我們?cè)黾幼址倪^(guò)濾：前端輸入時(shí)過(guò)濾；服務(wù)端增加過(guò)濾；前端輸出時(shí)過(guò)濾。

通常有三種方式防御XSS攻擊：1.?Content Security Policy（CSP）。CSP?本質(zhì)上就是建立白名單，開(kāi)發(fā)者明確告訴瀏覽器哪些外部資源可以加載和執(zhí)行。我們只需要配置規(guī)則，如何攔截是由瀏覽器自己實(shí)現(xiàn)的。我們可以通過(guò)這種方式來(lái)盡量減少?XSS?攻擊。通?？梢酝ㄟ^(guò)兩種方式開(kāi)啟，例如只允許加載相同域下的資源：

設(shè)置?HTTP Header?中的?CSP（Content-Security-Policy: default-src 'self'）

設(shè)置meta?標(biāo)簽的方式（<meta http-equiv="Content-Security-Policy" content="form-action 'self';">）

2.?轉(zhuǎn)義字符。用戶的輸入永遠(yuǎn)不可信任的，最普遍的做法就是轉(zhuǎn)義輸入輸出的內(nèi)容，對(duì)于引號(hào)、尖括號(hào)、斜杠進(jìn)行轉(zhuǎn)義：

但是對(duì)于顯示富文本來(lái)說(shuō)，顯然不能通過(guò)上面的辦法來(lái)轉(zhuǎn)義所有字符，因?yàn)檫@樣會(huì)把需要的格式也過(guò)濾掉。對(duì)于這種情況，通常采用白名單過(guò)濾的辦法：

經(jīng)過(guò)白名單過(guò)濾，dom中包含的<script>標(biāo)簽將不會(huì)被執(zhí)行。

HTTP-only Cookie:?禁止?JavaScript?讀取某些敏感?cookie，使得?cookie只有http能夠訪問(wèn)。

1.2 CSRF

基本概念

CSRF（Cross-site request forgery跨站請(qǐng)求偽造：攻擊者誘導(dǎo)受害者進(jìn)入第三方網(wǎng)站，在第三方網(wǎng)站中，向被攻擊網(wǎng)站發(fā)送跨站請(qǐng)求。利用受害者在被攻擊網(wǎng)站已經(jīng)獲取的注冊(cè)憑證，繞過(guò)后臺(tái)的用戶驗(yàn)證，達(dá)到冒充用戶對(duì)被攻擊的網(wǎng)站執(zhí)行某項(xiàng)操作的目的。

CSRF攻擊類型

主動(dòng)型攻擊。用戶訪問(wèn)網(wǎng)站A并在瀏覽器保存A的登錄狀態(tài)（cookie等信息），攻擊者誘導(dǎo)受害者訪問(wèn)網(wǎng)站B，網(wǎng)站B含有訪問(wèn)A接口的惡意代碼，受害者訪問(wèn)B時(shí)帶著A的登錄狀態(tài)，攻擊者便可以冒充用戶執(zhí)行對(duì)A的惡意操作。

被動(dòng)型攻擊。攻擊者在網(wǎng)站A發(fā)布帶有惡意鏈接的評(píng)論或內(nèi)容（提交對(duì)A帶有增刪改的誘導(dǎo)型標(biāo)簽），當(dāng)其他擁有登錄狀態(tài)的受害者點(diǎn)擊評(píng)論的惡意鏈接時(shí)，就會(huì)冒用受害者登錄憑證發(fā)起攻擊。

CSRF攻擊防范

驗(yàn)證HTTP Referer字段。在HTTP頭中有Referer字段，他記錄該HTTP請(qǐng)求的來(lái)源地址，如果跳轉(zhuǎn)的網(wǎng)站與來(lái)源地址相符，那就是合法的，如果不符則可能是csrf攻擊，拒絕該請(qǐng)求。

SameSite。可以對(duì)?Cookie?設(shè)置?SameSite?屬性。該屬性表示?Cookie?不隨著跨域請(qǐng)求發(fā)送，可以很大程度減少?CSRF?的攻擊。

請(qǐng)求中加入token。服務(wù)端給用戶生成一個(gè)token，加密后傳遞給用戶，用戶在提交請(qǐng)求時(shí)，需要攜帶這個(gè)token，服務(wù)端發(fā)現(xiàn)token不存在或者token校驗(yàn)不成功，那么就拒絕該請(qǐng)求。

1.3?流量劫持

DNS劫持

DNS劫持就是通過(guò)劫持了DNS服務(wù)器，通過(guò)某些手段來(lái)取得某個(gè)域名的解析控制權(quán)，進(jìn)而修改此域名的解析結(jié)果，導(dǎo)致對(duì)該域名的訪問(wèn)由原IP地址轉(zhuǎn)入到修改后的IP，其結(jié)果就是對(duì)特定的網(wǎng)站不能訪問(wèn)或訪問(wèn)的是假網(wǎng)址。

防御：使用https校驗(yàn)通信雙方身份和數(shù)據(jù)完整性。

點(diǎn)擊劫持

攻擊者構(gòu)建了一個(gè)非常有吸引力的網(wǎng)頁(yè)，將被攻擊的頁(yè)面放置在當(dāng)前頁(yè)面的?iframe?中，使用樣式將?iframe?疊加到非常有吸引力內(nèi)容的上方，將iframe設(shè)置為100%透明，其實(shí)就是通過(guò)覆蓋不可見(jiàn)的頁(yè)面，誘導(dǎo)用戶點(diǎn)擊而造成的攻擊行為。

防御措施。1. X-FRAME-OPTIONS設(shè)置允許iframe加載的域? ??2.?限制iframe頁(yè)面中的JavaScript腳本執(zhí)行。

無(wú)論是xss、csrf還是點(diǎn)擊劫持，上面討論的這幾種攻擊屬于前端攻擊，原因大多是開(kāi)發(fā)者的腳本或模板代碼存在不安全的隱患或是沒(méi)有考慮網(wǎng)絡(luò)傳輸安全問(wèn)題。下面簡(jiǎn)單說(shuō)一說(shuō)惡意攻擊利用網(wǎng)站后臺(tái)漏洞發(fā)起的攻擊。

1.4 SQL注入

SQL?注入漏洞存在的原因，就是拼接?SQL?參數(shù)。也就是將用于輸入的查詢參數(shù)，直接拼接在?SQL?語(yǔ)句中，惡意攻擊者可以構(gòu)造特殊的sql語(yǔ)句繞過(guò)安全驗(yàn)證。

SQL注入條件：1.攻擊者可以控制輸入的數(shù)據(jù)；2.服務(wù)器要執(zhí)行的代碼拼接了被控制的數(shù)據(jù)。

SQL注入防御。1.?嚴(yán)格限制Web應(yīng)用的數(shù)據(jù)庫(kù)的操作權(quán)限；2.?對(duì)進(jìn)入數(shù)據(jù)庫(kù)的特殊字符（’，”，，<，>，&，*，;?等）進(jìn)行轉(zhuǎn)義處理，或編碼轉(zhuǎn)換，類似防御xss攻擊時(shí)對(duì)輸入轉(zhuǎn)義；3.?所有的查詢語(yǔ)句建議使用數(shù)據(jù)庫(kù)提供的參數(shù)化查詢接口，如使用占位參數(shù)或?qū)ο箨P(guān)系映射ORM。

1.5 DDOS攻擊

DOS攻擊通過(guò)在網(wǎng)站的各個(gè)環(huán)節(jié)進(jìn)行攻擊，使得整個(gè)流程跑不起來(lái)，以達(dá)到癱瘓服務(wù)為目的。最常見(jiàn)的就是發(fā)送大量請(qǐng)求導(dǎo)致服務(wù)器過(guò)載宕機(jī)。DDOS攻擊的原理就是利用分布式的客戶端，向目標(biāo)發(fā)起大量看上去合法的請(qǐng)求，消耗/占用大量資源，從而達(dá)到拒絕服務(wù)的目的。

攻擊方式：1.端口掃描；2.ping洪水；3.SYN洪水；4.FTP跳轉(zhuǎn)攻擊；

DDOS防范。1.在服務(wù)器上刪除未使用的服務(wù)，關(guān)閉未使用的端口。2.?進(jìn)行實(shí)時(shí)監(jiān)控，封禁某些惡意密集型請(qǐng)求IP段；3.?進(jìn)行靜態(tài)資源緩存，隔離源文件的訪問(wèn)，比如CDN加速；4.?隱藏服務(wù)器的真實(shí)IP地址

3?跨域和同源策略

同源策略是一個(gè)重要的安全策略，它用于限制一個(gè)源的文檔或者它加載的腳本如何能與另一個(gè)源的資源進(jìn)行交互。它能幫助阻隔惡意文檔，減少可能被攻擊的媒介。所謂同源是指“協(xié)議+域名+端口”三者均相同。

同源策略限制了客戶端js代碼的以下行為：

1.Cookie、LocalStorage?和?IndexDB?無(wú)法讀取；

2.DOM節(jié)點(diǎn)。來(lái)自一個(gè)源的js只能讀寫(xiě)自己源的DOM樹(shù)不能讀取其他源的DOM樹(shù)。如果兩個(gè)網(wǎng)頁(yè)不同源，就無(wú)法拿到對(duì)方的DOM。典型的例子是iframe窗口和window.open方法打開(kāi)的窗口，它們與父窗口無(wú)法通信。

網(wǎng)站不開(kāi)啟同源策略，釣魚(yú)網(wǎng)站便可以使用iframe標(biāo)簽加載中國(guó)銀行登錄界面，執(zhí)行腳本進(jìn)而拿到用戶名密碼。

當(dāng)設(shè)置了同源策略，父子窗口執(zhí)行獲取對(duì)方DOM時(shí)會(huì)報(bào)錯(cuò)。

3.AJAX請(qǐng)求限制

跨域并不是請(qǐng)求發(fā)不出去，請(qǐng)求能發(fā)出去，服務(wù)端能收到請(qǐng)求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。

除了架設(shè)服務(wù)器代理，還有以下幾種方法規(guī)避同源限制：JSONP，WebSocket，CORS，本文詳細(xì)討論下后兩種方法的實(shí)現(xiàn)。

WebSocket。WebSocket是一種通信協(xié)議，使用ws://（非加密）和wss://（加密）作為協(xié)議前綴。該協(xié)議不實(shí)行同源政策，只要服務(wù)器支持，就可以通過(guò)它進(jìn)行跨源通信。WebSocket?是一種雙向通信協(xié)議，在建立連接之后，WebSocket?的?server?與?client?都能主動(dòng)向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。Websocket請(qǐng)求頭信息包含一個(gè)origin字段，服務(wù)器根據(jù)這個(gè)字段判斷是否允許本次通信。

CORS。CORS跨域資源共享是W3C標(biāo)準(zhǔn)，是解決跨域Ajax請(qǐng)求的最常見(jiàn)解決方法。整個(gè)CORS通信過(guò)程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，CORS通信與同源的AJAX通信沒(méi)有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺(jué)。

瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求：

（1)?請(qǐng)求方法是以下三種方法之一：HEAD、GET、POST ?

（2）HTTP的頭信息不超出以下幾種字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type：只限于三個(gè)值application/x-www-form-urlencoded、multipart/form-data、text/plain

對(duì)于簡(jiǎn)單請(qǐng)求，瀏覽器直接發(fā)出CORS請(qǐng)求。具體來(lái)說(shuō)，就是在頭信息之中，增加一個(gè)Origin字段，該字段用來(lái)說(shuō)明，本次請(qǐng)求來(lái)自哪個(gè)源。服務(wù)器根據(jù)這個(gè)值，決定是否同意這次請(qǐng)求。如果Origin指定的源，不在許可范圍內(nèi)，服務(wù)器會(huì)返回一個(gè)正常的HTTP回應(yīng)。若該響應(yīng)的頭信息沒(méi)有包含Access-Control-Allow-Origin字段，就拋出一個(gè)錯(cuò)誤，被XMLHttpRequest的onerror回調(diào)函數(shù)捕獲。若Origin指定的域名在許可范圍內(nèi)，服務(wù)器返回的響應(yīng)，會(huì)多出幾個(gè)頭信息字段。其中Access-Control-Allow-Origin字段是必須的。它的值要么是請(qǐng)求時(shí)Origin字段的值，要么是一個(gè)*，表示接受任意域名的請(qǐng)求。

對(duì)于非簡(jiǎn)單請(qǐng)求，在正式通信之前，會(huì)增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight）。瀏覽器先詢問(wèn)服務(wù)器，當(dāng)前網(wǎng)頁(yè)所在的域名是否在服務(wù)器的許可名單之中，以及可以使用哪些HTTP方法和頭信息字段。只有得到肯定答復(fù)，瀏覽器才會(huì)發(fā)出正式的XMLHttpRequest請(qǐng)求，否則就報(bào)錯(cuò)。

"預(yù)檢"請(qǐng)求用的請(qǐng)求方法是OPTIONS，表示這個(gè)請(qǐng)求是用來(lái)詢問(wèn)的。頭信息里面，關(guān)鍵字段是Origin，表示請(qǐng)求來(lái)自哪個(gè)源。

除了Origin字段，"預(yù)檢"請(qǐng)求的頭信息包括兩個(gè)特殊字段。

（1）Access-Control-Request-Method。該字段是必須的，用來(lái)列出瀏覽器的CORS請(qǐng)求會(huì)用到哪些HTTP方法

（2）Access-Control-Request-Headers。該字段是一個(gè)逗號(hào)分隔的字符串，指定瀏覽器CORS請(qǐng)求會(huì)額外發(fā)送的頭信息字段。

預(yù)檢請(qǐng)求的回應(yīng)。

服務(wù)器收到"預(yù)檢"請(qǐng)求以后，檢查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，確認(rèn)允許跨源請(qǐng)求，就可以做出回應(yīng)?；貞?yīng)最關(guān)鍵的是Access-Control-Allow-Origin字段，表示允許該源的請(qǐng)求，若沒(méi)有任何CORS相關(guān)頭信息字段則說(shuō)明服務(wù)器否認(rèn)該請(qǐng)求。若服務(wù)器允許，則Access-Control-Allow-Methods字段是必須的，它的值是一個(gè)逗號(hào)分隔的字符串，表明服務(wù)器支持的方法。如果預(yù)檢請(qǐng)求包含Access-Control-Request-Headers字段，則返回體中該字段也是必須的，它也是一個(gè)逗號(hào)分隔的字符串，表明服務(wù)器支持的所有頭信息字段，不限于瀏覽器在"預(yù)檢"中請(qǐng)求的字段。預(yù)檢請(qǐng)求得到允許回應(yīng)后，瀏覽器便發(fā)送正常CORS請(qǐng)求。

最近在開(kāi)發(fā)一個(gè)前端poc項(xiàng)目時(shí)遇到了跨域資源訪問(wèn)被限制的問(wèn)題，在本地啟動(dòng)angular項(xiàng)目，其他人可以通過(guò)ip訪問(wèn)到靜態(tài)資源，發(fā)送ajax請(qǐng)求時(shí)被限制。于是想通過(guò)配置代理的方式解決這個(gè)跨域問(wèn)題：在和package.json同級(jí)的目錄中新建proxy.conf.json文件，target字段是后端服務(wù)真實(shí)的ip，changeOrigin字段設(shè)置為true，關(guān)閉secure字段。