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

Rate this post

Để 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.

1 bình luận về “Bảo vệ form AJAX bằng WordPress nonce”

Viết một bình luận


Chuyên gia về Web
Bạn muốn làm việc với dịch vụ website do chúng tôi triển khai?
Gọi tư vấn 0982.90.4343
Chuyên gia về Web
Bài viết liên quan

02/01/2024

Fix lỗi npm không thể cài các package devDependencies
Khi cài đặt dự án,  có lúc bạn sẽ cài mãi cũng không đủ các package npm, đặc biệt là...
Gọi file PHP trong WordPress

19/09/2023

Cài đặt và sử dụng WP-CLI trên môi trường Linux
Trên một số môi trường Hosting có thể cung cấp SSH hoặc Terminal access, song không có sẵn WP-CLI để...
Import database MySQL lớn trên môi trường Docker

06/08/2023

Import database MySQL lớn trên môi trường Docker
Mình sử dụng EasyPanel để quản lý các Docker và build môi trường app. Nay gặp tình huống phải import...

28/01/2023

Hướng dẫn cài đặt php extension mongodb trên Mac OS M1
Khi bạn muốn hỗ trợ MongoDB trên dòng Mac M1, phần cài đặt sẽ cần một chút lưu ý. Hướng...