JWT (JSON Web Token): Solusi untuk Autentikasi dan Otorisasi ?

Di era digital saat ini, banyak aplikasi yang saling terhubung dan membutuhkan sistem keamanan yang kuat namun efisien. Salah satu teknologi yang banyak digunakan untuk kebutuhan autentikasi dan otorisasi adalah JWT atau JSON Web Token. 

 

 

 

 

 

 

 

Apa Itu JWT?

JWT (JSON Web Token) adalah format token yang digunakan untuk mengirim data secara aman antar sistem dalam bentuk objek JSON yang sudah ditandatangani secara digital. Token ini umumnya dipakai untuk proses login dan otorisasi akses pengguna.

 JWT terdiri dari tiga bagian:

1. Header – berisi informasi tentang algoritma yang digunakan (misalnya HS256).

2. Payload – memuat data atau klaim, seperti ID pengguna atau perannya.

3. Signature – tanda tangan digital yang menjamin bahwa token tidak diubah-ubah.

    
   
   

 

 

 

 

 

Mengapa JWT Diperlukan?

Sebelum JWT populer, banyak sistem menggunakan metode session-based authentication. Artinya, setelah pengguna login, data sesi disimpan di server. Namun metode ini memiliki keterbatasan:

• Sulit digunakan pada sistem terdistribusi atau berbasis microservices.

• Tidak fleksibel untuk aplikasi modern seperti SPA (Single Page Application).

• Butuh memori tambahan untuk menyimpan sesi.

JWT hadir sebagai solusi yang lebih ringan dan praktis. Token menyimpan semua informasi yang dibutuhkan, sehingga server tidak perlu menyimpan sesi. Sistem ini disebut stateless — cocok untuk aplikasi modern yang skalanya besar.

Kelebihan JWT Dibandingkan Metode Lain

1. Tidak Bergantung pada Server (Stateless)
   Server tidak perlu menyimpan data sesi. Token bisa diverifikasi langsung menggunakan tanda tangan digital.

2. Cocok untuk Sistem Terdistribusi
   Ideal digunakan di lingkungan microservices atau REST API.

3. Format Ringan dan Mudah Ditangani
   JWT hanya berupa string yang bisa dikirim lewat HTTP header.

4. Bisa Digunakan untuk Autentikasi dan Otorisasi
   Token dapat menyimpan peran pengguna, sehingga kontrol akses bisa dilakukan tanpa mengecek database.

5. Mudah Digunakan di Berbagai Platform
   JWT adalah standar terbuka, dapat diimplementasikan di banyak bahasa pemrograman.

Keunggulan Utama JWT

Keunggulan terbesar JWT adalah kemampuannya untuk membawa informasi secara aman tanpa beban penyimpanan di sisi server. Token ini cocok digunakan di sistem yang butuh fleksibilitas tinggi dan bekerja lintas platform, seperti aplikasi mobile, frontend-backend terpisah, hingga layanan API.

JWT juga dapat diatur masa berlakunya (expired), serta bisa dikombinasikan dengan token refresh agar tetap aman meskipun token utama sudah habis masa aktifnya.

 

Apakah JWT Aman?

JWT menawarkan keamanan yang baik, asalkan digunakan dengan benar. Keamanannya didukung oleh:

• Penggunaan algoritma kriptografi seperti HS256 atau RSA.

• Penandatanganan digital untuk mencegah perubahan isi token.

• Pengaturan masa berlaku token (exp) untuk mencegah penyalahgunaan.

Namun, ada hal-hal penting yang harus diperhatikan:

• Selalu gunakan HTTPS untuk mengirim token.

• Hindari menyimpan token di tempat yang mudah diakses oleh skrip berbahaya (seperti localStorage jika ada risiko XSS).

• Pastikan sistem memverifikasi tanda tangan token dengan benar.

Dengan praktik yang benar, JWT bisa menjadi bagian penting dari sistem keamanan aplikasi Anda.

 

JWT bisa tidak aman karena mencantumkan terlalu banyak informasi sensitif di dalam payload-nya.

 

 

 

 

 

 

 

Masalah pada token tersebut:

1. Menyimpan password dalam token
   Ini kesalahan fatal. Password seharusnya tidak pernah disimpan atau dikirim, apalagi dalam token.

2. Terlalu banyak data pribadi
   Informasi seperti email, alamat rumah, nomor HP, dan kartu kredit tidak seharusnya berada di dalam JWT, apalagi jika hanya menggunakan signed JWT (bukan encrypted).

3. Risiko token bocor
   Jika token ini sampai bocor (misalnya lewat header Authorization), maka seluruh informasi di dalamnya bisa dibaca oleh siapa saja, karena payload JWT bisa dengan mudah didekode oleh siapapun.

    
   

