前端安全：JavaScript 代碼在瀏覽器可見的本質與防護策略

核心事實

所有發送到瀏覽器的 JavaScript、HTML、CSS 都是明文可見的，Chrome DevTools (F12) 即可查看、斷點、修改。這是 Web 架構決定的，無法從根本改變。

風險分級

防護策略

1. 敏感邏輯後置 (核心原則)

• 驗證、計價、權限、加密——**全部在後端執行**。
• 前端僅做「展示、輸入收集、體驗優化」。

2. 代碼混淆與壓縮 (提高逆向成本)

• Webpack/Terser: terser --compress --mangle --output bundle.min.js。
• Source Map **僅上傳到錯誤收集平台 (Sentry)**，不部署到 CDN。
• 進階：javascript-obfuscator (控制流扁平化、字符串加密、死代碼注入)。

3. 內容安全策略 (CSP)

Content-Security-Policy: default-src 'self'; script-src 'self' 'nonce-{random}'; object-src 'none';

• 禁止內聯腳本、eval、new Function。
• 配合 Nonce/Hash 允許特定內聯。

4. 關鍵數據不落地前端

• Token 存 HttpOnly; Secure; SameSite=Strict Cookie，而非 localStorage。
• 加密密鑰由後端下發臨時會話密鑰，或用 Web Crypto API 衍生。

5. 完整性校驗 (Subresource Integrity)

<script src="https://cdn.example.com/lib.js"
        integrity="sha384-...hash..."
        crossorigin="anonymous"></script>

總結

「前端不可信」是鐵律。混淆只能防君子，真正的安全靠後端權威校驗、最小權限原則、CSP 防禦 XSS、敏感數據不前置。

1. 上一篇文章： jQuery AJAX 動態生成的按鈕綁定點擊事件失效？使用事件委派
2. 下一篇文章： Visio 2007 UML 組件圖無法調整「包」高度？改用矩形繪製

程式設計綜合問答

MyEclipse Warning 警告機制解析：不影響執行但揭示潛在問題的靜態分析提示

Warning 本質 MyEclipse (基於 Eclip

Tomcat 移除上下文路徑：配置 ROOT 應用實現無項目名訪問

預設 Tomcat 應用訪問路徑為 https://loca

Mac 下 fopen 創建文件路徑解析：工作目錄而非源文件目錄

現象說明 代碼 FILE *fp = fopen(test,

ASP.NET DataList 分頁報錯：ConfigurationManager.AppSettings["conStr"] 為空

錯誤提示「未將對象引用設置到對象的實例」發生在 Config