Question

如何在Flutter Web的web/index.html中隐藏密钥和其他私人信息：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login</title>
</head>
<body>

  <script src="main.dart.js" type="application/javascript"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#config-web-app -->
  <script src="https://www.gstatic.com/firebasejs//6.3.3/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-storage.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-functions.js"></script>

  <script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    apiKey: "API_KEY",
    authDomain: "authDomain.firebaseapp.com",
    databaseURL: "databaseURL.firebaseio.com",
    projectId: "fir-projectId",
    storageBucket: "storageBucket.appspot.com",
    messagingSenderId: "123456789",
    appId: "1:123456789:web:123456789"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  </script>
</body>
</html>

Answer 1

人们可以看到您的API密钥。实际上@puf已经很好地回答了这个问题。

is it safe to expose my api key?

通常，在生产应用程序上我只允许我的网站访问我的Firebase数据库。它将拒绝来自您网站的任何请求。

https://console.developers.google.com/apis
打开Firebase项目>凭据
在API密钥下，选择您的浏览器密钥。看起来应该像这样：“浏览器密钥（由Google Service自动创建）”
在“接受来自这些HTTP引荐来源网址（网站）的请求”中，添加应用程序的URL（例如：projectname.firebaseapp.com/*）

Answer 2

我假设您担心浏览器控制台中会显示此内容，所以我所做的只是将配置文件与另一个文件分开，并将其导入到index.html中，这样它就不会显示。

将此添加到index.html

<script type="text/javascript" src="config.js"></script>

在网络文件夹中创建一个config.js文件并添加

  function doSomething(){
var firebaseConfig = {
    apiKey: "",
    authDomain: "m",
    databaseURL: "",
    projectId: "",
    storageBucket: "",
    messagingSenderId: "",
    appId: "1",
    measurementId: ""
  };  
  firebase.initializeApp(firebaseConfig);

   }
 doSomething();

如何在Flutter Web中隐藏firebaseConfig项

2 个答案: