我不了解你，但我的職業生涯始於在小型機構擔任前端開發人員，那裡沒有人關心安全性。當我轉而在更大的公司從事更大的專案時，我一直不關心安全性，因為沒有人更好地教我，這給我帶來了麻煩。
了解如何保護您的 JavaScript 程式碼可以改變這種狀況，並幫助我們保護我們的應用程式和使用者。
本文將探討一些不會傷害 JavaScript 開發人員的安全實踐，只要它們有意義，就可以實施。
上面的一些主題是我在研究該主題時學到的，但是還有更多方法可以使您的程式碼安全。我只是分享一些簡單的方法來幫助您入門。
*PS 是的，我向人工智慧提出了問題，並要求它幫助我舉例。
PS2 是的，IA 建立了封面圖片，因為我知道自己的弱點 LOL*
-
保持你的依賴項是最新的
過時的庫可能會使您的應用程式面臨安全漏洞。保持所有內容都是最新的可以幫助您避免已經修復的已知問題。
-
使用套件管理器： npm（節點套件管理器）是一個很棒的工具，可以幫助您管理和更新庫。
-
定期檢查：執行 npm outdated 以查看哪些軟體包已過時。
-
定期更新：使用 npm update 將軟體套件升級到最新版本。
- Automate Security Updates: Tools like npm audit identify and suggest fixes for security vulnerabilities.
{% cta https://github.com/webcrumbs-community/webcrumbs %} ⭐ 您可以考慮在 GitHub 上給我們一個 Star 嗎？
{% 結束%}
2.使用簡單的安全標頭
安全標頭告訴瀏覽器在處理網站內容時的行為方式，這有助於防止某些類型的攻擊，例如跨網站腳本和資料注入。
我們可以使用內容安全策略 (CSP) ，這是一種安全標頭，有助於阻止未經授權的腳本在您的網站上執行，從而防止許多攻擊。
從簡單開始：新增一個基本的 CSP 標頭，僅允許來自您網站的腳本。
<!-- Add to the <head> section of your HTML -->
<meta http-equiv="Content-Security-Policy" content="script-src 'self';"> 此行意味著只能執行屬於您網站的腳本，而不能執行其他地方的腳本。
-
清理使用者輸入
如果處理不當，用戶輸入可能會很危險。惡意使用者可能會嘗試輸入可能損害其他使用者或您的網站的資料。
我們應該始終將輸入視為不可信的，清理來自用戶的資料以確保其安全，然後再在應用程式中使用它。
當使用使用者輸入更新網頁時，請使用textContent 而不是innerHTML 以避免執行有害腳本。
const userInput = document.querySelector('#user-input').value;
document.getElementById('output').textContent = userInput;
// Safely add user content to your page現在我們更安全了朋友們…
這三個步驟是保護 JavaScript 應用程式的一個很好的起點。
我希望您今天能花點時間回顧一下您的 JavaScript 專案。檢查是否有過時的庫，確保您使用安全標頭，並驗證所有使用者輸入是否已清理。
小步驟可以對您的 Web 應用程式的安全性產生很大影響。
說到前端...
我們正在建立這個超酷的專案，它將改變您進行 Web 開發的方式😯
{% cta https://github.com/webcrumbs-community/webcrumbs %} ⭐ 您可以考慮在 GitHub 上給我們一個 Star 嗎？
{% 結束%}
謝謝閱讀，
帕奇💚
原文出處：https://dev.to/buildwebcrumbs/javascript-security-simple-practices-to-secure-your-frontend-18ii
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式