Bảo vệ form AJAX bằng WordPress nonce

Để tăng cường bảo mật và ngăn chặn tấn công trái phép thông qua AJAX website, WordPress cung cấp mã bảo mật tên là “nonce”.

Thế nào là WordPress nonce?

Theo tài liệu do WordPress Codex phát hành, “nonce” là giá trị số sử dụng chỉ một lần để giúp bảo vệ các đường dẫn và form nhập liệu bằng cách xác minh giá trị “nonce” trước khi chấp nhận dữ liệu liên quan.

Tài liệu về nonce trên Codex có thể đọc tại đây.

Biểu mẫu (Form)

Trong bài viết này, ta sẽ lấy ví dụ với 2 file:

• lib/ajax.php – chứa các phần code thực thi yêu cầu.
• page-form.php – chứa một form liên hệ đơn giản.

Đầu tiên, ta tạo một form ví dụ như sau:

<form class="form form--contact">
  <div class="form__row">
    <label for="email">Email address</label>
    <input type="email" placeholder="Enter your email address">
  </div>
  <?php wp_nonce_field('contact-form'); ?>
  <div class="form__row">
    <button class="button">Submit</button>
  </div>
</form>

Không có gì quá đặc biệt về form này, ngoại trừ việc sử dụng wp_nonce_field. Function này sẽ tạo một “nonce” mới và thêm nó vào form sử dụng dạng hidden field. Một hidden field khác được tạo với chức năng tương tự để lưu trữ “referer”.

Giờ, nếu bạn mở view-source code trên trình duyệt, bạn có thể trong markup chứa thêm 2 input như sau:

<input type="hidden" id="_wpnonce" name="_wpnonce" value="5yhf34151" />
<input type="hidden" name="_wp_http_referer" value="/contact" />

Ta sẽ chuyển sang bước xử lý dữ liệu thu thập được từ form này ở bước tiếp theo.

Gửi dữ liệu form bằng jQuery

Ta có code Javascript để khi submit dữ liệu lên như sau:

$('.form--contact').on('click', function() {
  $.post('https://codetot.net/wp-content/themes/demo/lib/ajax.php', $('.form--contact').serialize())
    .done( function(data) {
      alert(data);
    });
    return false;
});

Xác minh nonce bằng PHP

Một khi dữ liệu đã được gửi, bạn sẽ cần xác minh rằng nonce là hợp lệ. Đây là code ví dụ trong file lib/ajax.php:

if( !check_ajax_refer('contact-form')) {
  wp_die();
}

Function ở trên sẽ làm nhiẹm vụ kiểm tra và xác minh nonce trước khi ta sử dụng data có được để xử lý.

Đây là ví dụ về cách sử dụng “nonce” trong WordPress giúp tăng cường bảo mật hơn trong AJAX.

Bài viết dịch lược từ CatsWhoCode.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.