清理/验证使用 jQuery 提交的 PHP 联系表单

Question

所以我有一个基本的 mail() 联系表单，它通过 jQuery 脚本发布数据，我想验证和清理数据。显然，主要原因是为了安全，同时也是为了防止任何错误。目前唯一的验证形式是 HTML（IE type="tel"），这显然不够，也不安全。

我的问题是我应该如何保护这个脚本？在 jQuery 或 PHP 中。抱歉，我对这种东西还很陌生。 （编辑-我想知道如何专门保护它。示例代码、教程等。-编辑）

index.html

<div class="order_info">
    <form id="order-form" class="order_form" action="php/order.php" method="post">
        <input id="or_name" class="or_field" required type="text" name="or_name" placeholder="Name*"> 
        <input id="or_company" class="or_field" type="text" name="or_company" placeholder="Company Name">
        <input id="or_email" class="or_field" required type="email" name="or_email" placeholder="Email*">
        <input id="or_tel" class="or_field" type="tel" name="or_tel" placeholder="Phone">
        <select id="or_package" class="or_field" required name="or_package">
            <option value="" selected disabled>Select Package*</option>
            <option value="Starter">Starter</option>
            <option value="Business">Business</option>
            <option value="Premier">Premier</option>
        </select>
        <textarea id="or_tarea" class="or_field" required name="or_details" placeholder="Project Details*"></textarea>
        <input id="or_submit" class="or_button" type="submit" value="SUBMIT!">
    </form>
</div>

custom.js

$(window).load(function(){
    "use strict";
    $('.order_info .order-form').each( function(){
        var form = $(this);
        //form.validate();
        form.submit(function(e) {
            if (!e.isDefaultPrevented()) {
                jQuery.post(this.action,{
                    'or_name':$('input[name="or_name"]').val(),
                    'or_company':$('input[name="or_company"]').val(),
                    'or_email':$('input[name="or_email"]').val(),
                    'or_tel':$('input[name="or_tel"]').val(),
                    'or_package':$('select[name="or_package"]').val(),
                    'or_details':$('textarea[name="or_details"]').val(),
                },function(data){
                    form.fadeOut('fast', function() {
                        $(this).siblings('p.newsletter_success_box').show();
                    });
                });
                e.preventDefault();
            }
        });
    }); 
});

order.php

<?php
$field_name = $_POST['or_name'];
$field_company = $_POST['or_company'];
$field_email = $_POST['or_email'];
$field_tel = $_POST['or_tel'];
$field_package = $_POST['or_package'];
$field_details = $_POST['or_details'];

$mail_to = 'email@email.com'; //Change to your email
$subject = 'Enquiry from '.$field_name.' ('.$field_company.')'; //Change to your subject

$body_message = 'From: '.$field_name."\n";
$body_message .= 'Company: '.$field_company."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Phone: '.$field_tel."\n";
$body_message .= 'Package: '.$field_package."\n";
$body_message .= 'Details: '.$field_details;

$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";

mail($mail_to, $subject, $body_message, $headers);
?>

Answer 1

IMO，您应该在客户端 (JQuery) 验证数据，然后在服务器端 (PHP) 验证和/或清理它。原因是客户端的验证由于速度而对用户友好，并且您可以针对页面的特定区域。确实，出于不同的原因，两者都需要。这是一个包含更多信息的页面：

https://luxsci.com/blog/secure-web-pages-and-web-forms-what-you-need-to-know.html

我不建议在客户端做所有事情，因为表单可以直接提交到服务器，从而绕过 JQuery 验证。

http://php.net/manual/en/security.database.sql-injection.php