我正在使用 REACT 18.2，并且我有一個 .env 檔案，其中包含 REACT_APP_API_URL 和 REACT_APP_API_SECRET，因此我可以在 API 呼叫期間使用它們。
在我完成npm run build并運行應用程式之后，變數在應用程式中成功使用，process.env.REACT_APP_API_URL在 JS API 呼叫中使用。
我試圖取出該process.env.REACT_APP_API_URL代碼并在瀏覽器控制臺中運行，但出現了 null。我還搜索了源檔案，也沒有找到那個 .env 變數的實際值。
所以我想問題是，現在可以將秘密變數存盤在專案的根 .env 檔案中，而不會有用戶可訪問的源檔案中可用的風險。如果它仍然是一個問題，如何在瀏覽器檢查中找到該資訊？
注意：我的 package.json 中有以下包，但不要匯入它們或設定組態檔。
“webpack”：“^5.64.4”，“webpack-dev-server”：“^4.6.0”，“webpack-manifest-plugin”：“^4.0.2”，“workbox-webpack-plugin”：“ ^6.4.1", "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0",
uj5u.com熱心網友回復：
如果應用程式在前端運行，并且前端需要它process.env.REACT_APP_API_URL才能運行，那么就沒有辦法對其保密。任何有興趣的人都可以輕松訪問在前端運行的任何東西，只要他們足夠關心打開開發工具并瀏覽您的代碼。對客戶絕對保密的唯一方法是從一開始就永遠不要將其發送給他們。例如，在某些情況下，您可以通過讓客戶端向您的后端發出請求來保密，然后向其他 API 發出請求，而不是呼叫您的后端，然后將回應回顯給客戶端。
如果它仍然是一個問題，如何在瀏覽器檢查中找到該資訊？
通過打開瀏覽器 devtools，轉到 Sources，并瀏覽各種腳本。
uj5u.com熱心網友回復：
您可以使用https://www.npmjs.com/package/env-cmd 之類的包，并且在構建環境變數時會更加安全。環境變數用于通過將資料從源代碼移動到 .env 檔案來外部化資料。Webpack 將其捆綁到構建輸出中。
將機密存盤在環境變數中不會顯著提高安全性或降低風險。使用這種技術只會使敏感資料不被人看到，因為客戶端資料無法在瀏覽器中得到充分保護，就這么理解。
無論如何，這里有一些解決方案，我希望對您有所幫助：
- 使用 secure-env 加密你的變數https://www.npmjs.com/package/secure-env
- 使用代碼拆分并分解您的密鑰和 API 將它們存盤在變數中并在端點將它們組合在一起
- 您可以更進一步，加密您拆分的密鑰，然后使用代碼拆分。
您的 ENV 變數：
import CryptoJS from "crypto-js";
const REACT_APP_API_URL = "https://your_end_point.com";
let key = "12345678901234567890123456789012";
key = CryptoJS.enc.Utf8.parse(key);
let iv = "1234567890123456";
iv = CryptoJS.enc.Utf8.parse(iv);
let encrypted = CryptoJS.AES.encrypt(REACT_APP_API_URL , key, { iv: iv });
export const encrypted = encrypted.toString();
import const encrypted
let decrypted = CryptoJS.AES.decrypt(encrypted, key, { iv: iv });
decrypted = decrypted.toString(CryptoJS.enc.Utf8);
// user you decrypted variable in your code to be called...
console.log("Criptografia AES256 com Base64");
console.log('Texto: "meuteste"');
console.log(`Criptografado: ${encrypted}`);
console.log(`Descriptografado: ${decrypted}`);
歸根結底，它會在端點消耗它的地方成為瓶頸。npm 上還有其他可用的軟體包，可能值得一試，這取決于你愿意走多遠？
此外，根據您部署應用程式的位置，通常位于 Versel 等地方，Heroku 允許您.env從管理面板添加變數，因此您可以在遇到所有麻煩之前與您的主機核對。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/527543.html