WordPress Nonces คืออะไรป้องกัน Cross-Site Request Forgery(CSRF) ได้อย่างไร

wordprdss nonce คือ

WordPress Nonces นั้นก็คือวิธีการ ป้องกันช่องโหว่ประเภท Cross-Site Request Forgery(CSRF) อย่างหนึ่ง ซึ่งช่องโหว่ประเภท CSRF นี้ จะเกิดจากการที่แฮกเกอร์ แอบส่ง HTTP request ไปยังเว็บที่ผู้ใช้งานได้ทำการ Login ไว้แล้ว เพื่อกระทำการบางอย่าง เช่น ส่งแบบฟอร์มการโอนไปยังเว็บธนาคารเพื่อโอนไปยังบัญชีของแฮกเกอร์ หรือ แอบสั่งสินค้าในเว็บออนไลน์เพื่อส่งไปยังที่อยู่ของแฮกเกอร์เอง

ก่อนจะอธิบายต่อ ผมขออธิบายเพิ่มเติมว่า HTTP request คืออะไร

HTTP request นั้นก็คือ การที่ผู้ใช้งาน ( client ) ส่งข้อมูลไปหาเครื่อง server ซึ่งเราใช้งานกันอยู่ทุกๆ วัน เช่น การกรอก url ลงใน web browser เพื่อไปดึงข้อมูลเว็บจาก server มาแสดงบน browser รวมถึงการอ่านบทความนี้ก็คือ การที่ ผู้อ่านส่ง HTTP request มาขอข้อมูลเนื้อหาจาก server ของ webnocode นั่นเอง

การส่งข้อมูลแบบฟอร์มบนเว็บไซต์นั้นจะแบ่งได้เป็น 2 รูปแบบคือ GET กับ POST ซึ่งต่างกันตรงที่ส่งแบบ GET จะเป็นการส่งผ่าน url ซึ่งเราไม่จำเป็นต้องกรอกแบบฟอร์มก็ยังส่งข้อมูลได้ แค่มี URL ที่อยู่ต้อง ดังตัวอย่างต่อไปนี้

image 3

จากแบบฟอร์มด้านบน คือ แบบฟอร์มการสั่งซื้อสินค้าจากเว็บๆ หนึ่ง ยกตัวอย่างเป็น xxx.com ที่คุณได้ทำการ Login ไว้แล้ว แถมยังผูกบัตรเครดิตไว้แล้วด้วย

หากเป็นการส่งข้อมูลแบบ GET หลังจากคลิกที่ปุ่ม checkout URL บน web browser จะเปลี่ยนไปเป็น

http://xxx.com?product_sku=abc123&quantity=10&address=123/456%20บ้านนาย%ก

ซึ่งเว็บไซต์ก็จะทำการสั่งซื้อสินค้าเสร็จเรียบร้อยแล้ว ซึ่งหากต้องการสั่งซื้อใหม่โดยเพิ่มจำนวนสินค้าจาก 10 เป็น 20 ( ตัวหนา ) โดยที่ไม่ต้องการกรอกแบบฟอร์มใหม่ก็ สามารถทำได้ผ่าน URL เลย เพียงแก้เป็นดังนี้

http://xxx.com?product_sku=abc123&quantity=20&address=123/456%20บ้านนาย%ก

เพียงเท่านี้ก็จะเป็นการสั่งออเดอร์ใหม่โดยเพิ่มจำนวนการสั่งซื้อเป็น 20 ชิ้นแล้ว และหาก URL ถูกเปลี่ยนเป็นแบบนี้ละ

http://xxx.com?product_sku=abc123&quantity=2000&address=999/888%20บ้านแฮกเกอร์

ก็เท่ากับเราซื้อของขวัญให้แฮกเกอร์ไปเลย 2000 ชิ้น

และจากแบบฟอร์ม หากเป็นการส่งข้อมูลแบบ POST ก็สามารถทำได้เช่นกันแม้จะไม่ได้ง่ายเหมือนการแก้ไข URL แต่ก็ทำได้ไม่ยากนัก

แล้วแฮกเกอร์รู้ URL นี้ได้อย่างไร และดำเนินการอย่างไร

การที่จะรู้ URL ข้างต้นนั้น อย่างง่ายๆ เลย ก็คือแฮกเกอร์ไปลองสั่งซื้อของในเว็บ someweb.com แล้วพบช่องโหว่นี้ แต่การดำเนินการทั้งหมดจะมีประมาณนี้คือ

