網站安全性：改善前端安全性且不被黑客入侵的13種方法

 

我們越來越依賴數(shù)字設備來管理購物，銀行業(yè)務和整體通信。毋庸置疑，與后端開發(fā)人員一樣，作為設計師和前端開發(fā)人員，我們有責任幫助保護客戶免受欺詐和安全問題的侵害。 

 

無論您是開發(fā)電子商務網站（Shopify負責大部分風險）還是開發(fā)其他類型的在線體驗，您都需要注意許多陷阱。在本文中，我們采訪了七位安全專家，以了解最常見的前端漏洞，以及如何降低風險并避免被黑客入侵。

 

通過Shopify合作伙伴計劃發(fā)展您的業(yè)務

 

無論您提供市場營銷，定制服務還是網站設計和開發(fā)服務，Shopify合作伙伴計劃都將助您成功。免費加入并獲得收益分享機會，發(fā)展業(yè)務的工具以及充滿激情的商業(yè)社區(qū)。

 

1.安全必須是開發(fā)過程的一部分

最近，社區(qū)中的前端性能引起了很多關注。它使軟件工程師Benedek Gagyi意識到它與安全性有多相似。

 

他說：“當我聽到諸如“您必須盡早將其添加到您的流程中”或“反對您的努力的最強大力量是開發(fā)人員的便利性”之類的陳述時，我總是會點頭，因為它們在性能和安全性上都是如此。”解釋。“很顯然，可以在開發(fā)生命周期的后期修復所有與安全性相關的錯誤和漏洞，但是這要困難得多，而且成本也更高。這就是為什么添加威脅建模會話和定期進行安全性審查對于任何更大的開發(fā)步驟都至關重要的原因，這意味著安全性是設計使然，而不僅僅是補丁程序。”

 

Benedek指出，雖然認知很重要，但應該更多地討論實際的開發(fā)人員經驗。 

 

“我期望使用庫和框架編寫的軟件中的安全性錯誤更少，這使得編寫安全軟件變得容易。這很簡單，對吧？前端世界中的一個很好的例子是，大型框架如何通過提供有風險的操作名稱（例如dangerouslySetInnerHTMLReact或bypassSecurityTrustAngular中的API ）來讓您知道是否要跨站點腳本（XSS）攻擊。

 

2.使用自動處理安全性的現(xiàn)代框架 

JavaScript框架已成為現(xiàn)代Web開發(fā)的重要組成部分?，F(xiàn)在，大多數(shù)站點似乎都圍繞React，Vue或Angular之類的框架構建。從安全角度來看，它們提供了顯著的好處。 

 

Pragmatic Web Security的創(chuàng)始人兼安全編碼講師Philippe De Ryck說：“ Angular框架的轉世就是一個完美的例子。” “ Angular自動防御各種XSS攻擊媒介。它為通過{{}}的簡單輸出提供自動編碼。使用時，Angular會自動清理輸出。當使用變量URL或CSS時，Angular還會自動確保在這種情況下可以安全地使用這些值。” innerHTML

 

其他框架提供了類似的保護，但是據(jù)Philippe稱，它們的保護范圍并不廣。盡管如此，使用任何現(xiàn)代框架都可以大大減少開發(fā)人員緩解XSS攻擊所需的風險。

 

您可能還會喜歡： Web安全基礎知識：每個開發(fā)人員都應該知道的內容。

 

3.避免典型的XSS錯誤

雖然在使用現(xiàn)代JavaScript框架時不那么常見，但是仍然可以將無意的XSS缺陷編碼到您的前端。 

 

數(shù)字創(chuàng)新機構Parallax主任詹姆斯·霍爾（James Hall）表示：“假設我們想通過營銷電子郵件中的用戶名來解決用戶的問題。” “添加到查詢字符串，然后簡單地將其添加到DOM，將是一種快速的方法。”?name=James

 

例如：

 

document.querySelector('.tagline').innerHTML = nameFromQueryString

James警告說，使用如上所述的代碼意味著，任何人都可以將代碼注入您的網站并接管您的工作。他警告說，僅通過將名稱更改為

11. HTML編碼還不夠

WebStoating的聯(lián)合創(chuàng)始人Ilya Verbitskiy是一家?guī)椭緞?chuàng)建成功的在線業(yè)務的機構，建議特別注意HTML編碼。 

 

“如果將用戶輸入的內容放在HTML標記（例如