Skip to content


Cross-Domain Ajax ไม่ได้ยากอย่างที่คิด

โดยปกติแล้ว การเรียกใช้ Ajax ข้ามโดเมน มันจะติดปัญหาทางด้าน Security ทำให้เราไม่สามารถเรียกข้อมูลที่อยู่คนละโดเมนได้ ปัญหานี้เกิดจาก Same Origin Policy ที่กำหนดไว้ว่า ข้อมูลใด ๆ จะต้องมาจาก Origin เดียวกันเท่านั้น เพื่อป้องกันการปลอมแปลง การล้วงความลับจากเว็บอื่น ๆ นั่นเอง

คำว่า Same Origin ในที่นี้มีความหมายถึง Domain name จะต้องมี Domain name เดียวกัน (Subdomain ก็ต้องเหมือนกัน) และ Port จะต้องเป็น Port เดียวกัน เช่น

http://www.chonla.com/dir1 กับ http://www.chonla.com/dir2 ถือว่าเป็น Same Origin แต่ http://www.chonla.com/dir1 กับ http://blog.chonla.com/dir1 ถือว่าเป็นคนละ Origin กัน รวมถึง http://www.chonla.com/dir1 กับ http://www.chonla.com:8080/dir1 ก็ถือว่าเป็นคนละ Origin กันด้วย

โดยปกติแล้วใน IE จะมีการกำหนดค่า Security สำหรับการ Access data ที่อยู่คนละ Domain ให้เป็น Disabled ดูได้จากการเปิดหน้าจอ Internet Option และไปที่ Security และคลิกที่ Custom Level จะมีหน้าต่างการตั้งค่า Security ขึ้นมา เลื่อนไปจนถึงหัวข้อ Access data sources across domains จะเห็นว่ามันจะกำหนดไว้เป็น Disable (ถ้าใครเป็น Enable อยู่ก็แสดงว่าเครื่องของท่าน Security ต่ำกว่าที่ควรจะเป็นแล้วล่ะครับ)

Cross-Domain data access setting in IE

Cross-Domain data access setting in IE

ในเมื่อเอาด้วยเล่ห์ไม่ได้ก็ต้องเอาด้วยกล วิธีการแก้ไขที่ผมเลือกใช้อยู่ตอนนี้คือการทำ Proxy

Proxy ในที่นี้จะทำหน้าที่เป็น Buffer ในการดึงข้อมูลจากเว็บต่าง ๆ มาให้ เพื่อให้มาอยู่ใน Same Origin ผมพูดถึงตรงนี้บางคนก็คงร้องอ๋อแล้ว แต่ถ้ายังนึกไม่ออก ไม่เป็นไรครับ มาดูตัวอย่างกัน

<?php
$keyword = $_GET["keyword"];
echo file_get_contents("http://www.google.co.th/search?hl=th&q=$keyword");
?>

พอนึกภาพกันออกหรือยังครับ เพียงเท่านี้ เราก็จะได้ URL ที่เป็น Same Origin แล้วครับ

ลองไปดู LIVE DEMO กันครับ

ข้อควรระวัง!!

Code ง่าย ๆ แค่ 2 บรรทัด ยังต้องมีข้อควรระวังอีกหรือ? ใช่ครับ ถ้าเราคิดต่อจากนี้ อยากทำให้ชีวิตง่ายขึ้น โดยการเปลี่ยน Code 2 บรรทัดนั้น ให้สามารถรับ URL อะไรก็ได้ มีหน้าตาแบบนี้ครับ

<?php
$url = $_GET["url"];
echo file_get_contents("$url");
?>

ดูดี หรูหรา และ Generic สุด ๆ ใช่มั๊ยครับ ลองนึกดูว่าถ้าผมใส่ parameter url เป็น /home/user/secret.php ดูครับ สิ่งที่เกิดขึ้นคือ มันจะแสดงค่าใน secret.php ของผมออกมาจนหมด

วิธีการทำ Proxy เป็นวิธีที่ดีครับ แต่ควรใช้อย่างระมัดระวังเพราะอาจจะเกิดปัญหาตามมาด้านอื่น ๆ ได้ครับ ทางที่ดีควรกำหนด URL ที่ต้องการไว้ภายในเลยครับ และการเรียก URL ซ้ำ ๆ บ่อย ๆ อาจจะทำให้เว็บเซิร์ฟเวอร์ที่เราไปเรียกเค้าแบนเราได้ครับ

เตือนด้วยความหวังดีครับ แล้วเจอกันใหม่ครับ

  • Share/Bookmark

Posted in Ajax, JavaScript, jQuery.

Tagged with , , .


0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.



Some HTML is OK

or, reply to this post via trackback.