我有一個常規的網路應用程式，像往常一樣由前端 SPA（角度）和后端組成。
通過 OpenID Connect 提供的身份驗證保護服務器呼叫免受未經授權的呼叫。
我的網路應用程式可以從互聯網訪問，雖然前端本身不包含任何用戶資料（保存在后端的資料庫中），但我仍然想防止非用戶訪問我的前端代碼，因為它會我不希望非用戶知道的泄漏功能。
同樣，我還想阻止普通用戶看到管理功能（/admin我網站的一部分）。
我知道 SPA 的全部意義在于在單個頁面加載中下載所有內容，然后進行動態更改，但我仍然希望用戶只下載他們擁有適當權限的代碼（例如，您可以下載 main 的 3 個選項卡如果您擁有這 3 個選項卡的訪問權限，則可以一口氣打開選單，但只有擁有管理員權限才能下載管理頁面）。
在下載前端代碼之前，我必須確保用戶經過身份驗證和授權，它們的優點/缺點是什么？
uj5u.com熱心網友回復：
HMTL
通常在 SPA 中只有一個 index.html 檔案，就像我的這個在線 SPA 中一樣。因此，當遵循純 SPA 架構時，HMTL 不會顯示任何資訊。
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1, shrink-to-fit=no'>
<base href='/spa/' />
<title>OAuth Demo App</title>
<link rel='stylesheet' href='bootstrap.min.css?t=1651226315563' integrity='sha256-YvdLHPgkqJ8DVUxjjnGVlMMJtNimJ6dYkowFFvp4kKs='>
<link rel='stylesheet' href='app.css?t=1651226315563' integrity='sha256-B7pu gcFspulW4zXfgczVtPcEuZ81tZRFYeRciEzWro='>
</head>
<body>
<div id='root' class='container'></div>
<script type='module' src='vendor.bundle.js?t=1651226315563' integrity='sha256-Rbqz3uAj5ST2WPw7vI0qTgvMYpLa5mzM85xgl96MRKI='></script>
<script type='module' src='app.bundle.js?t=1651226315563' integrity='sha256-9vJJYO5Z/3lk5cbSuR W0RW9QFA9ObGYLAXPBeL4pkY='></script>
</body>
</html>
如果回傳多個 HTML 檔案，這更像是一種網站方法，并且網站堆疊傾向于使用 cookie 保護 HTML 檔案以防止任何泄露。
JAVASCRIPT
傳統上，Javascript 在 SPA 或網站技術堆疊中都沒有得到保護，因為您需要允許 Javascript 下載才能呈現初始頁面，例如使用登錄按鈕。
我部署的 Javascript 應用程式代碼不安全，可在此捆綁檔案中找到。它被縮小了，所以也沒有透露太多。當然，UI 邏輯中應該沒有什么真正的秘密，API 應該為 SPA 做出所有安全決策。
我的 SPA 可以使用諸如Javascript Obfuscator之類的包來進一步隱藏 Javascript 邏輯。我沒有這樣做的原因是從源映射中查找例外堆疊跟蹤不再有效，但如果我能找到支持它的解決方案，我會使用混淆。
多個 JAVASCRIPT 資源
如果您需要保護 Javascript，您需要將 SPA 構建到多個捆綁包中，例如這些。一些網站堆疊通過將受保護的資產托管在不同的檔案夾中來提供這種型別的選項。然后，Web 后端會檢查對這些資產的請求是否具有身份驗證 cookie：
- /unsecured/app-unauthenticated.bundle.js
- /secured/app-area1.bundle.js
- /secured/app-area2.bundle.js
您需要研究代碼拆分和延遲加載。在您的應用程式中，您可以控制何時發生動態匯入，因此當用戶未經身份驗證時，您的代碼將永遠不會請求安全包。
授權檢查
如果您擔心黑客在您自己的代碼之外訪問您的 JS 包，就像我上面的包一樣，那么您could可以通過檢查 cookie 來保護對包檔案的訪問，甚至可以檢查底層 OAuth 訪問令牌中的宣告，不過我不會做任何這些。
我的網路主機是 AWS Cloudfront 內容交付網路 (CDN)，Lambda Edge Extensions 可以在提供資產之前運行代碼。目前，我的lambda 邊緣代碼的唯一作用是提供默認檔案并發布推薦的 Web 安全標頭。
可以更新此代碼以進行與API 網關代碼相同的 cookie 檢查，例如，如果未提供有效 cookie，則回傳 401 JSON 回應。雖然這會增加相當大的復雜性，并且在設計時確保 UI 代碼不需要保護是更標準的。
概括
SPA 安全架構最好通過分離 Web 和 API 關注點來完成。就個人而言，我會將我所有的安全努力都放在保護 API 上，并堅持對 Javascript 進行混淆。
uj5u.com熱心網友回復：
您可以使用CanLoad防護來檢查用戶權限。
這個守衛不僅會確定用戶是否可以導航到給定的路線，還會在未授權時阻止模塊代碼的下載。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/478033.html