Question

我正在创建一个html表单来捕获申请人的输入，然后将POST请求与数据一起发送到api。我不知道如何从“查看页面源”或console.log（）之类的东西中隐藏三个特定值。我需要安全地存储值，并且仍然能够以HTML形式使用它们。

我知道我可能必须重写我的解决方案，但是我不知道解决此问题的最佳方法。有没有一种方法可以将api键的值存储在数据库中？

以下是有问题的三个值：

<body>
<main role="main" class="container-fluid">
    <form id="form1" name="form1" onsubmit="beforeSubmit(); return false;">

        <div class="aspNetHidden">
            <input type="hidden" name="merchantID" id="merchantID" />
            <input type="hidden" name="login" id="login" />
            <input type="hidden" name="password" id="password" />
        </div>


        <script type="text/javascript">
            var merID = "1234567";//need to store these values somewhere else!!!!!!!
            var log = "API123";
            var pass = "1234567";
            //even if these values are moved they would be viewable by something like console.log(obj)
            document.getElementById("merchantID").value = merID;
            document.getElementById("login").value = log;
            document.getElementById("password").value = pass;
        </script>

这是我进行API调用的地方：

    <script type="text/javascript">

    beforeSubmit = function () {
        //======================================================================================================
        $.fn.serializeObject = function () {
            var o = {};
            var a = this.serializeArray();
            $.each(a, function () {
                if (o[this.name]) {
                    if (!o[this.name].push) {
                        o[this.name] = [o[this.name]];
                    }
                    o[this.name].push(this.value || '');
                } else {
                    o[this.name] = this.value || '';
                }
            });
            return o;
        };
        //======================================================================================================
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                alert(this.responseText);
            }
        };

        xhttp.open("POST", "https://someurl.com/enroll.svc/JSON/CreateMerchant", true);
        xhttp.setRequestHeader("Content-type", "application/json");
        var obj = JSON.stringify($('#form1').serializeObject());
        console.log(obj);//security concern! all someone would have to do is cntrl+shift+j when the form is submitted
                         //this log command would display the entire JSON object including the merchant ID, Login and Password
        xhttp.send(obj);
    }   //=====================================================================================================
</script>

我对此很陌生。该代码除了可以通过检查页面源代码轻松查看的敏感信息之外，还可以实现预期的功能。对于更好/更安全的方式的任何建议，将不胜感激。

Answer 1

将您的api放入php变量中，然后将变量插入数据库表中应该不太困难。

然后在需要时使用select将其取出，并且从视图源也无法读取php。

如果您不知道如何输入和选择数据库，那么这里有很多教程。

Answer 2

您的代码是不必要的序列化和不需要提交的奇怪事件处理的可怕混合。

这是通用jQuery ajax的外观

$(function() { // page load
  $("#form1").on("submit", function(e) {
    e.preventDefault(); // cancel the submit
    $.post("https://someurl.com/enroll.svc/JSON/CreateMerchant", // url
      $(this).serialize(), // serialising the form
      function(result) {
        console.log(result); // do something with the result of the submission
      });
  });
});

<form id="form1" name="form1">
  <div class="aspNetHidden">
    <input type="hidden" name="merchantID" id="merchantID" />
    <input type="hidden" name="login" id="login" />
    <input type="hidden" name="password" id="password" />
  </div>
</form>

如何修复此html代码以不向用户显示敏感信息？

2 个答案: