如何处理表单提交的安全问题？

Question

我目前正在开发一个电子学习平台，我们在该平台上向注册并支付课程费用的用户销售课程。

我有一个 HTML 表单，它与 PayPal Checkout（沙盒）集成在一起，实际上我期望的行为是，当接受付款时（onApprove 函数），表单会与我需要在服务器上处理的数据一起提交。

但是，我试图模仿恶意行为，我输入了命令：document.forms[0].submit() 并提交了表单，中间没有支付贝宝付款。所以任何人都可以免费参加课程。

我想解决这个问题，但我对网络安全知之甚少。我的问题：

1. 如何只在Paypal支付成功后才提交表单？
2. （可选）在哪里可以了解有关此安全问题和其他安全问题的更多信息？

payment.blade.php

<div class="container">
  <form action="{{action("RegistersController@inscribir",["curso" => $curso->id])}}" method="POST">
    <div class="row">
        <div class="col-12 col-md-8">
          <h1>Llena el formulario</h1>
              @csrf 
              <div class="form-group">
                <label for="Nombre">Ingresa tu nombre</label>
                <input class="form-control" name="name" id="name" type="text" value="{{Auth::user()->name}}"/>
              </div>
              <div class="form-group">
                <label for="email">Ingresa tu correo</label>
                <input class="form-control" name="email" id="email" type="text" value="{{Auth::user()->email}}"/>
              </div>
              <div class="form-group">
                <label for="phone">Ingresa tu número de teléfono</label>
                <input class="form-control" name="phone" placeholder="+01 234 567 8910" id="phone" type="text" value=""/>
              </div>
        </div>
        <div class="col-12 col-md-4">
          <h4 class="my-3">Pagar Curso</h4>
            <img src="/storage/img/cursos/{{$curso->image_square}}" alt="{{$curso->title}}" width="200px">
            <h5 class="p-0 m-0">{{$curso->title}}</h5>
            <small>{{substr($curso->description,0,150)}}</small>
            <br>
            <p>Precio: <b> <span id="price">{{number_format($curso->price,2,".","")}}</span> USD</b></p>
            <br>
            <input type="submit" class="btn btn-apple" style="display: none">
            @if ($curso->price > 0)
            <div id="paypal-button-container"></div>
            @endif
        </div>
    </div>
  </form>
</div>

<script src="https://www.paypal.com/sdk/js?client-id=<MY_CLIENT_ID>"> // Replace YOUR_SB_CLIENT_ID with your sandbox client ID
</script>


<script>
    var price = document.getElementById("price").innerText;
    var paypal_button = document.getElementById("paypal-button-container");

    paypal.Buttons({
      createOrder: function(data, actions) {
        return actions.order.create({
          purchase_units: [{
            amount: {
              value: {{$curso->price}}
            }
          }]
        });
      },
      style: {
          color: 'blue',
          size: 'responsive'
      },
      onApprove: function(data, actions) {
        return actions.order.capture().then(function(details) {
          // Submit the form
          console.log(details);
          document.forms[0].submit();
        });
      },
      onError: function(err){
        alert("Error completando la transacción");
        console.error(err);
        window.location.href =  "/";

      }
    }).render('#paypal-button-container'); 
</script>

Answer 1

将某样东西标记为已付款和接收相关的表单信息是两件不同的事情。在下一个可以继续之前，总是需要完成一个部分。如果您要求在提交表单之前完成 PayPal 付款，如果付款后流程中断，这将导致问题，您必须为此设计。反之亦然，也会导致潜在的断开连接（无需付款即可接收表单信息），这是必须设计的。

---

您问题中的问题是如何验证 PayPal 付款是否已发生。这必须在您的服务器上完成。最可靠的方法是使用服务器端集成从您的服务器捕获付款。

您需要两条服务器端路由，一条用于“创建订单”，一条用于“捕获订单”，documented here。

与您的两条路线配对的最佳审批前端是：https://developer.paypal.com/demo/checkout/#/pattern/server