แนวทางการในการป้องกัน CSRF

  1. ผู้ใช้งาน Login เข้าเว็บไซต์ someweb.com ( ซึ่งเคยผูกบัตรเครดิตไว้แล้ว )
  2. Login สำเร็จ
  3. จากนั้นไปหน้าแบบฟอร์มการสั่งซื้อ และทำการสั่งซื้อ
  4. จากนั้นก็ไปเข้าเว็บอื่นๆ ต่อโดยที่ไม่ได้ Logout
  5. เผลอเข้ามาที่เว็บไซต์ของแฮกเกอร์
  6. แฮกเกอร์สร้างปุ่มที่ชวนให้คลิกเช่น “รับคูปองส่วนลดเว็บ someweb.com 90% ฟรี” โดยที่ปุ่มนี้ลิงก์ไปที่ http://xxx.com?product_sku=abc123&quantity=2000&address=999/888%20บ้านแฮกเกอร์
  7. ผู้ใช้งานกดคลิกปุ่มดังกล่าว
  8. จากนั้นเว็บ someweb.com ก็ทำการสั่งซื้อสินค้าให้แฮกเกอร์ไปเรียบร้อยแล้ว

แนวทางแก้มีด้วยกันหลายทาง แต่ทางที่เกี่ยวข้องกับ WordPress Nonce นั้นก็คือ การสร้าง Token ( ตัวอักษรแบบสุ่มมั่ว ๆ ) สำหรับใช้ครั้งเดียวขึ้นมาคู่กับการแสดงหน้าแบบฟอร์ม ซึ่ง Token นี้ WordPress เรียกว่า Nonce นั่นเอง

การทำงานของ WordPress Nonce

  1. ผู้ใช้งาน Login เข้าเว็บไซต์ someweb.com ( ซึ่งเคยผูกบัตรเครดิตไว้แล้ว )
  2. Login สำเร็จ
  3. จากนั้นไปหน้าแบบฟอร์มการสั่งซื้อ โดย server จะสร้าง session ที่มีค่าเดียวกับค่า nonce พร้อมกับ แสดง hidden field ในฟอร์มการสั่งซื้อเป็นค่า nonce เดียวกันด้วย
  4. เมื่อคลิก checkout แล้ว URL ที่ได้จะเป็น http://xxx.com?product_sku=abc123&quantity=2000&address= 123/456%20บ้านนาย%20ก&nonce=as5ds468f4sd35 ( จะเห็นว่ามีค่า nonce เพิ่มเข้ามาเป็นค่าเฉพาะของผู้ใช้งานแต่ละคน )
  5. ทำการสั่งซื้อสำเร็จ
  6. จากนั้นก็ไปเข้าเว็บอื่นๆ ต่อโดยที่ไม่ได้ Logout
  7. เผลอเข้ามาที่เว็บไซต์ของแฮกเกอร์
  8. แฮกเกอร์สร้างปุ่มที่ชวนให้คลิกเช่น “รับคูปองส่วนลดเว็บ someweb.com 90% ฟรี” โดยที่ปุ่มนี้ลิงก์ไปที่ http://xxx.com?product_sku=abc123&quantity=2000&address=999/888%20บ้านแฮกเกอร์&nonce=????( จะเห็นว่าค่า nonce ไม่ตรงกับของผู้ใช้งานเนื่องจากแฮกเกอร์ไม่สามารถรู้ค่านี้ได้ )
  9. ผู้ใช้งานกดคลิกปุ่มดังกล่าว
  10. จากนั้นเว็บ someweb.com ก็จะทำการตรวจสอบค่า nonce ว่าตรงกับที่เก็บไว้ใน session หรือไม่ หากไม่ตรงกัน การสั่งซื้อจะไม่สำเร็จ

การใช้งาน WordPress Nonce

ด้านล่างคือโค้ดการสร้าง hidden field สำหรับเก็บค่า nonce ซึ่งการใช้งานฟังก์ชั่น wp_nonce_field จะเป็นการสร้าง hidden field ให้ฟอร์มพร้อมกับสร้าง session บน server ด้วย

<form method="post">
   <!-- some inputs here ... -->
   <?php wp_nonce_field( 'name_of_my_action', 'name_of_nonce_field' ); ?>
</form>

โค้ดการตรวจสอบ Nonce

if ( 
    ! isset( $_POST['name_of_nonce_field'] ) 
    || ! wp_verify_nonce( $_POST['name_of_nonce_field'], 'name_of_my_action' ) 
) {
 
   print 'Sorry, your nonce did not verify.';
   exit;
 
} else {
 
   // process form data
}

จากโค้ดข้างต้น จะเห็นว่า ค่า Nonce ต้องตรงกันจึงจะดำเนินการใดๆ ต่อไปได้ เช่น การสร้างออเดอร์ เป็นต้น

สรุป WordPress Nonce

จากเนื้อหาทั้งหมดจะเห็นว่าการใช้งาน WordPress Nonce นั้นมีประโยชน์อย่างมาก ดังนั้นหากคุณคือ WordPress Developer ควรจะใช้ Nonce ในทุกๆ ฟอร์มที่สำคัญๆ ทั้งในส่วนของหน้าบ้านและหลังบ้านด้วย

แหล่งที่มา