如何在Angular5项目中隐藏Stripe密钥，避免浏览器暴露？

嘿，先给你吃个定心丸：Stripe的公钥（publishable key）本来就是设计成可以暴露在前端的，完全不用担心安全问题！它只能用来初始化前端的Stripe工具（比如Stripe.js），没法直接发起扣款、访问你的账户敏感数据——真正需要死死藏好的是密钥（secret key），这个绝对不能出现在任何前端代码里，必须放在你的后端服务器上，所有需要用它的操作（比如创建支付意图、验证支付结果）都得通过后端API来完成。

如果你只是不想把公钥直接硬编码在index.html里，这里有几个实用的方案：

• 用构建工具的环境变量注入
  如果你用Webpack、Vite、Create React App这类构建工具，直接把公钥存在项目的.env文件里就行。比如Vite里设置VITE_STRIPE_PUBLISHABLE_KEY=pk_xxx，CRA里用REACT_APP_STRIPE_PUBLISHABLE_KEY=pk_xxx，然后在代码里通过import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY或者process.env.REACT_APP_STRIPE_PUBLISHABLE_KEY来获取。构建的时候工具会自动把变量值注入到代码里，不用在index.html里写死。

• 后端动态渲染注入
  让你的后端服务器在渲染index.html的时候，把公钥动态插入到页面的脚本标签里。比如用EJS模板的话，在HTML里写：

  <script>
    const stripePublishableKey = '<%= stripePublicKey %>';
  </script>
  

  后端从自己的环境变量里读取公钥，渲染页面的时候把值填进去。这样静态的index.html里不会有公钥，但浏览器渲染后还是会出现在DOM里——不过这完全安全，前面已经说过啦。

• 动态加载Stripe并传入公钥
  别在index.html里直接引入Stripe的脚本，而是在需要用到Stripe的组件或页面里动态加载，同时传入公钥。比如在Vue里可以这么写：

  async function initStripe() {
    if (!window.Stripe) {
      const script = document.createElement('script');
      script.src = 'https://js.stripe.com/v3/';
      await new Promise(resolve => script.onload = resolve);
    }
    return window.Stripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
  }
  

  这样公钥不会出现在静态的index.html里，而是在JS执行时传入，本质上还是会暴露在浏览器里，但依然是安全的操作。

最后再敲个重点：公钥暴露是正常且安全的，别纠结这个。但secret key绝对不能碰前端，所有涉及它的逻辑都要放在后端，前端只需要调用你的后端接口来完成支付相关的流程。

内容的提问来源于stack exchange，提问作者Ikeoha Chidi