JWT dapat di-decode, misalnya menggunakan tools yag tersedia secara online seperti https://jwt.io/

 

 

 

 

 

 

 

 

 

 

 

 

 

Best Practice:

1. Hanya sertakan informasi minimum yang dibutuhkan, seperti user_id dan role.

2. Jangan pernah menyimpan password, data keuangan, atau informasi pribadi di payload.

3. Jika memang perlu menyimpan data sensitif, gunakan JWE (JSON Web Encryption), bukan hanya JWS (JSON Web Signature)

 

JWT adalah solusi modern yang sangat berguna untuk proses autentikasi dan otorisasi di berbagai jenis aplikasi. Sifatnya yang ringan, fleksibel, dan aman menjadikannya pilihan utama dalam membangun sistem yang efisien dan mudah diskalakan. Meski begitu, penerapannya tetap harus mengikuti standar keamanan agar sistem tetap terlindungi dari risiko penyalahgunaan.

Meskipun sistem sudah menggunakan JWT untuk autentikasi, tetap penting untuk memastikan URL dan input pengguna terlindungi dari serangan seperti URL injection. JWT hanya mengamankan proses identitas dan otorisasi, namun tidak menggantikan kebutuhan validasi dan sanitasi input secara menyeluruh.

 

Read More

Web Scraping Menggunakan PHP Simple Html DOM Parser

Web Crawling dan Web Scraping

 

 

 

Web Crawling

Definisi:
Web crawling adalah proses otomatis untuk menjelajahi halaman-halaman web dari satu link ke link lainnya, seperti cara kerja Googlebot saat mengindeks website.

Tujuan utama:
Mengumpulkan dan memetakan struktur website atau mengindeks konten web untuk keperluan pencarian atau analisis skala besar.

Contoh:
Mesin pencari seperti Google, Bing, atau DuckDuckGo menggunakan crawler untuk menjelajahi dan mengindeks semua halaman yang bisa mereka temukan di internet.

 

Web Scraping

Definisi:
Web scraping adalah proses mengambil data spesifik dari halaman web, biasanya dengan mem-parsing kontennya seperti HTML atau JSON.

Tujuan utama:
Mengambil informasi tertentu seperti harga produk, review, artikel berita, dll.

Contoh:

• Mengambil daftar harga dari situs e-commerce
• Mengambil informasi profil dari LinkedIn (dengan izin atau via API resmi)
• Mengambil data berita terbaru dari situs berita

 

Pada saat request data, server dapat memberikan hasil berupa data dalam berbagai format, misalnya : html, pdf, xml, json atau format yang lainnya.

Jika data yang dihasilkan dalam format xml atau json, maka proses crawling data akan relatif lebih mudah. Namun bagaimana jika data yang dihasilkan berupa format html.

Contoh jika kita mengakses data Kurs Pajak melalui laman : https://fiskal.kemenkeu.go.id/informasi-publik/kurs-pajak . 

 

 

 

 

 

 

 

 

 

 

Jika dilihat source code tampilan tersebut berupa script html menggunakan tag <table></table>

 

 
PHP Simple HTML DOM Parser

PHP Simple HTML DOM Parser adalah sebuah parser dokumen HTML yang cepat, sederhana, dan andal untuk PHP. Perangkat lunak ini dikembangkan oleh S.C. Chen, berdasarkan HTML Parser untuk PHP 4 yang dibuat oleh Jose Solorzano. PHP Simple HTML DOM Parser mampu memproses berbagai dokumen HTML, termasuk dokumen-dokumen yang dianggap tidak valid menurut spesifikasi HTML. Perangkat lunak ini bersifat bebas dan didistribusikan di bawah lisensi MIT.

Untuk membuat kumpulan data dari file html seperti contoh tersebut, diperlukan langkah sebagai berikut:

• Install PHP Server untuk menjalankan script PHP (Appserve, XAMPP, dll)
• Download PHP Simple HTML DOM Parser (https://sourceforge.net/projects/simplehtmldom/)
• Pelajari website target, terutama struktur HTML-nya, misalnya dengan contoh website Kurs Pajak tersebut, didapat informasi sebagai berikut

1. Kurs pajak berlaku dalam kurun waktu 1 minggu-an
2. Kurs pajak terbit pada hari rabu

Dari hasil analisis tersebut, maka diperlukan seluruh tanggal yang bertepatan pada hari Rabu, hal ini dapat mudah kita dapatkan menggunakan spreadsheet (excel). 

• Jalankan script PHP sebagai berikut : 

<iframe src="https://carbon.now.sh/embed?bg=rgba%28171%2C+184%2C+195%2C+1%29&t=seti&wt=none&l=auto&width=680&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=true&pv=56px&ph=56px&ln=false&fl=1&fm=Hack&fs=14px&lh=133%25&si=false&es=2x&wm=false&code=%253C%253Fphp%250Ainclude%28%27simple_html_dom.php%27%29%253B%250Aset_time_limit%2860%29%253B%250A%2524tanggal%253Darray%28%25222022-11-30%2522%252C%25222022-12-07%2522%252C%25222022-12-14%2522%252C%25222022-12-21%2522%252C%25222022-12-28%2522%29%253B%250A%250A%2524j%253Dcount%28%2524tanggal%29%253B%250A%250Afor%28%2524i%253D0%253B%2524i%253C%2524j%253B%2524i%252B%252B%29%257B%250A%2524html%2520%253D%2520file_get_html%28%250A%2522https%253A%252F%252Ffiskal.kemenkeu.go.id%252Finformasi-publik%252Fkurs-pajak%253Fdate%253D%2524tanggal%255B%2524i%255D%2522%29%253B%250Aforeach%28%2524html-%253Efind%2520%28%27strong%27%29%2520as%2520%2524element%29%250A%2509%2509echo%28%2520%2524element%29%253B%2520%2520%2520%250Aforeach%28%2524html-%253Efind%2520%28%27p.text-muted%27%29%2520as%2520%2524element%29%250A%2509%2509echo%28%2520%2524element%29%253B%250Aforeach%28%2524html-%253Efind%2520%28%27table%27%29%2520as%2520%2524element%29%250A%2509%2509foreach%28%2524element%2520-%253Efind%28%27img%27%29%2520as%2520%2524item%29%2520%257B%2520%2524item-%253Eoutertext%2520%253D%2520%27%27%253B%2520%257D%250A%2509%2509%2524element-%253Esave%28%29%253B%250A%2509%2509echo%28%2520%2524element%29%2520.%2520%27%253Cbr%253E%27%253B%250A%257D%250A%253F%253E" style="width: 833px; height: 558px; border:0; transform: scale(1); overflow:hidden;" sandbox="allow-scripts allow-same-origin"> </iframe>

<?php
include ('simple_html_dom.php');
set_time_limit(60);
$tanggal = array(
    "2022-11-30",
    "2022-12-07",
    "2022-12-14",
    "2022-12-21",
    "2022-12-28"
);

$j = count($tanggal);

for ($i = 0;$i < $j;$i++)
{
    $html = file_get_html("https://fiskal.kemenkeu.go.id/informasi-publik/kurs-pajak?date=$tanggal[$i]");
    foreach ($html->find('strong') as $element) echo ($element);
    foreach ($html->find('p.text-muted') as $element) echo ($element);
    foreach ($html->find('table') as $element) foreach ($element->find('img') as $item)
    {
        $item->outertext = '';
    }
    $element->save();
    echo ($element) . '<br>';
}
?>

http://hilite.me/

Tampilan setelah scrip dijalankan:

 

 

 

 

 

 

 

 

 

 

 

Hasil crawling tersebut bisa diolah mengunakan spreadsehet (excel), hasilnya bisa di download di Database Kurs Pajak 2010 sd 2024.xlsx

Semoga Bermanfaat 😁

 

Read More

Membuat Daftar File Menggunakan Javascript

Membuat daftar file yang sudah atau belum diterima terkadang sangat merepotkan karena jumlah file yang sangat banyak ataupun nama file yang sangat panjang sehingga menyulitkan untuk dilakukan pengecekan file yang sudah diterima.

Contoh daftar file yang diterima :


Untuk membuat daftar file tersebut, kita dapat menggunakan file .html sederhana yang dapat didownload di : App Membaca Daftar File.html

Langkah-langkah :

• Buka file .html tersebut dengan browser
• Tampilan pada browser :

• Klik tombol "Choose Files"
• Pilih semua file, kemudian klik Open

• Hasilnya :

• Olah hasil output tersebut menggunakan excel, sehingga menghasilkan laporan seperti berikut :

Semoga bermanfaat 😀

Read More

USB Modem Refresh - Auto Connection

Trik berikut digunakan untuk mengatur connect atau disconnect modem secara otomatis. Hal ini kadang diperlukan untuk me-refresh modem sehingga memulihkan kecepatan transfer data yang sempat turun. Memang belum ada penjelasan teknis tentang mengapa me-refresh (men-disconnect kemudian meng-connect-kan lagi) modem bisa memulihkan kecepatan transfer data. ( Jika ada yang tau, silahkan dishare di comment :) )

