Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Parsing Data JSON

Sebagaimana telah disebutkan pada tulisan saya sebelumnya bahwa JSON memiliki kelemahan jika data yang diterima tidak diperiksa terlebih dahulu. Jika masukan data bisa dijamin bahwa tidak akan ada script yang berbahaya, issue ini bisa diabaikan. Namun jika data berasal dari situs luar seperti halnya layanan berita (RSS) atau informasi lain dari luar, risiko adanya script jahat pada data JSON cukup besar. Oleh karena itu sebelum data JSON dipanggil menggunakan fungsi eval(), terlebih dahulu data yang diterima harus diperiksa.

Pada tulisan ini, saya menggunakan library glm-ajax sebagai framework untuk mempermudah penggunaan AJAX dan json.js untuk melakukan parsing data JSON.

Penerimaan Data JSON melalui AJAX.

Sebagai contoh sedarhana, bila sebuah data json mengandung string berikut:

processData( { "color" : "green" } )

Kemudian buat halaman HTML yang berisi script untuk memanggill data JSON di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Retrieving JSON Data via AJAX</title>
    <script type="text/javascript" language="javascript" src="glm-ajax.js" >
    </script>
    <script type="text/javascript" language="javascript">
        function processData(JSONData) {
            alert(JSONData.color);
        }
        function ajaxCallback(content) {
            eval(content); //eval the contents of data.
        }
        var ajax = new GLM.AJAX();
        //call json-func-data.txt and pass the contents to ajaxCallback.
        ajax.callPage("json-func-data.txt", ajaxCallback); 
    </script>
</head>
<body>
</body>
</html>

Pada contoh di atas, data JSON merupakan sebuah kode javascript. Ketika dilewatkan pada pernyataan eval() maka processData akan dieksekusi. Hal ini karena data JSON berupa kode javascript untuk memanggil fungsi processData.

Contoh berikutnya digunakan method parse. Untuk menggunakan method ini, sertakan library json.js ke dalam halaman.

Data JSON sebagai berikut.

{ "color" : "green" }

Pada HTML, sertakan library json.js dan ubah fungsi ajax Callback untuk melakukan parsing data JSON terlebih dahulu sebalum mengeksekusi fungsi processData(JSONData).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Retrieving JSON Data via AJAX</title>
    <script type="text/javascript" language="javascript" src="json.js" ></script>
    <script type="text/javascript" language="javascript" src="glm-ajax.js" ></script>
    <script type="text/javascript" language="javascript">
        function processData(JSONData) {
            alert(JSONData.color);
        }
        function ajaxCallback(content) {
            JSONData = content.parseJSON();
            processData(JSONData); 
        }
        var ajax = new GLM.AJAX();
        //call json-func-data.txt and pass the contents to ajaxCallback.
        ajax.callPage("json-func-data.txt", ajaxCallback); 
    </script>
</head>
<body>
</body>
</html>

Kode di atas, server akan mengembalikan file JSON dan akan diparsing terlebih dahulu menggunakan baris JSONData = content.parseJSON(); dan kemudian JSONData dilewatkan pada fungsi processData. Dari kedua contoh di atas, masing-masing akan menghasilkan keluaran yang sama. Namun pada beberapa kasus jika data JSON mengandung kode jahat atau data yang salah, contoh kedua lebih aman untuk menangani masalah ini.

Pengiriman Data JSON ke Server

Komunikasi pada AJAX menggunakan string yang telah disandikan (encoded). Data Javascript harus disandikan terlebih dahulu sebelum dikirim menggunakan XMLHttpRequest. Untuk merubah semua data Javascript ke dalam format JSON dapat digunakan library json.js yang dibuat oleh Douglas Crockford.

Contoh berikut menggunakan method toJSONString() untuk melakukan konversi object ke dalam string yang siap dikirimkan ke server.

var employees = { "accounting" : [  // accounting is an array in employees
                                   { "firstName" : "Ahmad",
                                     "lastName"  : "Masykur",
                                     "age"       : 25 },
                                   { "firstName" : "Agung",
                                     "lastName"  : "Riyadi",
                                     "age"       : 29 }
                                 ], // End "accounting" array
                  "sales" :      [  // Sales is another array in employees
                                   { "firstName" : "Vianton",
                                     "lastName"  : "Rahmat",
                                     "age"       : 23 },
                                   { "firstName" : "Kusuma",
                                     "lastName"  : "Dewi",
                                     "age"       : 25 }
                                 ]  // End "sales" array
                }
var toServer = employees.toJSONString();
document.writeln(toServer);

