Cara Membuat Widget Web Proxy Helper di Blogger dengan Native JavaScript

---

Web proxy adalah layanan perantara yang menerima permintaan dari pengguna kemudian meneruskannya menuju website tujuan. Bagi server tujuan, koneksi dapat terlihat berasal dari server proxy, bukan langsung dari perangkat pengguna.

Pada artikel lama CodeFlare, widget proxy dibuat dengan sebuah form Blogger yang langsung mengirimkan URL menuju endpoint layanan proxy pihak ketiga.

Cara tersebut memang sederhana, tetapi mempunyai beberapa masalah. Endpoint internal layanan pihak ketiga dapat berubah sewaktu-waktu, pilihan server dapat tidak lagi tersedia dan blog tidak mempunyai kontrol terhadap bagaimana layanan tersebut memproses data pengguna.

Karena itu versi baru artikel ini menggunakan konsep yang lebih transparan bernama Web Proxy Helper.

Widget tidak berpura-pura menjadi server proxy. Blogger hanya melakukan validasi URL, menyiapkan alamat tujuan dan membantu pengguna membuka layanan proxy eksternal pada tab baru.

Pendekatan seperti ini lebih mudah dirawat karena tidak bergantung pada struktur form internal sebuah layanan proxy.

Informasi Singkat

---

HTML dan JavaScript pada Blogger tidak dapat menjadi forward proxy penuh dengan sendirinya.

Untuk menjalankan proxy sebenarnya diperlukan server/backend yang menerima koneksi pengguna kemudian meneruskannya ke server tujuan.

Widget dalam tutorial ini adalah helper/launcher untuk memvalidasi URL dan membuka layanan proxy eksternal. Aktivitas jaringan selanjutnya berada di luar sistem Blogger.

DAFTAR ISI

1. Apa Itu Proxy Server?
2. Bagaimana Proxy Bekerja?
3. Live Preview Web Proxy Helper
4. Kenapa Widget Lama Diperbarui?
5. Source Code Web Proxy Helper
6. Cara Memasang di Blogger
7. Pengaturan Widget
8. Proxy Bukan Jaminan Anonim
9. Perbedaan Proxy VPN dan DNS
10. Troubleshooting

Apa Itu Proxy Server?

Proxy server merupakan sistem yang berada di antara client dan server tujuan.

Tanpa proxy, browser biasanya berkomunikasi langsung dengan server website.

CLIENT Browser pengguna

PROXY Server perantara

WEBSITE Server tujuan

Ketika proxy digunakan, alurnya secara sederhana menjadi:

01

Client Mengirim Request

Browser mengirim permintaan menuju proxy.

02

Proxy Memproses Request

Proxy menentukan bagaimana request akan diteruskan.

03

Proxy Menghubungi Server Tujuan

Server tujuan menerima koneksi melalui alamat jaringan proxy.

04

Response Dikembalikan

Data dari server tujuan diteruskan kembali kepada client.

Namun implementasi proxy dapat sangat berbeda. Ada HTTP proxy, HTTPS proxy, SOCKS proxy, reverse proxy, forward proxy hingga sistem proxy berbasis protokol modern.

Bagaimana Proxy Bekerja?

Pada forward proxy, server tujuan biasanya menerima koneksi dari IP egress milik proxy.

Tetapi hal tersebut tidak berarti semua informasi pengguna otomatis tersembunyi.

Tergantung teknologi proxy yang digunakan, penyedia proxy dapat mengetahui tujuan koneksi, metadata tertentu atau bahkan isi request apabila terminasi TLS dilakukan pada layanan tersebut.

Proxy Dapat Melihat Tergantung desain, proxy dapat mengetahui tujuan atau metadata koneksi.

Website Tujuan Biasanya melihat koneksi dari IP egress proxy.

Anonimitas Tidak boleh diasumsikan hanya karena sebuah proxy digunakan.

Encryption Bergantung pada protokol, HTTPS dan desain layanan proxy.

Jangan Masukkan Data Sensitif Sembarangan

Hindari login ke layanan penting, memasukkan password, nomor kartu, data pekerjaan rahasia atau informasi pribadi melalui web proxy publik yang tidak Anda percaya. Penyedia proxy merupakan bagian dari jalur komunikasi.

Live Preview Web Proxy Helper

Widget berikut melakukan tiga hal: memeriksa URL, menormalkan protokol HTTPS dan membantu pengguna membuka layanan proxy eksternal.

Widget ini tidak mengirim URL ke server CodeFlare.

WEB PROXY HELPER URL VALIDATION SYSTEM

READY

Proxy Provider ProxySite hide.me Web Proxy

Masukkan URL yang ingin dipersiapkan.

NO URL SENT TO CODEFLARE NATIVE JS

Setelah URL valid, tombol Open Proxy membuka homepage penyedia proxy pada tab baru. URL tujuan juga otomatis disalin ke clipboard jika browser mengizinkannya sehingga dapat langsung ditempel pada layanan tersebut.

Cara ini sengaja dipilih daripada mengirim form langsung ke endpoint internal sebuah situs proxy yang dapat berubah tanpa pemberitahuan.