Script berikut juga dapat digunakan oleh Spammer, karena dengan me-refresh modem, kita akan mendapatkan IP address baru, sehingga hal tersebut bisa digunakan untuk mengelabuhi IP address filtering yang diterapkan oleh kebanyakan website. Misalnya, prosedur filtering yang diterapkan oleh www.aweber.com yaitu: posting akan di tolak jika posting tsb berasal dari IP address yang sama lebih dari 7 kali. (mungkin hal ini juga tergantung setting yang diatur oleh client).

Trik ini dijalankan menggunakan kombinasi script VBS dan Javascript berikut

Dim cConnectionName
Dim cUsername
Dim cPassword
Dim oShell
Dim i
'modem setting
cConnectionName = "Wireless Terminal" 'connection name
cUsername = "smart"
cPassword = "smart"
 
Set oShell = WScript.CreateObject ("WScript.shell")
 
for i = 1 to 1000 'number of connection: 1000 times connect/disconnect
oShell.Exec("rasdial /DISCONNECT")
oShell.Exec("rasdial """ & cConnectionName & _
 """ " & cUsername & " " & cPassword)
WScript.Sleep(8000) 'waiting 8 seconds before next connection : it use to uploading your form to target server
oShell.Run "http://localhost/submitform.php" 'change to your own form
WScript.Sleep(20000) 'waiting 20 second before disconnect command
next

(script dimodofikasi dari VBScript: Dialer Anti Mati – Modem EVDO Smart.) 

File submitform.php dapat berisi form asli yang sudah dimodifikasi untuk meng-upload data ke server target.

Semoga bermanfaat dan dipergunakan dengan bijak :)

Read More

jTable Wordpress Integration

In this tutorial, I will show you how to combine a jTable to wordpress's post or page. jTable is a jQuery plugin used to create AJAX based CRUD tables without coding HTML or Javascript. It has so many features that can simplify your "life" when you want to handle a complex table. Let's get started!

Step 1
Requirement:
1. wordpress-3.8.1
2. wordpress plugin : insert-javascript-css, download from www.nutt.net
3. jTable with PHP Samples, download from www.jtable.org

Step 2
1. Install and activate "insert-javascript-css" plugin to your wordpress

2. Create database (separate from wordpress main database) for jTable and create table "people" with data from Samples included (jtabletestdb.sql)

3. Edit SQL connection in "PersonActions.php" with your own setting for example :

$con = mysql_connect("localhost","root","root"); //change with your database connection setting mysql_select_db("jtabletestdb", $con);

4. Put jTable-PHP-Samples folder into wordpress folder

Step 3
1. Find "header.php" in your wordpress themes folder, I'm using hueman themes, so the "header.php" should stored in wp-content\themes\hueman\header.php . Edit "header.php" with inserting the jTable prerequisite script beetween <head></head> like this:


<title><?php wp_title(''); ?></title>
<link href="&lt;?php bloginfo('pingback_url'); ?&gt;" rel="pingback"></link>
<!--START INSERTING JTABLES PREREQUISITE SCRIPT -->
<link href="jTable-PHP-Samples/codes/themes/redmond/jquery-ui-1.8.16.custom.css" rel="stylesheet" type="text/css"></link>
<link href="jTable-PHP-Samples/codes/scripts/jtable/themes/lightcolor/blue/jtable.css" rel="stylesheet" type="text/css"></link>
<script src="jTable-PHP-Samples/codes/scripts/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/scripts/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script src="jTable-PHP-Samples/codes/Scripts/jtable/jquery.jtable.js" type="text/javascript"></script>
<!--END INSERTING-->


Step 4
1. Create a New Post
2. Insert Javascript/CSS (click the plugin icon)

Insert this script in the dialog box above and then "Save" :

<script type="text/javascript">
$(document).ready(function () {
//Prepare jTable
$('#PeopleTableContainer').jtable({
title: 'Table of people',
actions: {
listAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=list',
createAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=create',
updateAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=update',
deleteAction: 'jTable-PHP-Samples/codes/PersonActions.php?action=delete'
},
fields: {
PersonId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Author Name',
width: '40%'
},
Age: {
title: 'Age',
width: '20%'
},
RecordDate: {
title: 'Record date',
width: '30%',
type: 'date',
create: false,
edit: false
}
}
});

//Load person list from server
$('#PeopleTableContainer').jtable('load');
});

</script>

3. Insert in Post Content

<div id="PeopleTableContainer" style="width: 600px;"> </div>

4. View Your Post

Congratulations! You're done. :)

Read More