Wordpress ajax với nonce

Trong bài viết này, chúng tôi sẽ xem xét cách bạn với tư cách là nhà phát triển có thể sử dụng nonce để bảo vệ các yêu cầu AJAX trên trang web WordPress

qua

Jean-Baptiste Jung

Giống

Nhận xét

Tiết kiệm

tiếng riu ríu

Chia sẻ

7. 25K Lượt xem

Tham gia cộng đồng DZone và có được trải nghiệm thành viên đầy đủ

Khi tạo một chủ đề hoặc plugin WordPress, AJAX thường được sử dụng để nâng cao trải nghiệm người dùng. Để đảm bảo an ninh và bảo vệ trang web của bạn khỏi một số loại tấn công bao gồm CSRF, WordPress cung cấp mã thông báo bảo mật được gọi là nonces. Trong bài viết này, tôi sẽ chỉ cho bạn cách sử dụng nonce để bảo vệ các yêu cầu AJAX trên trang web WordPress

WordPress Nonces là gì?

Theo codex, nonce là "số được sử dụng một lần" để giúp bảo vệ các URL và biểu mẫu khỏi một số loại lạm dụng, độc hại hoặc cách khác

WordPress có thể tạo các nonce để chúng được gửi qua biểu mẫu hoặc một hành động khác, mặt khác, nó có thể xác minh nonce được chuyển trong một biểu mẫu hoặc một hành động là hợp lệ trước khi chấp nhận dữ liệu được liên kết

Để biết thêm thông tin về nonces, hãy xem codex WordPress

Hình thức

Đối với hướng dẫn này, chúng ta cần tạo hai tệp. ajax.php, sẽ chứa mã cần thiết để xử lý yêu cầu và page-form.php, tệp chính, chứa một biểu mẫu đơn giản. Sử dụng một nonce sẽ thêm một lớp bảo mật bổ sung cho các chủ đề và plugin WordPress mà bạn có thể tạo

Hai tệp đó sẽ được tạo trong thư mục chủ đề WordPress của bạn. Bạn có thể sử dụng chương trình FTP hoặc cPanel do dịch vụ lưu trữ web của bạn cung cấp để thực hiện việc này

Hãy bắt đầu bằng cách tạo một biểu mẫu HTML đơn giản trong tệp page-form.php

  

    Example label
    
  
  

    Another label
    
  

  

  

Không có gì đặc biệt về biểu mẫu này, ngoại trừ một cuộc gọi đến wp_nonce_field() trên dòng 11. Hàm này tạo một nonce và thêm nó vào biểu mẫu bằng trường ẩn. Một trường ẩn khác được tạo bởi cùng chức năng để lưu trữ người giới thiệu

Nếu bạn xem nguồn của tệp page-form.php của mình, bạn sẽ thấy rằng hàm wp_nonce_field() đã xuất ra nội dung tương tự như sau

Để biết thêm thông tin về chức năng, vui lòng tham khảo codex

Gửi biểu mẫu bằng jQuery

Bây giờ, chúng tôi sẽ sử dụng một số jQuery để gửi biểu mẫu của chúng tôi

jQuery( document ).ready(function() {
jQuery( "#submit" ).click(function() {
 jQuery.post( "https://yoursite.com/ajax.php", jQuery('#myform').serialize())
.done(function( data ) {
alert(data);
}); 
return false;
});
});

Mã này khá dễ hiểu. khi người dùng cố gắng gửi biểu mẫu, jQuery sẽ gửi yêu cầu AJAX tới

Xác minh Nonce bằng PHP

Khi dữ liệu đã được gửi, chúng tôi cần xác minh rằng nonce là hợp lệ. Đây là nội dung của tệp ajax.php mà jQuery đã gửi dữ liệu tới

Dòng 2 và 3 bao gồm WordPress trong tệp. Bước này là cần thiết vì chúng tôi cần đưa vào lõi WordPress để sử dụng các chức năng WP

Ở dòng 5, WordPress đang kiểm tra một nonce tên là