Layanan Eksternal

Ketika tombol Open Proxy digunakan, Anda meninggalkan CodeFlare dan membuka layanan milik pihak ketiga. Kebijakan privasi, keamanan, ketersediaan server dan cara pemrosesan data mengikuti layanan tersebut.

Kenapa Widget Lama Diperbarui?

Widget generasi sebelumnya mengirim form secara langsung ke:

https://us2.proxysite.com/includes/process.php?action=update

Selain itu daftar lokasi server seperti US1, US2, US3 sampai EU10 ditulis langsung pada HTML.

Masalahnya, endpoint seperti itu merupakan bagian internal dari implementasi layanan pihak ketiga. CodeFlare tidak mengontrol apakah endpoint, nama parameter atau daftar server tersebut akan tetap sama.

VERSI LAMA Direct Form Integration

Endpoint internal pihak ketiga

Server di-hardcode

Regex URL sangat panjang

Sulit dirawat

VERSI BARU Proxy Helper

Native URL parser

Tidak bergantung endpoint internal

Provider mudah diganti

Lebih transparan

Source Code Web Proxy Helper

Berikut source code widget yang dapat dipasang pada Blogger.

<div class="cfProxyWidget"> <div class="cfProxyWidgetHead"> <i class="fa fa-globe"></i> <span>WEB PROXY HELPER</span> </div> <div class="cfProxyWidgetBody"> <div class="cfProxyWidgetInput"> <i class="fa fa-link"></i> <input class="cfProxyUrl" type="text" placeholder="https://example.com" autocomplete="url" inputmode="url" /> </div> <label> Proxy Provider </label> <select class="cfProxyProviderSelect"> <option value="https://www.proxysite.com/"> ProxySite </option> <option value="https://hide.me/en/proxy"> hide.me Web Proxy </option> </select> <div class="cfProxyWidgetStatus"> Masukkan URL. </div> <div class="cfProxyWidgetButtons"> <button type="button" data-action="validate"> Validate </button> <button type="button" data-action="open" disabled> Open Proxy </button> </div> </div> </div>

<script> //<![CDATA[ (function(){ "use strict"; function normalizeUrl(value){ value=value.trim(); if(!value){ throw new Error( "Masukkan URL terlebih dahulu." ); } if( !/^https?:\/\//i.test(value) ){ value="https://"+value; } var url=new URL(value); if( url.protocol!=="http:"&& url.protocol!=="https:" ){ throw new Error( "Gunakan URL HTTP atau HTTPS." ); } return url.href; } async function copyUrl(value){ if( navigator.clipboard&& window.isSecureContext ){ await navigator.clipboard .writeText(value); return; } var area= document.createElement( "textarea" ); area.value=value; area.style.position="fixed"; area.style.opacity="0"; document.body.appendChild(area); area.select(); document.execCommand( "copy" ); area.remove(); } document.addEventListener( "click", async function(e){ var button=e.target.closest( ".cfProxyWidget [data-action]" ); if(!button)return; var widget=button.closest( ".cfProxyWidget" ); var input=widget.querySelector( ".cfProxyUrl" ); var provider=widget.querySelector( ".cfProxyProviderSelect" ); var status=widget.querySelector( ".cfProxyWidgetStatus" ); var open=widget.querySelector( '[data-action="open"]' ); var action=button.dataset.action; if(action==="validate"){ try{ var url=normalizeUrl( input.value ); input.value=url; input.dataset.validUrl=url; status.textContent= "URL valid dan siap digunakan."; open.disabled=false; }catch(err){ delete input.dataset.validUrl; open.disabled=true; status.textContent= err.message; } return; } if(action==="open"){ var validUrl= input.dataset.validUrl; if(!validUrl)return; try{ await copyUrl(validUrl); }catch(err){} window.open( provider.value, "_blank", "noopener,noreferrer" ); status.textContent= "Proxy dibuka. URL sudah disiapkan untuk ditempel."; } }); })(); //]]> </script>

Validasi utama terdapat pada:

var url = new URL(value);

Jika URL tidak valid, constructor tersebut menghasilkan error sehingga widget tidak perlu menggunakan regex URL yang sangat panjang.

Cara Memasang di Blogger

Widget dapat ditempatkan pada postingan, halaman statis atau gadget HTML/JavaScript.

01

Buka Tata Letak

Login ke Blogger kemudian buka menu Tata Letak.

02

Tambahkan Gadget

Pilih area tempat widget ingin ditampilkan.

03

Pilih HTML/JavaScript

Gunakan gadget HTML/JavaScript.

04

Paste Kode

Masukkan HTML, CSS dan JavaScript widget.

05

Simpan

Simpan gadget kemudian uji melalui halaman blog.

Untuk Banyak Halaman

Jika widget akan digunakan berulang kali, tempatkan JavaScript dan CSS satu kali pada template lalu gunakan hanya markup HTML widget pada halaman yang membutuhkan.

Pengaturan Widget

Daftar provider berada pada elemen:

<select class="cfProxyProviderSelect"> <option value="https://www.proxysite.com/"> ProxySite </option> <option value="https://hide.me/en/proxy"> hide.me Web Proxy </option> </select>

Jika salah satu layanan berubah atau tidak lagi tersedia, cukup hapus option tersebut.

Provider baru juga dapat ditambahkan:

<option value="https://alamat-provider.example/"> Nama Provider </option>

URL Input HTTP dan HTTPS.

Validation Native URL parser.

Clipboard Menyalin URL tujuan.

External Provider Dibuka pada tab baru.

Proxy Bukan Jaminan Anonim

Salah satu klaim yang sering ditemukan pada artikel proxy adalah bahwa menggunakan proxy otomatis membuat pengguna anonim.

Kenyataannya lebih kompleks.

01

Proxy Menjadi Perantara

Artinya penyedia proxy sendiri berada pada jalur koneksi.

02

Browser Tetap Membawa Informasi

Cookie, fingerprint browser, login account dan data aplikasi dapat tetap mengidentifikasi pengguna.

03

HTTPS Tetap Penting

Gunakan website HTTPS terutama ketika mengirim data sensitif.

04

Provider Mempunyai Kebijakan Sendiri

Logging dan retention data berbeda antara satu provider dengan provider lainnya.

Privasi

Jangan menggunakan web proxy gratis sebagai alasan untuk menganggap aktivitas internet tidak dapat dilacak. Perlindungan privasi bergantung pada keseluruhan sistem, bukan hanya perubahan alamat IP yang terlihat oleh website tujuan.

Perbedaan Proxy VPN dan DNS

Web Proxy

Biasanya memproses aktivitas browser atau URL tertentu melalui website proxy.

Scope: halaman tertentu

VPN

Membuat tunnel jaringan yang dapat mencakup lebih banyak trafik perangkat.

Scope: jaringan/perangkat

DNS Resolver

Menerjemahkan nama domain menjadi alamat jaringan. DNS bukan forward proxy untuk konten web.

Scope: resolusi domain

Reverse Proxy

Berada di depan server website dan bekerja atas nama server, bukan sebagai proxy browsing pengguna.

Scope: server origin

Sebagai contoh, reverse proxy seperti yang digunakan banyak CDN mempunyai fungsi yang berbeda dari web proxy yang dibahas dalam artikel ini.

Pada sistem privacy proxy modern, koneksi juga dapat menggunakan HTTP CONNECT atau protokol tunnel lain. Cloudflare, misalnya, mendokumentasikan Privacy Proxy berbasis HTTP CONNECT dan MASQUE sebagai layanan forward proxy terkelola.

Troubleshooting

URL dianggap tidak valid

Masukkan hostname yang benar. Jika protokol tidak ditulis, widget otomatis mencoba menggunakan https://.

Provider tidak terbuka

Browser mungkin memblokir popup atau alamat provider sudah berubah. Buka provider secara manual dan perbarui value pada option.

URL tidak otomatis masuk ke proxy

Memang sengaja demikian. Widget baru tidak bergantung pada parameter internal provider. Copy URL kemudian paste pada layanan yang dipilih.

Copy URL gagal

Clipboard API dapat dibatasi pada kondisi tertentu. Widget dapat tetap membuka provider dan URL dapat dicopy manual dari input.

Website tujuan tidak bekerja melalui proxy

Beberapa website menggunakan WebSocket, DRM, login khusus, anti-bot, JavaScript kompleks atau kebijakan jaringan yang tidak kompatibel dengan web proxy tertentu.

IP saya masih terdeteksi

Periksa apakah request benar-benar berjalan melalui layanan proxy. Browser juga mempunyai berbagai mekanisme lain yang dapat digunakan untuk mengenali sesi atau perangkat.

NETWORK POLICY

Gunakan layanan proxy sesuai hukum, kebijakan jaringan, aturan sekolah/kantor dan ketentuan layanan website yang sedang digunakan. Jika sebuah jaringan membatasi akses untuk alasan keamanan atau administrasi, gunakan jalur akses yang diizinkan oleh pengelola jaringan.

Pembaruan terbesar pada widget ini adalah memisahkan fungsi Blogger dengan fungsi server proxy.

Blogger hanya menjalankan interface dan JavaScript pada browser. Blogger tidak menerima lalu meneruskan seluruh trafik website tujuan seperti server proxy sungguhan.

Karena itu istilah Web Proxy Helper lebih tepat daripada mengatakan bahwa kode HTML ini membuat sebuah proxy server di Blogger.

Pendekatan ini juga membuat widget lebih mudah dipelihara. Jika suatu layanan proxy berhenti tersedia, cukup ganti alamat providernya tanpa harus memperbaiki form, daftar server dan parameter internal yang mungkin sudah berubah.

Untuk kebutuhan privasi atau jaringan yang lebih serius, pilih layanan yang mempunyai dokumentasi teknis dan kebijakan privasi yang jelas daripada mengandalkan proxy publik yang tidak diketahui pengelolanya.

Referensi Teknis Dokumentasi mengenai URL dan proxy.

JavaScript URL API How Privacy Proxy Works