網(wǎng)站安全性:改善前端安全性且不被黑客入侵的13種方法
我們越來越依賴數(shù)字設(shè)備來管理購物,銀行業(yè)務(wù)和整體通信。毋庸置疑,與后端開發(fā)人員一樣,作為設(shè)計(jì)師和前端開發(fā)人員,我們有責(zé)任幫助保護(hù)客戶免受欺詐和安全問題的侵害。
無論您是開發(fā)電子商務(wù)網(wǎng)站(Shopify負(fù)責(zé)大部分風(fēng)險(xiǎn))還是開發(fā)其他類型的在線體驗(yàn),您都需要注意許多陷阱。在本文中,我們采訪了七位安全專家,以了解最常見的前端漏洞,以及如何降低風(fēng)險(xiǎn)并避免被黑客入侵。
通過Shopify合作伙伴計(jì)劃發(fā)展您的業(yè)務(wù)
無論您提供市場營銷,定制服務(wù)還是
網(wǎng)站設(shè)計(jì)和開發(fā)服務(wù),Shopify合作伙伴計(jì)劃都將助您成功。免費(fèi)加入并獲得收益分享機(jī)會(huì),發(fā)展業(yè)務(wù)的工具以及充滿激情的商業(yè)社區(qū)。
1.安全必須是開發(fā)過程的一部分
最近,社區(qū)中的前端性能引起了很多關(guān)注。它使軟件工程師Benedek Gagyi意識到它與安全性有多相似。
他說:“當(dāng)我聽到諸如“您必須盡早將其添加到您的流程中”或“反對您的努力的最強(qiáng)大力量是開發(fā)人員的便利性”之類的陳述時(shí),我總是會(huì)點(diǎn)頭,因?yàn)樗鼈冊谛阅芎桶踩陨隙际侨绱恕?rdquo;解釋。“很顯然,可以在開發(fā)生命周期的后期修復(fù)所有與安全性相關(guān)的錯(cuò)誤和漏洞,但是這要困難得多,而且成本也更高。這就是為什么添加威脅建模會(huì)話和定期進(jìn)行安全性審查對于任何更大的開發(fā)步驟都至關(guān)重要的原因,這意味著安全性是設(shè)計(jì)使然,而不僅僅是補(bǔ)丁程序。”
Benedek指出,雖然認(rèn)知很重要,但應(yīng)該更多地討論實(shí)際的開發(fā)人員經(jīng)驗(yàn)。
“我期望使用庫和框架編寫的軟件中的安全性錯(cuò)誤更少,這使得編寫安全軟件變得容易。這很簡單,對吧?前端世界中的一個(gè)很好的例子是,大型框架如何通過提供有風(fēng)險(xiǎn)的操作名稱(例如dangerouslySetInnerHTMLReact或bypassSecurityTrustAngular中的API )來讓您知道是否要跨站點(diǎn)腳本(XSS)攻擊。
2.使用自動(dòng)處理安全性的現(xiàn)代框架
JavaScript框架已成為現(xiàn)代Web開發(fā)的重要組成部分?,F(xiàn)在,大多數(shù)站點(diǎn)似乎都圍繞React,Vue或Angular之類的框架構(gòu)建。從安全角度來看,它們提供了顯著的好處。
Pragmatic Web Security的創(chuàng)始人兼安全編碼講師Philippe De Ryck說:“ Angular框架的轉(zhuǎn)世就是一個(gè)好的例子。” “ Angular自動(dòng)防御各種XSS攻擊媒介。它為通過{{}}的簡單輸出提供自動(dòng)編碼。使用時(shí),Angular會(huì)自動(dòng)清理輸出。當(dāng)使用變量URL或CSS時(shí),Angular還會(huì)自動(dòng)確保在這種情況下可以安全地使用這些值。” innerHTML
其他框架提供了類似的保護(hù),但是據(jù)Philippe稱,它們的保護(hù)范圍并不廣。盡管如此,使用任何現(xiàn)代框架都可以大大減少開發(fā)人員緩解XSS攻擊所需的風(fēng)險(xiǎn)。
您可能還會(huì)喜歡: Web安全基礎(chǔ)知識:每個(gè)開發(fā)人員都應(yīng)該知道的內(nèi)容。
3.避免典型的XSS錯(cuò)誤
雖然在使用現(xiàn)代JavaScript框架時(shí)不那么常見,但是仍然可以將無意的XSS缺陷編碼到您的前端。
數(shù)字創(chuàng)新機(jī)構(gòu)Paralla/upload/ad_content/xuanchuantu-1.jpg主任詹姆斯·霍爾(James Hall)表示:“假設(shè)我們想通過營銷電子郵件中的用戶名來解決用戶的問題。” “添加到查詢字符串,然后簡單地將其添加到DOM,將是一種快速的方法。”?name=James
例如:
document.querySelector('.tagline').innerHTML = nameFromQueryString
James警告說,使用如上所述的代碼意味著,任何人都可以將代碼注入您的網(wǎng)站并接管您的工作。他警告說,僅通過將名稱更改為,攻擊者就可以設(shè)計(jì)一個(gè)URL,該URL可以使偽造的付款頁面看起來像是從您的SSL加密網(wǎng)站提供的。
4.考慮可信類型
網(wǎng)站安全:可信類型
W3C的Trusted Types。
即使采取諸如輸出編碼或清理等對策,對于面向Web的應(yīng)用程序,XSS攻擊仍然是一個(gè)主要問題。開源安全公司Snyk的開發(fā)者,Node.js安全工作組成員Liran Tal警告說,諸如Angular或React之類的現(xiàn)代前端框架并非完全不受它的影響。
Liran建議使用Google的安全專家Krzysztof Kotowicz和Mike Samuel 提倡的一種新的瀏覽器API Trusted Types,以利用內(nèi)容安全策略規(guī)范(請參閱下文,第12頁)來定義與敏感API一起使用的數(shù)據(jù)源模板,從而解決XSS問題。如水槽。innerHTML
Trusted Types規(guī)范仍然需要完善,但是Liran要求開發(fā)人員選擇加入并開始使用此安全API。
他說:“幸運(yùn)的是,我們在前端社區(qū)中看到了認(rèn)可和采用的跡象。” “例如,React框架最近合并了一個(gè)拉取請求,以在新版本中進(jìn)一步擴(kuò)展對Trusted Types的支持。”
您可能還會(huì)喜歡: 業(yè)內(nèi)人士對Shopify所采用技術(shù)的關(guān)注。
5.考慮使用te/upload/ad_content/xuanchuantu-1.jpgtContent代替innerHTML
為了防止XSS攻擊,您可以使用DOMPurify之類的清理庫(請參閱下面的11下),但是前端顧問Zell Liew建議,如果僅更改文本,則可以使用te/upload/ad_content/xuanchuantu-1.jpgtContent代替innerHTML。
“假設(shè)您要從輸入字段中獲取文本值,然后將該文本值輸出到DOM中。這是獲取文本值的代碼:
const value = input.value
但是用戶可以嘗試輸入惡意代碼,例如以下代碼段:
如果使用innerHTML,則將創(chuàng)建
元素并運(yùn)行onerror處理程序。這就是XSS開始的地方。”
Zell建議te/upload/ad_content/xuanchuantu-1.jpgtContent改為使用,因?yàn)樗荒茌敵鑫谋?,并且不?huì)生成任何HTML。
“如果不生成HTML,就無法插入JavaScript,” Zell解釋道。您會(huì)
在DOM中看到,但JavaScript無法運(yùn)行。
6.分隔您的應(yīng)用程序
Web應(yīng)用程序通常構(gòu)建為單個(gè)應(yīng)用程序,并在瀏覽器中的單個(gè)來源中部署。例如,在中運(yùn)行的應(yīng)用程序https://app.e/upload/ad_content/xuanchuantu-1.jpgample.com提供了公共部分,經(jīng)過身份驗(yàn)證的部分甚至管理員功能。但是,Philippe De Ryck警告說,對應(yīng)用程序公共部分的成功攻擊也會(huì)自動(dòng)影響其他部分,從而可能造成重大損害。
他解釋說:“在后端,整體應(yīng)用程序通常分為較小的組件,每個(gè)組件單獨(dú)運(yùn)行。” “我們可以將類似的模式應(yīng)用于前端應(yīng)用程序。例如,我們可以將前端應(yīng)用程序分為一個(gè)公共部分,一個(gè)經(jīng)過身份驗(yàn)證的部分和一個(gè)管理部分。通過在一個(gè)單獨(dú)的部署每個(gè)部分起源,例如,https://public.e/upload/ad_content/xuanchuantu-1.jpgample.com,https://users.e/upload/ad_content/xuanchuantu-1.jpgample.com,和https://admin.e/upload/ad_content/xuanchuantu-1.jpgample.com-我們可以確保瀏覽器彼此隔離這些應(yīng)用程序“。
Philippe相信,分區(qū)化是減少客戶端漏洞影響的關(guān)鍵。“適當(dāng)?shù)姆指魧⒎乐箲?yīng)用程序公共部分的XSS漏洞也自動(dòng)損害用戶信息。”
您可能還會(huì)喜歡: 解構(gòu)Monolith:設(shè)計(jì)可大化開發(fā)人員生產(chǎn)力的軟件。
7.使用Google跟蹤代碼管理器時(shí)要小心
網(wǎng)站安全:谷歌標(biāo)簽管理器
在為個(gè)人和企業(yè)授予對Google跟蹤代碼管理器的訪問權(quán)限時(shí),您應(yīng)該非常小心。
使用Google跟蹤代碼管理器,可以輕松添加最新的跟蹤腳本,支持團(tuán)隊(duì)想要的聊天機(jī)器人以及用于用戶分析的Hotjar。
但是James Hall指出,雖然很想允許組織中的每個(gè)人(有時(shí)甚至是外部)訪問您的Google跟蹤代碼管理器,但您仍需要注意。
他警告說:“如果某個(gè)Google帳戶被黑客入侵,則可以向您的網(wǎng)站添加任意JavaScript。” “復(fù)雜的攻擊可能會(huì)將您的用戶帶到偽造的付款頁面,讓他們完成訂單,將錢匯給其他人!”
8.使用第三方腳本更具選擇性
即使不損害對Google跟蹤代碼管理器的訪問權(quán)限,您選擇添加的跟蹤腳本本身也可能會(huì)遭到黑客入侵。在基于JavaScript的Web應(yīng)用程序中使用第三方庫和開放源代碼組件是一種常見的做法,但是它使您暴露出只能在一定程度上控制的漏洞。
“如果您將“每周風(fēng)味”聊天窗口小部件添加到您的站點(diǎn),則任何有權(quán)訪問其服務(wù)器的人現(xiàn)在都可以修改您的網(wǎng)站,” James Hall警告說。“這發(fā)生在英國航空公司和Ticketmaster包括一個(gè)名為Feedify的推送通知庫時(shí)。”
James建議,對哪些第三方可以訪問您的頁面有更多選擇,這也將有助于您遵守歐盟的《通用數(shù)據(jù)保護(hù)條例》(GDPR)。您所提供的信息越少,使人們在您的隱私政策中了解的信息就越少,這意味著違反GDPR的可能性就更低。
James也建議不要考慮讓Shopify為您托管它,而不是讓其他第三方托管您的JavaScript框架。
他說:“與自動(dòng)熱鏈接最新版本的開源依賴項(xiàng)相比,他們在使您免受任何困擾方面要做得更好。”
您可能還會(huì)喜歡: 應(yīng)用程序開發(fā)人員需要了解的GDPR。
9.審核您的依賴項(xiàng)
您可能會(huì)使用許多本地構(gòu)建工具來創(chuàng)建前端,例如SCSS插件。James Hall建議確保您定期運(yùn)行npm audit以顯示易受攻擊的軟件包的列表并升級它們,以避免無意中將安全性問題包括到內(nèi)置的JavaScript文件中。
如果使用GitHub,它現(xiàn)在將標(biāo)記易受攻擊的依賴關(guān)系,并且還有Snyk之類的替代服務(wù),可以自動(dòng)檢查源代碼并打開請求請求以更改版本。
最后,如果您要為無法訪問Google跟蹤代碼管理器的客戶端構(gòu)建主題,James建議使用BuiltWith之類的工具進(jìn)行快速審核。
網(wǎng)站安全性:buildwith
BuiltWith使您能夠找出網(wǎng)站完全使用哪種工具和技術(shù)。
10.將子資源完整性用于第三方CDN托管
但是,有時(shí)您無法避免使用第三方。Snyk的Liran Tal指出,我們經(jīng)常使用外部托管的字體和CSS庫,并將它們導(dǎo)入具有內(nèi)容傳送網(wǎng)絡(luò)(CDN)的Web應(yīng)用程序中。
他問道:“如果有人訪問這些庫的代碼并將其替換為自己的惡意版本,將會(huì)發(fā)生什么?” “如果網(wǎng)絡(luò)介質(zhì)被破壞或發(fā)現(xiàn)不安全,將會(huì)發(fā)生什么?攻擊者獲得對構(gòu)建服務(wù)器或CDN交付的我們自己代碼的緩存或存儲的訪問權(quán)限,甚至可能損害我們自己的源代碼!”
為了幫助解決此問題,Liran建議使用Subresource Integrity,該規(guī)范可提供網(wǎng)頁中所使用資源的完整性的證明,并傳達(dá)其內(nèi)容未被篡改。使用完整性屬性聲明資源,該屬性利用在功能上使用資源之前瀏覽器驗(yàn)證的加密哈希。
James Hall同意,并說Subresource Integrity對于確保資產(chǎn)與您打算包含的資產(chǎn)相同非常有用。這是一個(gè)校驗(yàn)和,可確保您的腳本與以前的相同:
11. HTML編碼還不夠
WebStoating的聯(lián)合創(chuàng)始人Ilya Verbitskiy是一家?guī)椭緞?chuàng)建成功的在線業(yè)務(wù)的機(jī)構(gòu),建議特別注意HTML編碼。
“如果將用戶輸入的內(nèi)容放在HTML標(biāo)記(例如
或)內(nèi),則效果很好
。它也適用于HTML屬性中使用的數(shù)據(jù)。但是,當(dāng)您在標(biāo)記內(nèi),URL內(nèi)或事件處理程序(如onclick或)中呈現(xiàn)用戶輸入時(shí),HTML編碼將無濟(jì)于事onerror。”
Ilya指出,例如,以下代碼段很危險(xiǎn):
Sample Link
這很危險(xiǎn),因?yàn)? Model.UserInput可能是alert(document.location)或:
eval(String.fromCharCode(105,102,40,33,119,105,110,100,111,119,46,120,41,123,97,108,101,114,116,40,100,111,99,117,109,101,110,116,46,108,111,99,97,116,105,111,110,41,59,119,105,110,100,111,119,46,120,61,49,59,125))
另一個(gè)危險(xiǎn)代碼可能如下所示:
Sample Link
在這種情況下,Model.UserLink可能是:
javascript:eval(String.fromCharCode(105,102,40,33,119,105,110,100,111,119,46,120,41,123,97,108,101,114,116,40,100,111,99,117,109,101,110,116,46,108,111,99,97,116,105,111,110,41,59,119,105,110,100,111,119,46,120,61,49,59,125))
這將給用戶帶來麻煩,因?yàn)橐坏┯脩魡螕裟_本,腳本將被執(zhí)行。
Ilya承認(rèn):“編寫所有編碼器以防止XSS并非易事,”。“首先,該庫應(yīng)支持不同的執(zhí)行上下文。它必須了解瀏覽器支持的不同編碼,并且必須意識到必須過濾掉的潛在危險(xiǎn)HTML屬性。”
Ilya建議使用已經(jīng)實(shí)現(xiàn)了推薦的XSS保護(hù)技術(shù)并且免費(fèi)提供的庫:
DOMPurify:易于使用,因?yàn)樗挥幸环N方法可以清理用戶的輸入。它的默認(rèn)策略已被多個(gè)用戶證明,帶有自定義規(guī)則的選項(xiàng),并支持HTML5,SVG和MathML。
secure-filters:Salesforce的此庫提供清理HTML,JavaScript,內(nèi)聯(lián)CSS樣式和其他上下文的方法。如果您想在其他地方使用用戶輸入,例如生成CSS或JavaScript,則特別有用。
12.實(shí)施內(nèi)容安全策略
網(wǎng)站安全:內(nèi)容安全政策
內(nèi)容安全策略(CSP)。
“分層安全性”或“分層防御”是網(wǎng)絡(luò)安全領(lǐng)域中眾所周知的方法,描述了結(jié)合多種安全控制措施來保護(hù)數(shù)據(jù)的做法。Ilya Verbitskiy說,它也適用于前端安全性。他建議:“即使該站點(diǎn)因XSS漏洞而受到損害,我們也必須將用戶損失降至最低。”
“ XSS攻擊的通常結(jié)果是將腳本注入到易受攻擊的網(wǎng)頁中,” Ilya解釋說。“腳本要么從本地存儲和會(huì)話存儲中竊取用戶的cookie和數(shù)據(jù),要么注入鍵盤記錄器,甚至進(jìn)行加密貨幣挖掘。大多數(shù)攻擊都需要在黑客的服務(wù)器和受害者之間進(jìn)行通信的渠道。通信渠道可以是AJAX呼叫,
標(biāo)簽,iframe或網(wǎng)絡(luò)套接字。您的目標(biāo)應(yīng)該是打破溝通渠道。”
所有現(xiàn)代瀏覽器都已經(jīng)實(shí)現(xiàn)了以下
解決方案:內(nèi)容安全策略(CSP),這是一種附加的安全層,有助于檢測和緩解某些類型的攻擊,包括XSS和數(shù)據(jù)注入攻擊。要啟用CSP,您需要配置Web服務(wù)器以返回Content-Security-PolicyHTTP標(biāo)頭,該標(biāo)頭通過聲明允許加載哪些資源來幫助緩解XSS風(fēng)險(xiǎn)。例如:
Content-Security-Policy: default-src 'self'; child-src child-src 'none'; img-src https://cdn.e/upload/ad_content/xuanchuantu-1.jpgample.com 'self'; object-src 'none'
如果您的網(wǎng)站的網(wǎng)址是https://e/upload/ad_content/xuanchuantu-1.jpgample.com,CSP塊的使用,以及標(biāo)簽,以及框架和網(wǎng)絡(luò)工作者。該瀏覽器將只加載圖像https://e/upload/ad_content/xuanchuantu-1.jpgample.com和https://cdn.e/upload/ad_content/xuanchuantu-1.jpgample.com。所有其他資源(例如腳本和樣式表)都必須托管在上https://e/upload/ad_content/xuanchuantu-1.jpgample.com。
另外,您可以使用HTML頁面中的標(biāo)記定義策略:
內(nèi)容安全策略提供了許多指令,可幫助您定義最適合您的項(xiàng)目的策略。一些使用最廣泛的指令包括default-src,child-src,script-src,style-src,img-src,connect-src等。Ilya建議確保始終將default-src定義為后備忘記了指令。
您可能還會(huì)喜歡: 2019年的移動(dòng)設(shè)計(jì)趨勢。
13.注意要暴露的東西
最后,請務(wù)必牢記要在代碼中暴露給前端的數(shù)據(jù)。
“在某些情況下,在產(chǎn)品頁面上使用產(chǎn)品JSON可能會(huì)有所幫助,但這也意味著您正在向前端顯示應(yīng)該是私人商人的數(shù)據(jù),” Taproom Agency創(chuàng)始人Kelly Vaughn警告說。“一種好的做法是將這種數(shù)據(jù)存儲在一個(gè)元字段中,因?yàn)楸仨毷謩?dòng)賦予每個(gè)的元字段以允許通過API讀取的權(quán)限。”
而且,如果您使用源代碼控制進(jìn)行主題開發(fā)(例如GitHub),請始終隱藏API密鑰,Kelly建議。使config.yml或.env文件在GitHub上可用,任何人都可以訪問商店的主題(以及通過私有應(yīng)用程序允許的任何其他權(quán)限)。也僅允許訪問您真正為應(yīng)用程序所需的功能。如果您僅使用私有應(yīng)用程序來構(gòu)建或更改主題,則應(yīng)禁止所有訪問權(quán)限(讀寫主題除外)。
安全促進(jìn)信任
安全比以往任何時(shí)候都重要。無論是大型公司還是小型站點(diǎn),任何人都可能發(fā)生違反行為。我們需要注意不要泄露客戶數(shù)據(jù),并且需要了解部署網(wǎng)站或應(yīng)用程序時(shí)可能發(fā)生的許多攻擊以及可能發(fā)生的錯(cuò)誤?,F(xiàn)代JavaScript框架承擔(dān)了很多風(fēng)險(xiǎn),但不能完全依靠它們。
客戶期望他們的在線體驗(yàn)是安全的,并且他們提供的任何信息都不會(huì)被他們所期望的方式竊取或使用??蛻舴催^來希望您保護(hù)他們的站點(diǎn),他們的數(shù)據(jù)和他們的客戶。按照各種方法自己保護(hù)站點(diǎn)安全并減少本文中探討的漏洞,您將贏得信任并向您的客戶表明您非常重視安全性。
文章題目:網(wǎng)站安全知識看看國外怎么說?
當(dāng)前路徑:http://jinyejixie.com/news8/181658.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供搜索引擎優(yōu)化、品牌網(wǎng)站建設(shè)、云服務(wù)器、網(wǎng)站營銷、App開發(fā)、微信公眾號
廣告
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源:
創(chuàng)新互聯(lián)