Dengan melakukan parsing data terlebih dahulu, data yang dipertukarkan antara client dan server akan lebih terjamin keamanannya. Saat ini belum ada method internal Javascript untuk membuat data JSON. Method untuk menangani JSON ini rencana akan diimplementasikan pada tahun 2007. Sebelum method tersebut belum masuk menjadi method internal javascript, kita dapat menggunakan library javascript untuk melakukan parsing dan konversi object javascript ke dalam string JSON. Untuk membuat data dengan format JSON dan melakukan parsing data sebelum diproses dapat digunakan library buatan Douglas Crockford yang dapat didownload di http://www.json.org/json.js.


Categories: Security | AJAX | JSON
Permalink | Comments (13) | Post RSSRSS comment feed

Comments

Ahmad Masykur Indonesia | Reply

Thursday, April 10, 2008 9:03 AM

Ahmad Masykur

Untuk menjalankan script tersebut di atas, dalam beberapa kasus diperlukan web server (IIS / ASP.NET Development Server / Apache / yang lain). Jika dengan membuka file HTML langsung dari file system tidak bisa (script tidak jalan), taruh semua file dalam web server dan buka halaman dari alamat server yang dibuat (misal: http://localhost/json/).

busby seo challenge United States | Reply

Tuesday, August 26, 2008 11:30 AM

busby seo challenge


Thanks... i really collect this all...

http://pinayspeak.com | http://alaminos.net

Busby Seo Test United States | Reply

Thursday, November 20, 2008 5:37 PM

Busby Seo Test

widih bagus tenan

natural beauty tips Serbia and Montenegro (Former) | Reply

Friday, November 21, 2008 10:39 PM

natural beauty tips

Great stuff sir..
thank you very much.
I really thanks ahmed..

car hifi Sweden | Reply

Tuesday, November 25, 2008 5:32 PM

car hifi

ahmed i really appreciate you..
thanks for sharing.
I am getting small error in 14th line of the code.. please checkout.

Ahmad Masykur Indonesia | Reply

Wednesday, November 26, 2008 7:21 AM

Ahmad Masykur

Car, what the error message that you found? I'm test this code in most popular browsers with no issue.

cooking utensils Russia | Reply

Thursday, December 11, 2008 3:32 PM

cooking utensils

thanks ahmed..
i am getting small error in this loop
<code>
}
        var ajax = new GLM.AJAX();
        //call json-func-data.txt and pass the contents to ajaxCallback.
        ajax.callPage("json-func-data.txt", ajaxCallback);
    </script>
</code>

Web Design Leicester United Kingdom | Reply

Saturday, January 24, 2009 5:07 PM

Web Design Leicester

If you are unfamiliar with JSON, then I suggest you take a few minutes and have a look at JSON.org, or the Wikipedia entry for JSON. If you have used JavaScript object literal notation, then you should recognize the syntax. For this example I will be using JSON that loosely defines a data structure much like an RSS feed.

Ahmed Slovakia | Reply

Tuesday, February 03, 2009 2:49 PM

Ahmed

Thank you ahmed,You are very genius mate,
Thanks for sharing such an informative article.

Rockaway, NJ Mercedes Benz Repairs United Kingdom | Reply

Thursday, February 05, 2009 9:07 PM

Rockaway, NJ Mercedes Benz Repairs

JSONP or "JSON with padding" is a JSON extension wherein the name of a callback function is specified as an input argument of the call itself. The original proposition appears to have been made in the MacPython blog in 2005 and is now used by many Web 2.0 applications such as Dojo Toolkit Applications or Google Toolkit Applications. Further extensions of this protocol have been proposed by considering additional input arguments as, for example, is the case of JSONPP supported by S3DB web services.

http://www.carserviceautorepair.com/
European maintenance and repairs from brakes, tune ups, front end alignment to engine overhaul, we do it all.

Website SEO United States | Reply

Sunday, February 08, 2009 3:40 AM

Website SEO

The JSON format is specified in RFC 4627 by Douglas Crockford. The official Internet media type for JSON is application/json. The JSON file extension is .json.

Birch Tire and Auto Service United Kingdom | Reply

Tuesday, February 10, 2009 1:43 AM

Birch Tire and Auto Service

ASP.NET AJAX, formerly code-named Atlas, is a set of extensions to ASP.NET developed by Microsoft for implementing Ajax functionality. Ajax, shorthand for Asynchronous JavaScript and XML, is a web development technique for creating interactive web applications.

Beauty Salon Equipment United States | Reply

Thursday, February 26, 2009 10:54 AM

Beauty Salon Equipment

This is the code i need but how can we translate it into readable english! let me know

kells

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading