如何安全地将变量传递给index.html

Question

我的index.html中有我的付款网关的脚本标签

  <script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js"
    data-client-key="my-data-client-key">
    </script>

我的data-client-key出现在头部标签中，可以吗？还是应该固定？如果需要保护，我如何保护它？ 我已经阅读了这篇文章How to pass variable data to index.html in angular?，但仍然不知道是不是应该隐藏我的钥匙。 当然我也有其他关键，例如分析，我可以隐藏它吗？

编辑

我将此添加到了main.ts

if (environment.production) {
  enableProdMode();
  // HACK: Don't log to console in production environment.
  // TODO: This can be done in better way using logger service and logger factory.
  if (window) {
    window.console.log = window.console.warn = window.console.info = function () {
      // Don't log anything.
    };
  }
  document.write('<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="'+environment.midtransKey+'" ></script>');
} else {
  document.write('<script type="text/javascript" src="https://app.sandbox.midtrans.com/snap/snap.js" data-client-key="'+environment.midtransKey+'" ></script>');
}

midtrans的脚本标签未显示，我得到了core.js:6014 ERROR ReferenceError: snap is not defined

Answer 1

您有两个选择

1. 从angular插入此脚本标签

import { environment } from './environments/environment';
  
const script = document.createElement('script');  
script.src = "https://app.sandbox.midtrans.com/snap/snap.js";  

if (environment.production) {
    script.setAttribute("data-client-key","my-data-client-key")
} else if (environment.staging) {
    script.setAttribute("data-client-key","my-data-client-key")
}
document.head.appendChild(script);

1. 通过自定义键从角度编辑变量

var html = document.documentElement.innerHTML
document.documentElement.innerHTML = html.replace("my-data-client-key", environment.variable)

显示client key没问题，因为提供商将限制每个域使用客户端密钥，等等。

在您的情况下，文档中提到将客户端密钥放入html中 https://snap-docs.midtrans.com/#frontend-integration

Answer 2

一旦在前端使用了密钥，就无法将其隐藏。最终，它应该在标题标签中或页面上的某处，以便完成所需的处理

在他们的documentation中，这是一个客户端密钥，因此不必担心。 Mid Trans还接受商户网址和其他回调URL，它们通过它们限制付款和重定向。假设这些不是他们所说的，那么某人唯一可以做的就是代表您执行付款交易到您的帐户中。

对于Google Analytics（分析），您也无能为力，但是，如果有人获得了密钥，则收集到的数据可能会受到污染，因此，我建议您在分析页面上创建一个过滤器，并仅限制那些与您的域匹配。查看this post上的操作方法。