RFC: Cara kerja kompresi kecilin pada browser dan server

README.md

RFC: Cara Kerja Kecilin Compression Service Pada Browser

Penjelasan secara teknikal cara kerja servis kompresi kecilin, baik pada browser maupun pada proses pada saat di server

Browser

Gambar berikut menjelaskan cara kerja browser extension :

Berikut langkah langkahnya :

1. Extension Meng-intercept request dari browser

Browser extension mendapatkan permission khusus yang dapat digunakan untuk membaca web request permission tersebut dapat dilihat disini

Beberapa API browser yang digunakan :

onBeforeRequest

onBeforeRequest digunakan untuk menangkap request yang dilakukan oleh browser, jadi semua request terbaca apa bentuk-nya / tipe (image, xmlhttprequest, blob) dengan API ini kita mengambil request yang hanya ber-tipe gambar saja (tidak lebih).

Setelah url kita dapatkan misal https://placekeanu.com/700/350, url tersebut dirubah dengan url yang menuju ke server kita untuk di kompress, menjadi seperti ini http://103.52.44.68/?url=https%3A%2F%2Fplacekeanu.com%2F700%2F350&jpeg=0&bw=1&l=40

2. Gambar diteruskan ke server kita

Karena URL yang di request oleh user tadi kita ubah menjadi http://103.52.44.68/?url=https%3A%2F%2Fplacekeanu.com%2F700%2F350&jpeg=0&bw=1&l=40 (URL khusus menuju server kita) maka otomatis image yang user dapat adalah image yang sudah ter-kompresi oleh server kita.

3. Server kita me-request gambar ke server yang mempunyai gambar asli (origin)

Jika diperhatikan baik baik, URL kita sebenarnya berisi query params seperti berikut :

url : https://placekeanu.com/700/350
jpeg : 0
bw : 1
l : 40

url url image asli, jpeg apakah gambar merupakan jpeg atau bukan, bw opsi hitam putih (sudah dimatikan), l kualitas kompresi gambar.

4. Server kita menerima gambar balikan, lalu di kompresi

Jadi nanti server kita akan me-request image asli-nya melalu data url querParams yang didapatkan dari extension lalu di kompresi tanpa menyimpan image tersebut terlebih dahulu di server, proses dilakukan di memori.

5. Server proxy kita mengembalikan request ke extensi.

Sebelum ditampilkan ke user, kita perlu memberi tahu browser bahwa ini adalah image yang di request oleh user. dengan mengubah headers dari image tersebut. Itu dilakukan dengan API browser webrequest bernama onCompleted dan onHeadersReceived.

Setelah informasi yang didapat oleh user benar maka image akan muncul pada browser user.

Server

Cara kerja server sangat simpel,

1. Me-request image asli (berserta cookie-nya jika ada, untuk user yang ter autentikasi)
2. Meng kompres image asli
3. Mengirim image asli ke pada user

Hot Take (rangkuman)

Untuk membuat aplikasi mobile yang dapat seperti ini maka deperlukan hal inti sebagai berikut.

1. Aplikasi bisa membaca seluruh request user (network request)
2. Aplikasi dapat mengubah URL yang di request user
3. Aplikasi mendapatkan permission dari user (mengingat kita membaca semua request user)
4. Saat request selesai aplikasi, dapat menerima dan mengubah informasi gambar (origin, header,cookie, sebagainya)

Bukan VPN

VPN mengubah Remote Address si penerima (remote address adalah origin si peminta request user, IP si user) dapat dibaca di sini.

VPN tidak mengubah URL si network request.

Thanks

Terimakasih untuk waktunya