Ngobrolin CORS & Browser Policy
Ringkasan Episode
Bantu KoreksiEpisode Ngobrolin WEB ini membahas secara mendalam tentang kebijakan keamanan browser (browser security policy) dengan fokus utama pada CORS (Cross-Origin Resource Sharing), CSP (Content Security Policy), dan CORP (Cross-Origin Resource Policy). Pembahasan dimulai dengan pengalaman umum developer yang sering mengalami masalah CORS saat mengembangkan aplikasi web, terutama saat frontend dan backend terpisah. Host menjelaskan bahwa CORS adalah mekanisme keamanan browser yang mencegah website dari origin berbeda mengakses resource tanpa izin, yang dikenal sebagai Same-Origin Policy. Mereka membahas solusi praktis untuk mengatasi CORS, termasuk penggunaan Chrome extension untuk development (sebagai solusi sementara) dan konfigurasi yang benar di sisi server dengan middleware seperti cors di Express.js atau Laravel CORS. Diskusi kemudian meluas ke Content Security Policy (CSP), yang merupakan header HTTP untuk mencegah serangan XSS (Cross-Site Scripting) dengan mengontrol apa saja resource yang boleh dimuat di halaman web. Mereka menjelaskan berbagai directive CSP seperti script-src, style-src, img-src, dan penggunaan hash untuk validasi script. Terakhir, mereka membahas Cross-Origin Resource Policy (CORP) yang lebih spesifik untuk mencegah website lain meng-embed resource kita dalam konteks mereka, sebagai perlindungan terhadap serangan side-channel seperti Spectre dan Meltdown. Seluruh diskusi dikelilingi dengan contoh praktis, pengalaman pribadi, dan humor khas Ngobrolin WEB.
Poin-poin Utama
- •CORS (Cross-Origin Resource Sharing) adalah mekanisme keamanan browser yang menggunakan HTTP headers untuk mengizinkan atau memblokir request antar-origin berbeda sebagai pelonggaran terkontrol dari Same-Origin Policy
- •Solusi paling umum untuk masalah CORS adalah menambahkan header Access-Control-Allow-Origin di sisi server, yang dapat dikonfigurasi untuk origin spesifik atau menggunakan wildcard (*) untuk development
- •Chrome extension sering digunakan sebagai solusi cepat untuk bypass CORS di lingkungan development lokal, namun tidak boleh digunakan di production karena alasan keamanan
- •Content Security Policy (CSP) adalah header HTTP yang mencegah serangan XSS dengan mengontrol resource apa saja (script, style, image, font, dll) yang boleh dimuat dari origin mana saja
- •CSP memiliki berbagai directive seperti script-src, style-src, img-src, default-src, dan fitur canggih seperti nonce dan hash untuk validasi integritas script yang dimuat
- •Cross-Origin Resource Policy (CORP) berfokus pada mencegah website lain meng-embed resource kita (image, halaman web, dll) dalam konteks mereka sebagai perlindungan terhadap serangan side-channel seperti Spectre dan Meltdown
- •Hampir semua framework web modern (Express.js, Laravel, Next.js, Go, dll) memiliki middleware atau konfigurasi bawaan untuk mengimplementasikan CORS, CSP, dan CORP dengan mudah
[musik]
Halo selamat malam semuanya, selamat bertemu lagi Selasa Malam waktunya ngobrolin web.
Iya ngobrolin web, plus latensi. Seperti biasa kita ketemu di Selasa Malam rencananya bertiga,
cuman Ivannya belum ada kabar, mudah-mudahan nanti nyusul ya. Jadi ini kita udah episode keberapa ya?
Episode 125 ditambah 1. Sebenarnya 126, kita over 1 error karena mulainya dari 0.
Mulainya dari 0, jadi sebenarnya 126 ya. Episode ke 126, tapi ini adalah episode 125.
Bingung kan? Jadi malam ini sesuai sama voting kita minggu lalu kita akan bahas.
Tapi kita bingung sendiri.
Iya, tentang browser policy atau ada banyak ya. Ada course, ada CSP, ada COOP, ada COEP, ada macem-macem.
Nah di sini teman-teman siapa yang tidak pernah merasakan mengalami CORS? Kayaknya nggak ada ya.
Semua pasti pernah kena ya. Apalagi yang sudah bermain-main dengan API gitu kan.
Terus tiba-tiba kok. - Tiba-tiba nggak bisa.
- Nggak bisa, terus error. Apa namanya, course itu kepanjangannya adalah?
- Cross origin, resource. - Cross origin, resource sharing.
Tetap nggak membantu. Walaupun udah tahu kepanjangannya apa, kalau misalnya kita baru pertama kali ketemu.
- Tetap nggak ada yang bingung, nggak ada idea gimana solving-nya.
Nah salah satu solving yang paling sering kita lakukan adalah pakai Chrome extension.
- Chrome extension. - Karena bingung.
- Apalagi kalau anak Chrome N ya. Maksudnya kalau yang nggak paham secara keseluruhan full stack,
cuma butuh leverage atau dulu Axios, bikin request ke suatu endpoint, tiba-tiba nggak bisa pusing.
Pakai Chrome extension, langsung bisa, senang. Tapi pas waktunya di deploy, bingung.
- Itu sebenarnya yang dilakukan oleh Chrome extension itu apa?
Dia melakukan update terhadap headers ya, hitusnya kliennya.
- Tapi ya cuma buat saat itu doang, buat di doktor kita sendiri tentunya.
- Kalau misalkan headers yang dimanipulasi itu kita taruh misalkan pada saat kita pakai Fetch atau Axios,
itu bisa juga atau nggak bisa?
Nah value-nya apa dan request yang dihasilin gimana itu sebenarnya jujur gue belum pernah ngelik segitu jauh sih.
Karena terus setelah tahu cara kerjanya gimana, ya kan ternyata di handle aja.
Tinggal di white list, tinggal di allow list dari server site-nya kan.
- Misalnya kita pakai, apalah kita mau pakai, kita pakai Laravel, Express atau Puno, atau apapun lah.
Lihat transkrip lengkap (2070 segmen lagi)
Itu kan pasti ada semacam middleware buat course, buat white list.
Kita lagi mau develop apa nih? Ya udah, tinggal pakai itu sebetulnya.
- Iya, kalau cara benarnya adalah kita tambahkan di sisi server kan.
Cuman kan kadang-kadang hanya untuk mencoba itu kan misalkan timnya udah lumayan gede.
Terus kita harus, ya birokrasi lah ya, harus ngubungin tim back-end, tolong tambahin dong.
Saya kena course gitu kan.
Atau taruh di comment di tiket gitu kan, wah ini kena course nih harus tambahin, itu kan harus nunggu dulu kan.
- Kita musuhan sama teman kerja yang in charge server site-nya.
Bisa doang, bisa-nya gitu kan.
- Terus gimana? Ya udah kita pakai extension kali ya.
- Iya pakai extension, salah satu solusinya juga sebenarnya, solusi sementara.
Sambil menunggu, mungkin kita udah report, tapi daripada kerjaan kita ke blocker, ke blocking,
mendingan ya udah kita lanjut kerja dengan menggunakan extension kali ya.
- Nah sambil buka itu tadi Iseng minta tolong Jemin Nae jelasin dari awal course itu apa sih.
Nah ternyata hasilnya lumayan tuh, coba deh buka.
Karena males cari-cari artikel yang representatif, tapi nggak usah terlalu detail implementasinya.
- Hmm ini, eh nggak kebuka, ini.
- Nah zoom in.
Nah ini gambar besarnya dulu, maksudnya belum masuk kode-kode-nya dulu, kayak definisi aja.
Nah kan by default web browser itu punya kebijakan policy same origin, ya demi keamanan kan.
Maksudnya biar nggak disalah gunain tiba-tiba website lain apa itu, apa namanya,
nge-bombardir request ke API kita, jebol.
- Jebol ya, jadi kayak DDoS juga jatuhin ya.
- DDoS, tapi apa dengan request dari website lain.
- Jadi yang paling aman adalah request itu terjadi di origin yang sama, itu yang paling aman.
Kalau berbeda origin itu kita server-nya harus memberikan izin, ya kan.
Apakah diperbolehkan atau tidak, karena berbeda origin.
Origin ini apa ya, sumber ya, sumber data mungkin ya.
- Nggak tahu terjemahannya apa. Ini hal-hal yang sulit diterjemahkan ke bahasa Indonesia.
Origin asal, asal-muasal. - Asal, asalnya sumber data-nya lah data.
- Apakah asal domain, domain kan, protocol dan domain, protocol, domain, dan port.
Nah, ya gitu lah. Nah, ini course adalah mekanisme yang menggunakan HTTP headers untuk,
ya itu tadi untuk mengijinkan yang by default dilarang.
Cuma ini jadi apa, ngasih permission, ngasih izin khusus untuk mengakses suatu resource tertentu.
Cara untuk merelex, melonggarkan same origin policy, tapi ini in a controlled manner.
Jadi nggak serta-merta semua diijinkan untuk mengakses resource kita, API kita.
Harus terkontrol, terkontrolnya ya itu pakai header key tertentu atau field tertentu.
Nah, kenapa diperlukan? Kayaknya udah ya tadi.
- Iya, jadi kalau modern web development, modern.
Ada front-end, kemudian dia biasanya ambil data dari API, gitu kan.
Terus mungkin ada fonts, analytics, script, ada third party, blablabla, gitu kan.
Terus juga kalau, apa security apa, wild design,
is crucial preventing malicious script on one side, accession, nggak ya.
Ini namanya interoperability. Terus ini maksudnya apa, tujuannya untuk itu ya?
Kenapa kita perlu course?
- Mungkin di era sebelumnya, web development itu antara front-end sama back-end jadi satu.
Seringnya server render istilahnya sekarang. Kalau dulu kan, request-request...
- Gak dikeluarkan site-request sekali, semua server-site.
- Iya, datanya di server-site semua.
Di database, di query, masuk ke server, udah ditampilin tuh dengan template, kan.
Abis itu nanti mungkin ditambahin JavaScript, tapi hanya sebagai intraksi.
- Ya visual aja. - Ya, form validation, gitu kan.
Form validation, buka-tutup menu, dan lain-lain.
- Sampai kalau klik like, misalnya ya reload ke apa semua SSR.
- Iya. Nah, abis itu baru muncul tuh kayak tombol like aja.
Nah, tombol like mungkin bisa di fetch.
Kalau dulu belum ada fetch, ya. Mungkin masih pakai...
GQuery kali ya, dot-post gitu kan. Dot-post, dollar-post.
Atau pakai XML apa tuh, yang panjang banget tuh.
- XR, XML. - XR, XML.
Begitu diklik, dia akan kontak ke server.
Mungkin servernya tetap sama kan, gitu kan.
Cuman supaya nggak nge-refresh aja tujuan dari misalkan tombol like kan.
Kalau tombol like nge-refresh kan kayaknya lucu ya.
Jadi diakalin dengan cara dia nembak ke API, ke server kita sendiri,
ke backend kita sendiri, mungkin di mesin yang sama
untuk mengupdate si tombol like-nya atau counter, dan lain-lain.
Dari situ bertambah lagi use case-nya.
Ada juga yang menambahin script untuk analytics, untuk tadi kan, apa?
- Static asset. - Embedded phone.
Iya, static asset, image, dan lain-lain.
Akhirnya, mungkin ada yang, apa ya, antara ada yang
pernah mengeksploitasi itu yang kayak kena di DOS dan lain-lain ya.
Jadi orang melihat, wah ini ada peluang untuk membuat sebuah server jadi down, gitu.
Ya udah, fetch aja berkali-kali terus menerus, gitu kan.
Mungkin dia pakai script untuk menyerang sebuah server gitu yang API-nya terbuka
karena nggak ada course tadi, akhirnya servernya jadi,
kalau nggak down, tagiannya membengkak kalau sekarang ya.
Kalau dulu mungkin down aja ya, karena servernya kan...
- Iya mati. - Iya mati, servernya nggak kuat, gitu.
Karena kalau dulu kan mungkin auto-scaling belum terlalu populer ya.
Gitu. Dan semakin kesini, akhirnya si browser berbenah.
Ya udah, kalau bisa dilimitasi. Makanya akhirnya kita...
- By default harus aman. - Harus aman, ya.
Awalnya nggak ya, awalnya, ya awalnya nggak.
- Awalnya nggak ada fitur itu. - Terbuka.
Karena belum ada use case-nya kan. Iya, belum ada kebutuhannya.
Terus baru ditambahkan sekarang, apa, kalau misalkan kita mau akses
antara server apa, API, kadang-kadang kan ada API yang sebenarnya public.
Tapi, apa gimana ya, bisa diakses public tapi sebenarnya bukan untuk konsumsi public ya.
Mungkin karena sekuritasnya kurang aja, gitu kan.
Jadi dia terbuka, tapi nggak ada dokumentasi, nggak ada apa.
Nggak kayak kita panggil API apa ya, API, Pokemon API misalkan.
Itu kan jelas terbuka, ada dokumentasi lengkap.
- Mungkin ada perusahaan tertentu yang membuat sebuah API yang public tapi tidak terdokumentasi.
- Ya itu sebetulnya itu untuk keperluan si misalnya perusahaan itu punya public-facing site keberapa.
Jadi nggak perlu dikunci pakai token juga semua.
Karena kalau misalnya apa ya, landing page gitu, landing page atau marketing page
kan nggak perlu pakai login kan, nggak perlu pakai token atau semacamnya.
Jadi ya udah, on paper di atas kertas public tapi sebetulnya untuk keperluan internal.
Nggak internal sih, keperluan si pembuatnya.
Ini sebenarnya mau kita pakai framework apapun, itu tadi kan pasti udah ada middleware-nya.
Tapi apa yang terjadi sebetulnya kayak gini nih.
- Implementasi dari course.
- Ya, jadi kalau misalkan kita di sisi client itu kena error KORS,
itu solusi paling idealnya adalah harus ada implementasi tambahan di sisi server ya.
- Di server side-nya kita tambahin aja tuh, tinggal access control, allow origin.
- Iya, ini kita tambahin di headers. Nah kadang-kadang, bukan kadang-kadang sih,
di Express itu ada NPM yang untuk menambahkan ini.
Jadi tinggal NPM install KORS, habis itu tinggal import dan...
- Tinggal masukin middleware-nya kan?
- Request-nya dibungkus ke middleware KORS ini yang sebenarnya dia cuma nambahin ini aja.
- Atau kita bisa customize origin yang kalau mau aman sih ya.
- Ini yang pertama ya, jadi kita harus kasih tahu bahwa kita hanya memperbolehkan
client untuk request data server itu dari Myfrontend.com.
- Kalau origin-nya dari apa aja?
- Myfrontend.com atau apapun yang kita define ya, apa yang kita tulis gitu.
Sedangkan kalau menggunakan wildcard atau bintang itu artinya semua boleh.
Nah ini jadinya kurang secure lagi jadinya kan?
- Iya, cuma kalau emang kita lagi, misalnya kita lagi develop juga,
kita lagi running di lokal, ya nggak apa-apa juga sih. Jangan di-push, jangan di-deploy.
Ya jadinya malah kayak tadi ya, API yang sebenarnya tidak seharusnya dikonsumsi oleh publik, terbuka jadinya.
Kalau ketahuan kan, jadi bisa dimanfaatkan sama orang-orang yang tidak bertanggungjawab.
- Ya kayak misalnya rumah kan, rumah by default ini sama browser, kita udah dikasih pager.
Pagernya ditutup dan di gembol pintu rumahnya juga dikunci kan, itu by default aman lah.
Cuma kan ya tergantung kebutuhan, misalnya kita lagi apa lah, lagi berkebun atau apa,
atau kita lagi ada mobil tamu mau masuk, ya kan kita harus buka pager.
Maksudnya itu tadi makanya ada phrasing bagus dari Jim Noy, in a controlled manner.
Perkendali kita buka pintu kalau emang mau misalnya ada tamu mau masuk atau apa.
Atau kita mau ngapain di kebun, di halaman depan.
Nah kalau ada tamu mau masuk ke dalam garasi kita, rumah kita ya kita buka pager.
Atau kalau lagi apa lah, jabakti atau apa yang emang ramai-ramai depan rumah,
ya mungkin pager kita dibuka nggak apa-apa, pintu dibuka nggak apa-apa.
Tapi kan kita tungguin di depan rumah kan, nggak tiba-tiba ditinggal pergi aja.
Jadi maksudnya itu ya mau pake apa?
Terserah aja, udah dicahkan kita ya.
Asal kita tahu itu kenapa dan jangan sampai, ya itu kebabasan misalnya di deploy ke prod,
ya itu bahaya.
Kalah sendiri gitu ya, tanggung jawab sendiri gitu ya.
Kalau untuk sementara misalnya kita lagi develop di lokal atau kita push ke staging site
yang misalnya emang diprotek pakai cara lain, ada passwordnya atau apa ya, nggak apa-apa juga.
Nah selain kita bisa protek origin, kita juga bisa protek metode.
Hanya memperbolehkan misalkan hanya get aja.
Gak boleh post, nggak boleh update, nggak boleh delete ya.
Nah itu juga bisa. Jadi misalkan kita buka untuk semua, tapi hanya get aja.
Ini kan tidak terlalu membahayakan ya.
Mungkin bisa bikin server kita lebih sibuk, tapi lebih bahaya kalau bisa post.
Tapi nggak mau, data besok.
Terus juga kita juga bisa mengatur header apa aja yang bisa diterima.
Dan kita juga bisa mengatur header apa aja yang dikirim dari server ke klien gitu ya.
Nah ini juga ada contoh yang menarik yang dalam bahasa Indonesia yang di GitHub ya.
Oh bagus banget tuh.
Eh keren ya.
3 tahun yang lalu, keren ya.
Panduan singkat.
Ini sampai berapa tahun juga kayaknya nggak bakal berubah di luar contoh framework ya.
Iya, dan kontributurnya 2 orang doang ya.
Luar biasa.
Jadi kalau pakai API external, gunakan cara cepat.
Cara cepat itu adalah menggunakan, mana dia? Ini diklik ya.
Ya diklik aja.
Cara cepat adalah menggunakan extension.
Tapi jangan gunakan cara ini, di gunakan production ya.
Itu tadi, cuma pun di lokal aja.
Iya, bukan bisa di lokal.
Terus kalau nggak tahu, server externalnya pakai cara cepat juga.
Serversenya dari mana? Coba diklik cara cepatnya masuk mana?
Sama.
Diklik.
Oh sama juga.
Sama-sama.
Jadi dia kan kita nggak tahu teknologi ini pakai apa gitu kan.
Nah, kalau misalkan udah tahu, nah bisa ya ini ya.
Tapi bagus sih cara dia jelasinnya kan step by stepnya.
Apa bagus sih? Bisa jadi nggak ngerti, jadi ngerti kalau menurut gue.
Domain adalah domain server front-end yang kamu gunakan, bukan domain server API yang bermasalah.
Terus, nah ini ada API-nya.
Nah kirain maksudnya domain front-endnya, taunya API-nya.
Iya, nah di sini meskipun baru ada 3 teknologi ya.
Ada Node.js, atau Deno dan Boon.
Ini 3 tahun lalu.
Full request aja kalau mau.
Ini ada full request-nya nggak?
Ada bisa, dia ngundang full request tuh.
Iya, jadi kalau temen-temen menggunakan teknologi yang lain di luar ini yang tadi,
bisa lakukan full request misalkan pakai Hono atau pakai Deno.
Yaitu kita tahu lah, tinggal googling aja lah, udah ada contoh-contohnya tuh.
Berarti mustahil framework lain pun mirip-mirip kayak gitu.
Sama, yang penting bisa manipulasi header udah itu aja intinya ya.
Nah ini yang paling banyak justru dari Node.js dan Go ya.
Go paling lengkap kayaknya 1, 2, 3, 4, 5.
Ya mungkin dia pengguna Go kali. Sebetulnya dari ekosistem JS ya banyak banget juga.
Cuma mungkin yang bikin anak Go.
Betul, belum anak Go yang bikin.
Itu dari mulai basic build-in library ya.
Node.js juga ada build-in library-nya.
Mau pakai Express juga bisa, misalkan contohnya Express nih yang paling umum ya.
Sebenarnya, oh dia nyontohin pakai install ya, install middleware ya.
Itu kan di NPM install course.
NPM install, abis itu tinggal dipungkus middleware-nya.
Tapi sebenarnya kelihatan gak sih intinya? Apa yang dilakukan oleh si course ini?
Buka aja GitHub-nya ada gak sih?
Kalau manual, oh udah termasuk ya, udah termasuk ke Express package-nya berarti ya.
Bagian dari official package-nya ya.
Ya, udah diinclude.
Tapi tadi masih install.
Tuh, gak ada embel-embel Express-nya ya.
Atau mungkin dependensinya Express, gak tahu. Kayaknya dulu nginstall ya saya ingat.
Di dokumentasinya Express.
Coba installation.
Nah tetep nginstall, tuh loh.
Nah, NPM install course.
Berarti diakuisisi kali ya, diakuisisi.
Ya maksudnya kalau di istilah itu blessed diakuisisi.
Akuisisi diambilkan.
Gak akuisisi juga sih, kayaknya gak deh.
Diangkat anak gitu ya, diangkat anak.
Dikasih sertifikasi.
Iya.
Kalau manual gak ada ya, cara manual gak ada ya.
Gak dikasih tahu ya.
Manual itu nge-set HTTP header pusing misalnya kalau domain kita lebih dari satu.
Kalau kita pakai HTTP library yang bawaannya Node.js kan,
headers-nya kita definisikan.
Terus udah, tinggal write head kan.
Ya, pusing sih.
Gitu, betul.
Jadi berbaris-baris ya.
Berbaris-baris ya.
Nanti di bawah ada lagi.
Oke.
Kalau ini origin, terus kalau misalkan kita mau tambahin domain lagi gimana?
Di bawahnya lagi atau?
Bisa array ya.
Ini dokumentasinya.
Express.
Ini origin masih yang pakai array, eh pakai array, string.
Nah tuh array, bisa array kalau, apa?
Kalau pakai...
Oh ini ya?
Iya.
Oke.
Nah itu kalau menggunakan...
Ini ya, apa namanya?
Library.
Kalau enggak, ya harus manual gini.
Harus manual.
Terus Fastify juga pastinya sama.
Kurang lebih.
Ini adalah fungsi ya.
Jadi fungsi.
Sama aja kayak gini.
Tadi ini, course.
Terus Next juga ada.
Tentunya.
Ini masih pakai unofficial, kalau sekarang mah udah ada dari...
Udah ada ya.
Bawaan XJS-nya.
Ada kok.
Oke.
Terus kalau untuk Laravel.
Laravel juga menggunakan library.
Udah ada middleware-nya.
Ya, udah ada middleware-nya.
Konsep middleware ini di hampir semua web.
Full stack atau super site.
Pasti ada.
Pasti ada.
Ini menggunakan...
Library namanya Laravel course.
Terus cara definisinya begini.
Oh harus buat file konfigurasi juga.
Yang diallow apa aja.
Ini bisa terima array.
Sedangkan untuk Go.
Nah ini manual ya.
Ini manual.
Tanpa terparti.
Ya jadi banyak ya.
Mirip seperti NodeJS-nya tadi ya.
Mirip.
Terus kalau menggunakan course.
RS course ini.
Apa namanya?
Library tambahan.
Itu panjang juga ya.
Kalau gin juga sama.
Ya itu sintaksinya emang begitu.
Chi, ah ini baru dengar chi.
Ada gin, ada chi.
Ada fiber.
Ada echo.
Beneran nggak tahu itu semua apa.
Web framework.
Ya, back-end lah.
Nah itu tuh kalau Next.js.
Ada contohnya di private chat.
Coba dibuka deh.
Enak, simple malah apa.
Nggak usah install apa-apa.
Pakain next konfig.
Oh udah ada ya.
Pakain next konfig.
Duh.
Nah udah.
So simple itu.
Terus bisa pakai semacam wildcard atau apalah itu.
Ayo dari mana?
Lupa.
Kirain jam 9.
Astaga.
Bersambung.
Ya ampun.
Kan ada.
Light-saving time.
Udah ada light-saving time.
Kursus bekasinya udah ada light-saving time.
Karena bekasi beda memang.
Astaga.
Kirain ada.
Gua kirain.
Kira-kira ada meeting atau apa.
Iya sih.
Gua baru meeting selesai jam 7.
Ya kan ingatnya.
Oke jam 9.
Ya, gua masak-masak dulu.
Masakin buat anak sama bini gitu.
Terus liat.
Baru liat handphone.
Salah selagi lah.
Oh sial.
Bukan liat handphone.
Lihat ada notifikasi ngobrol.
Oh my God.
Karena pas gua masak, jam tangan nggak gua pake.
Oh notif juga ini ya.
Jadi notifnya nggak masuk.
Ivan kena kursus.
Kena kursus.
Iya.
Kursus origin.
Waktu Indonesia bekasi.
Waktu Indonesia bikin bekasi.
Maafkan aku.
Maafkan aku.
It's okay, it's okay.
Gak apa-apa. Kita baru bahas tentang course yang.
Sekumanya jelasin selain course.
Kan ada apa tuh?
Sekumanya jelasin ini, gua nggak tahu.
Ini course udah mau keluar nih.
Iya.
Ini kita lagi bahas
gimana enable course di Next.js.
Komplementasi di berbagai
full stack atau server side.
Banyak banget.
Awalnya.
Pengalaman dulu.
Masih awal-awal dulu masih mainan jQuery.
Terus Ajax.
Terus Ajax-nya kan ke domain berbeda.
Terus domain berbedanya kena course.
Ah bodo amat.
Langsung bikin aja bintang dari server.
Hahaha.
Nggak.
Terus di deploy.
Terus di deploy.
Karena servernya kita juga.
Jadi cuma domainnya aja
berbeda. Kan jamannya microservice
ya kayak keren-kerenan aja.
Kayak microservice API-nya sendiri
itu domainnya.
Terus domain.
Padahal ngerjain satu orang.
Padahal ngerjain satu orang bikin susah hidup ajalah pokoknya jaman itu deh.
Nah.
Terus ya waktu
browser baru mulai muncul ada course.
Terus kena deh course.
Apa ini course itu.
Terus baca stack overflow.
Baca stack overflow.
Kasi bintang.
Oh iya udah.
Oh iya bisa.
Servernya SPAP-nya
PHP-nya masih
CI. Jadi bikin aja langsung header
course bintang.
Allow headers
ho bintang. Udah.
Jadinya beres deh.
Ya.
Kalau kenal sama
orang yang pegang servernya
atau yang pegang servernya kita sendiri.
Itu biasanya solusi paling
paling gampang ya kan.
Tapi kalau misalkan kita gak kenal sama
orang yang pegang servernya atau
terparti API. Biasanya pakai
ya tadi extension.
Atau aja kenalan sama
kita API-nya. Kenalan dulu ya.
Kenalan dulu ya.
Aja kenalan tapi udah ada beli-beli ke batu.
Cuma minta alo
dengan saya dong.
Oh iya dong. Itu kan
nge-blocking kerjaan kita.
Dan juga harus
ujung-ujungnya dia
tetep harus ganti kan. Pada saat
misalkan Cusco Productions kan
gak bicisah kalau gak diallow.
Chrome extension cuma buat develop
di lokal aja sih.
Hmm.
Ya. Jadi
itu dia pembahasan kita
tentang course. Yang saya yakin
semua temen-temen pasti pernah enggak.
Course terkena banyak temennya.
Temen-temen yang lain yang kita
belum kenal ini.
Iya betul.
CSRS.
Yang sering lagi salah satunya kena
kalau web. CSRS.
Yang lokal, enggak, CSRS
beda.
Ini lokal development
biasanya pakai webpack.
Atau kan biasanya kan
kalau webpack dev server kan
biasanya langsung pakai lokal host.
Lokal host tuh gak kena.
Lokal host ke lokal host
karena dia webpack origin.
Kalau servernya
something.local
tapi ternyata si webpack dev servernya
lokal host. Kalau gak salah sih kena.
Kalau gak salah misalnya saya salah.
Oh karena dia beda origin.
Ya.
Terus kemudian
supaya sama
gantilah itu
dev.local misalnya.
Karena sudah dev.local beda lagi nih domain.
Jadi kena origin. Akhirnya di setting
webpack dev servernya
tambah asterisk lagi.
Kalau itu sih boleh ya.
Biar gak pusing.
Jadi
sebenarnya kan kita bahasnya
bukan hanya tentang course ya malam ini.
Tapi lebih ke
browser security policy.
Ya policy.
Nah kalau dari
dokumentasi MDN
itu ada beberapa tuh
yang termasuk ke dalam
security
policy
nya browser.
Ada content security policy.
Ada course
yang tadi kita bahas.
Ada course. Ada
CSRF. Ada CSRF.
Udah.
Yang lain
bukan huruf C depannya.
Hari ini khusus yang depannya
C. Iya.
CSP, course, dan
CSRF.
Kita bahas yang mana dulu?
CSP, CSP.
Content security
policy.
Jadi adalah
header
fine grained
control over code
that can be loaded
on a site and
what it is allowed to do.
Untuk mencegah XSS
cross site scripting attack.
Yes.
Ini berarti dari
script external kan?
Ya. Jadi
ini terus turun-turun. Kalau gak salah
ini yang frame source, font source,
object source.
Kemudian add file.
Jadi
kita bisa dari
CC server
mengatakan di headernya
kita
font hanya boleh
download dari
font.googleapps.com
font yang dari
luar Google
font gak boleh misalnya.
Jadi
terus
biasanya yang
paling
sering kan
script, terus
kemudian style.
Object source.
Ya.
Terus
iframe, iframe.
Iframe.
Enggak, iframe itu kan object.
Oh ya, object. Iframe ya.
Iframe.
Jadi kita dari CC server
ngasih headernya. Saya
hanya membolehkan
si browser
waktu
page load, waktu nge-load
halamannya saya, hanya
boleh script yang dari
domain ini.
Dari domain origin tertentu.
Dari origin tertentu aja.
Ya. Jadi gak bisa
tiba-tiba kita, misalnya kita diinject
sama ads.
Atau diinject sama, misalnya kan
siapa tau ya si ads-nya itu
diinjectnya via
comment, atau via
ya anggap aja servernya
nge-load something kayak dari
GTM, terus GTM-nya
nge-load malicious yang lainnya.
JS.
Atau ternyata
misalnya dependensi-kedependensi ya misalnya
GTM nge-load JS yang valid.
Tetapi yang valid ini ternyata
diinject dari somewhere.
Ternyata dia diinject
ads yang... Iframe.
Iframe yang berasal dari yang
bukan kita bolehkan. Maka kita
dengan adanya header ini
setidaknya browser tidak
ke-load iframe itu.
Jadi
jadi nanti, ya gak ke-load aja
kalau salah, tulisannya di browser
itu content not allowed
atau apa. Kalo mau liat, coba aja klik
kanan ini
di DevTool.
Di Network.
Docs.
Di Doc.
Revload dulu.
CSP.
Liat header-nya.
Terus, itu
response header.
Turun.
No, no, no, no. Headers.
Terlalu bawah.
Dia gak
nice.
Gak ada.
Kalo mau liat contohnya ya.
Coba web.dev.
Ini bisa.
Ini apanya sih?
Response header. Kalo bawanya apa tadi?
Request.
Request header. Beda-beda request header
ya request dari browser yang ngasih tau.
Web.dev coba.
Nah itu, CSP.
Content Security Policy
Base URI, self,
object source, none.
Semua yang dari self, boleh?
Boleh. Yang dari diri sendiri.
Ya.
Dari origin.
Dari origin yang sama ya.
Nah itu ada lagi
keyword-keyword kayak strict, dynamic,
unsafe, inline. Nah itu
kita harus baca satu-satu nih.
Nah itu GMBN paling ada
lengkap.
Ya kan? Itu tadi kayak ada
tracker dari Google-nya kan.
Entah tracker atau itu loh yang apa sih?
Chat.
Code chat. Atau semacamnya
withgoogle.com.
Ya. Nah ini juga berbahaya ya.
Kalo misalkan tadi ya ada malicious
terparti yang
tidak sengaja kita install.
Atau mungkin
library yang kita install
sebenernya gak ada malicious. Tapi dia manggil
yang ternyata ada maliciousnya.
Tiba-tiba ada Eiffel kayak gini
terus bisa dieksekusi di website kita
kan berbahaya ya.
Ya kayak si
apa? Library colors
yang dulu itu kenapa ya?
Ada Eiffel-nya atau apa?
Nggak tau deh. Tau gak sih?
Yang
ada npm package
terus color
aduh lupa. Yang
si maintainernya
agak
masalah gak tau
nginjok sama sesuatu. Ya gitu
lah pokoknya jadi
security hazard.
Iya.
Apa tadi strict dynamic
kok lupa? Gak tau ya
strict dynamic itu apa?
If an allowed script goes to load
third party script, those party will fail to load because
they won't have a required notes. Oh.
Ya ya ya.
Ada
has-nya lagi soalnya.
Ya jadi
kita bisa
ada SHA
has-nya. Jadi kalau script itu
bisa di hash
jadi kalau misalnya script itu
saat di load gak sesuai
sama hash gak di load lagi.
Jadi kayak di intercept.
Di validation. Ini scriptnya
bener gak sih? Sama gak sih sama yang
aslinya gitu ya? Ya sama gak sih
sama yang dari server. Ya ya
bener. Ya gue inget. Aku di
intercept. Ya.
Terus kalau
objek src ini
embeds ya?
Ya kalau embeds.
Embed.
Tadi di web.dev
completely disabled ya.
Completely disabled.
Ya.
Terus apa lagi nih?
If you are unable to
use default src
HTTPS still provide some protection
disabled.
Oh. Ini yang paling
gampang ya. Yang paling gampang ini ya default src ya.
Bahasanya paling
relax. Paling relax default src.
Paling ringan. Paling gampang
dilakukan. Apanya ekstrim-ekstrim doang
yang di blockir.
Ya.
Kadang
saya pernah, saya belajar ini dulu karena
saya misalnya website-nya
saya udah beneran
sudah bagus nih. Sudah
sudah nge-load
misalnya si klien minta
nge-load
script
tracking. Iklan.
No. Tracking. Tracking. Kayak Facebook
Pixel misalnya. Eh tolong dong
tambahin Facebook Pixel gitu ya.
Saya waktu udah pasang
ini udah gue pasang. Terus dia bilang
enggak masuk-masuk nih ininya.
Tracking-nya enggak jalan.
Terus. Kok bisa enggak jalan?
Mungkin, mungkin
Pixel tracking-nya
404 kali. Terus gue klik
ini bisa.
Tapi di halaman yang punya saya enggak
nge-load. Terus baru
baca
di console error-nya.
Error-nya di console ya. Ya.
Jadi nanti kasih tau. Oh ini enggak bisa.
Ada CSP.
Akhirnya baru buruan tuh masuk ke
header.
Konfigurasi-nya. Tambahin
code. Biasanya di Composer sih. Composer
Jason. Terus tambahin.
Udah. Baru beres.
Baru bisa ke-load.
Baru mulai baca-baca.
Itu CSP kita.
Oke. Next.
Setelah CSP kita bahas
PSP.
PSP aja.
PSP apa?
PlayStation.
Itulah
yang baru launching
Nintendo ya. Nintendo Wii
Switch ya. Switch. Eh?
Switch. Switch 2.
Oh iya. Kayaknya ngikutin
banget nih.
Enggak sih.
Cuman pengen aja. Enggak kesampaian.
Cross-Origin Research Policy.
Enggak usah cur-cur gitu dong.
Jangan ketawa ada yang mau beliin.
Aduh. Kalau ada yang mau sponsorin ayo.
Jadi kita
bertiga-bertiga kita bisa
main Nintendo dulu sebelum mulai acara.
Ya. Ini agak sedikit
berbeda ya.
Maksudnya berbeda satu huruf
belakangnya ya. Yang satu kan
Resource Sharing ya.
Ini Resource Policy.
Policy.
Ya. Jadi
tetap ya. Tetap di-responser.
Yang memungkinkan
website atau aplikasi
opt-in
protection against
vulnerabilities related to
cross-origin request seperti script
dan image.
Nah ini gimana ini?
Kok sampe ada
meltdown sama Spectre segala.
Apa ini meltdown?
Itu dulu yang sama
Zero Day itu loh.
Sama Spectre.
Yang semua yang hampir kena.
Buffer. Buffer of overflow.
Expoit Erase Commission
yang muncul sebagai
bagian dari
Regulative Execution
Functionality Pover.
Ini tahun berapa nih?
Baru.
Kayaknya
sebelum Covid sedikit deh.
Hampir Covid. 2018.
Itu 3 tahun lewat.
Spectre ini lebih baru.
Spectre
ini
2018 juga.
Ini yang
di processor itu loh.
Di hardware.
Yang waktu itu
Windows semuanya
blue screen. Bukan kan?
Beda ga? Bukan. Itu driver.
Itu driver ya.
Itu salah update firmware.
Ini fungsinality
disan untuk improve performance
but can be manipulated
to disclose sensitive data.
Solusinya adalah
cross origin resource
policy to block no
cross origin request
to given resource.
And this policy is expressed
via a response header.
Actually request not prevented.
Instead the browser prevent the result
from being leaked, nice dripping out
response body.
Requestnya ga apa-apa. Requestnya
ga diblockir tapi ga sampe
execute di browser. Berarti ga
dibalikin ke, ga dikirim balik
ke browser.
Maybe this is access to the
request coming from the server. This is
the command for your processor.
Kalau ada sensitive data ya
yang berhubungan dengan
sensitive data.
Ada contohnya ga? Ini aja.
Ini doang ya.
Ga, maksudnya use case-nya gitu.
Oh, oh lagi ya.
Gimana penggunaannya?
Belum pernah lihat.
Apa harus semuanya? Disarankan
menggunakan ini.
Tadi di webdev ada sih, gue liat ini
cross origin resource policy itu ada.
Coba kita lagi aja.
Webdev.
Bukan.
Di ininya.
Di response header-nya dia.
Response header-nya.
Di sini.
CSP sama
Teran.
Cross origin resource policy.
Ada ga? Ga ada.
Ga ada.
Apa harus di halaman utama?
Coba di halaman utamanya.
Dia ga ngeload load ya.
Iya.
Hebat ya.
Kan service worker.
Static site loh ini.
Padahal.
Content encoded.
Coba liat ini.
Resource policy.FYI.
Mungkin ada penjelasan yang lebih.
Ya ga di contohnya sih.
Tanya gemini, tanya gemini.
Ini minimal penjelasannya lumayan
lebih panjang lah.
Allow browser
to block a given response
before it enters.
Kayak ga diexecute gitu ya.
Biar kalo misalnya isi
scriptnya itu ada sesuatu yang malicious
ga sampe jalan.
Tapi dari mana kita tau itu
malicious atau ga?
Iya sih browser-nya.
Kita cuma dari kita
kita ga tau, kita cuma limit.
Ga boleh nih dari sini gitu misalnya.
Ya ga diexecute.
Salah satu implementasinya disitu.
Maksudnya semua
di internalnya browser kan
kita sebagai
developer atau user
ga sampe liat karena ga diexekusi kan.
In particular
paragraph bawahnya, kalo kita
hosting resource yang
digunakan oleh
pihak lain
it would be excellent idea
to explicitly
assert cross origin
research policy.
Uff berat banget ya.
Ga ngerti siapa yang
nanti ini ya.
Itu tanya ke Mas Irvan.
Tanya ke temennya Mas Irvan kali ya.
Coba tanya.
Kayak baca banyak kata-katanya, kayak
setengah ngerti, cuma ga paham.
Tanya AI.
Tanya.
Prevent access
mitigating speculative
side channel
controlling resource access
enhancing security.
Masih
ngawang-ngawang nih, ga
ngerti.
Place website and application
obtained to protection against
vulnerability related to certain
cross origin request.
Ini bukannya content security policy ya?
Yang ada hubungannya sama image
sama script?
Ha ha ha
Ha ha ha
Saya ga ngerti.
Tanya AI, agak membantu sedikit, tapi
ultimately masih
pingung juga. Wait.
Ini.
Kayak ini.
Betul-betul.
Tanya AI.
Tanya
Gemini.
Oh, yang tadi ya?
Di bawahnya.
Nah, core.
Let's break down core.
Protecting your data.
Jadi, core
focus on controlling who can
access your resources.
Tadi kan core fokusnya ke siapa yang
bisa mengakses.
Dari origin mana, misalnya itu tadi
kita punya beberapa domain lain.
Siapa yang boleh
mengakses. Nah, core
fokus pada
mengkontrol siapa yang dapat
embed resource kita
di website mereka.
Oh, kebalikannya ya?
Ya,
semacam.
Dan khusus di embed
resource. Jadi, itu tadi
makanya kita menghosting suatu resource.
Kita nghosting
pihak lain atau domain lain,
website lain, meng embed
resource kita itu
di website mereka.
Ngerti, ngerti. Iya.
Jadi, misalnya
misalnya kita punya
website, terus kita nggak mau
website kita
dicomot dalam tanda kutip ke website
yang lain
dengan iframe itu kan bisa aja kan?
Kita punya stats.
Cuma kayaknya itu fokusnya static resource ya.
Image.
Oh, image. Misalkan image-nya nggak mau
orang sembarangan
load image dari server kita.
Ya. Bukan kali.
Itu kan kalau core. Bukan.
Ini
core. Siapa yang
boleh meng embed resource kita?
Ya nggak tahu, kata Jemenah ya.
Jemenahnya betul atau halul, nggak tahu nih.
Fokus
pada siapa yang bisa embed resource kita.
Oh, oh, oh.
Kebali, kebali.
Bisa website juga sih.
Webpage kita di load sebagai iframe
di website orang.
Oleh website lain
kan. Itu kita ngeginin
atau nggak?
Iya sih. Kepikirannya gitu sih
kalau baca ini.
Nah, cuma ini halul atau nggak?
Nggak sih.
Kalau poin kedua-nya sama sama MDN.
Jadi,
karena
gue lagi kepikir
dari yang kayak share
array buffer tadi sama
apa namanya?
performance.now itu loh.
Ini kan?
Iya, iya itu.
Jadi boleh kita punya halaman web
atau image atau static asset. Boleh nggak sih
apa, website lain
menggunakan
load resource kita itu.
Nah, fungsinya adalah biar kita yakin
si resource kita itu,
image kita, atau halaman web
kita,
dalam konteks yang
emang kita ijinkan.
Betul. Kalau misalkan ada
orang yang jahat gitu ya,
dia apa, ada image
atau apapun gitu,
dia bisa nge-load
terus-menerus.
Nah, cuma kalau nge-load terus-menerus,
itu kan sebenarnya cuma rate limiting.
Bisa kita rate limit. Nah, cuma
ini kelihatannya ada yang lebih menarik lagi nih,
kayak si side channel text itu
"Inverse sensitive information"
dengan mengukur typing
of resource loading, dan gue baru tahu ada begini.
Apa ya, jadi
apa? Betul mereka bisa
nembak server kita
dimana atau apa?
Kalau cuma perkara didos,
kayak tinggal rate limit aja kan?
Iya. If malicious
website can embed your resource,
they might be able
to extract data indirectly.
Oke.
Oh, kalau ada pesan error, biasanya kan pesan
error-nya misalkan yang masih death mode nih,
ada pesan error, jadi kebaiknya
gitu ya.
Bisa jadi, bisa jadi. Iya, iya.
Ya, bukan begini sih, maksudnya
dengan preventing website kita
supaya tidak di embed tempat lain,
ya kita terhindar
dari attack yang seperti ini,
kayak contohnya kita
anggap aja kita punya API,
API endpoint,
yang hanya kita mau khususkan
hanya boleh diakses misalnya dari
halaman kita, dari domain kita.
Jadi kita
kalau misalnya itu diakses dari domain lain,
kita...
Kita tidak boleh memperbolehkan.
Tidak boleh memperbolehkan.
Bisa jadi embed,
page yang di embed,
bisa jadi
image.
Itu, static content-nya.
Bisa web page atau static content.
Ini ada hubungannya sama
scraping-scraping
data nggak?
Lebih tepatnya,
lebih hubungan sama yang kita
yang di embed ya.
Kalau scraping kan bakal
diakses langsung aja kan.
Misalnya misalnya ada web page Eka.com
scraping-nya.
Emulasi user yang akses gitu kan,
walaupun yang akses adalah
robot petir
atau semacamnya.
Kalau ini lebih ke embed ya.
Jadi website kita nggak boleh di embed
di sembarangan website lain.
Kecuali kita ijinin.
Kecuali kita kasih
cross origin.
Dan by default itu
cross origin.
By default cross origin ya.
Jadi misalkan
saya punya website gitu,
saya embed lah.
Klik BCA.
Bukan same origin.
Eh jangan sebut merah ya.
Sebuah website,
web apa,
e-banking.
Itu datanya bisa kita ambil gitu?
Bukan.
Kalau kita nge-loadnya terus-menerus,
suatu saat sampai ada mungkin pesan error
yang tidak.
Secara langsung kita bisa
get data itu.
Bisa dapet lah infonya ya. Bisa di-gather gitu ya.
Tapi caranya sih saya nggak tahu gimana.
Mungkin
kemampuan kita belum sampai kesana Mas.
Kita bukan orang security.
Kita bukan bikin web ya.
Maaf-maaf.
Cuma kalau untuk
security misalkan tahu jawabannya.
Apa resource policy
ya resourcepolicy.fyi
itu resourcenya apa?
Penyelasannya bagus sih kalau emang
maksudnya apa? Tertarik
penyelasan yang lebih detail
termasuk ada link ke
yang si meltdown dan
specter itu kenapa sprey itu
apa, ngapain.
Kalau kita nggak tahu ya
wajar karena emang kita
keras origin ya. Berarti
by default itu
kurang secure ya.
By default?
Aneh juga ya kenapa keras origin ya
by default.
Ya by default kan kita bisa pake
semua website yang
tidak ada CoRP-nya
diatur gitu.
Dan emang ada pengurusannya tuh?
Scroll ke bawah deh. Scroll ke bawah.
Nah bawa lagi.
Isolation.
Today browser
act as though blah blah blah keras origin
is set on every resource
that like. Kalau nggak ada
CoRP header by default
dianggap keras origin. Kayaknya dia jelasin tuh
this is somewhat unfortunate default.
Sayang sekali.
Mau saya apa?
Ya kalau dia berlakukan langsung same origin
bisa jadi banyak website rusak,
Twitter embed rusak,
Instagram embed rusak.
Tarik menarik antara
kan kita pernah bahas ini nih
pas sama Mas Irfan kan
tarik menarik antara security dan
product lah.
Kita nggak bisa embed
YouTube ya kan?
Kalau restriktif
emang security-nya dari sisi keamanan
jadi lebih bagus, lebih optimal.
Tapi banyak product yang
rusak, banyak iklan yang tiba-tiba nggak muncul
dimarahin banyak orang. Jadi
kelihatannya ya udah by defaultnya keras
origin tapi dengan
risiko keamanan.
Betul-betul.
Oke.
Sudah ya.
Kayaknya udah mulai kebayang ya CoRP
apa ya. Nextnya apa lagi?
Belum terlalu tapi lumayan lah itu
resource-nya itu bagus banget sih
sama yang penjelasan
Meltdown Attack tuh
kayaknya
lumayan gampang dipahamin
MeltdownAttack.com itu
site-site quest sih.
Hmm.
MeltdownAttack.com, oke.
MeltdownAttack.com.
Oke.
Maksudnya
background-nya masalah
yang muncul apa aja sih.
Nah itu kalau baca itu jadi
sedikit, sedikit banget lebih kebayang.
Let's see.
Ini ya.
Sampai bisa
ngelik password dan sensitive data ya.
Yang tadi kita bahas
di CoRP tadi kan ya.
Bisa baca itu, bisa baca
yang ada di buffer.
Oh ya.
Yang dikirimin
kebaca ya.
Process memory.
Also the secrets
of other program
and the operating system.
Your computer has
vulnerability processor
and run an unpatched
operating system. It's not safe
to work with sensitive information
without the chance of leaking the information.
Nah, kalau yang kanan
yang spekter yang dibilang
von tadi yang
apa? Di
pompa terus sampe
digempur terus sampe error.
Dari error ya. Mungkin
ya.
Iya.
Dan penemunya ternyata
Google yang ngediscover
si bug ini. Scroll ke bawah.
Dari Google Project Zero.
Oke.
Menarik, menarik.
Ok, course sudah. Selanjutnya apa lagi?
CoF.
CoF?
CSRF?
Oh, CSRF.
Oh iya.
CSRF ini kalau pakai
felek kelar Rafael pasti pernah ketemu deh
kalau mau submit form.
Iya.
Ini by default
kayaknya hampir di semua framework
udah di prevent ya.
Nones.
Nones.
Nones.
Can be protected against
via same-side cookies
and anti-KSRF
tokens.
Unauthorized comments
are transmitted
to a website from trusted
user.
Because they inherit user cookies
they appear
to be valid comments.
Jadi
karena menggunakan
user cookies yang valid
orang yang untrusted
bisa masuk gitu ya. Bisa.
Ya, dikira
dia adalah si user ini gitu ya.
Sehingga dia bisa
melakukan apa yang si user ini lakukan.
Dan sebenarnya jujur
gue sampai sekarang ini nggak ngerti sih
itu apa
kasus apa bisa
ada user lain, user
B bisa
ngirim request itu dengan
user A. Sebenarnya gue nggak ngerti sih
kok bisa kayak gitu. Cuma maksudnya
tahu CSRF itu apa
terus kayak security measure-nya apa
cuma tetap ganggu bayang sih.
Kenapa bisa cookiesnya
ketinggalan di situ?
Di requestnya
kenapa cookiesnya user A bisa
di requestnya user B?
Kenapa bisa diambil gitu?
Iya.
Kayaknya dulu
pernah ini deh, pernah
mendapatkan
penjelasan, tapi udah lupa
udah lama banget.
Cuma ya udah itu sih
nggak perlu dipikir. Yang penting kita
pake itu.
Ya, ini contoh
yang sebenarnya
kok bisa gitu ya. Kayak
nggak kebayang gitu. Tapi sebenarnya
ini sebenarnya kan image-nya jadi
kemungkinan besar jadi
broken kan. Karena nggak ada image.
Ini bukan image kan. Tapi dia tetap
melakukan di request.
Iya maksudnya jadi ketrigger
di request dan menghapus kalau di contoh
ini menghapus sih.
Iya menghapus database.
Iya menghapus account dari database.
Ya, solusinya adalah
mitigasi melalui CSRF
most common transparent method
CSRF
mitigation are same-side cookies.
Same-side cookies itu
berarti
cookies yang
digunakan hanya bisa berlaku untuk
site itu aja ya. Nggak bisa pakai
site yang lain.
Iya. Jadi kalau
misalnya tadi
yang cookie
yang misalnya
cookie login-nya kita
dipakai, diambil
cookie-nya.
Terus si
pelaku
membuat situsnya
sendiri dan menginjekkan
cookie-nya. Terus
melakukan misalnya user
delete.
Tapi dari website-nya dia gitu.
Dan ditargetkan ke
website URL-nya.
Form submit-nya ke website kita.
Jadi waktu form submit kan ngebawa
cookie yang tadi dia inject itu.
Itu
nggak bisa kalau kita pakai
same-side.
Karena itu dari website yang
lain ya. Beda
site. Biasanya
API
ini deh.
API request dari
JavaScript
lah ya. API request dari JavaScript
dan
misalnya kita cookie-nya pakai
basic authentication gitu misalnya.
Itu nggak bisa.
Oke.
Ini
client-side read cookies
token.
Oke.
Oke. TSRF
aman? Ada tambahan?
Biasanya
udah banyak ya kalau kayak Laravel,
WordPress, Dopa,
kayaknya udah hampir semua CIA.
Sudah ada.
Sebenernya tinggal
pakai. Cuma teman-teman
disarankan
belajar. Bukan.
Selain pakai,
belajar fundamental
di belakangnya.
Iya. Sama aja kayak pakai ORM kan.
Sebenernya udah ada prevention
untuk SQL injection kan.
Tapi karena
mungkin kita nggak tahu
SQL injection,
udah biasa pakai ORM,
terus mungkin ada satu
waktu kita harus pakai
SQL biasa, SQL yang
raw, malah kena
SQL injection. Karena kita nggak tahu dulu
ternyata di ORM itu sudah
menerapkan itu. Jadi sebenarnya salah satu
kelebihan menggunakan library atau framework
ya itu ya. Sudah dibungkus
default-default seperti ini.
Cuma ya kita tetap
harus tahu
cara kerjanya dan
si framework ini
melakukan apa
aja.
Kalau yang
tadi yang kayak CSP itu saya
kena sekali.
Sempat bingung
lama. Kenapa nggak bisa itu?
Ya kan
itu tadi nge-load sesuatu
kok nggak bisa ke-load gitu
pixel tracking
dari mana. Si browser
bolak mulu gitu.
Oh, kena CSP sebagai user resource itu ya?
Iya, ya maksudnya
CSP saya berusaha
nge-load sesuatu yang berbeda
dan belum saya daftarkan
kalau itu boleh gitu.
Dan biasanya kan nggak pernah pakai
security header begitu, jadi
pake-pake aja. Tiba-tiba
pakai sebuah hosting yang enterprise
yang security-nya
sudah
opinionated dari sono-nya
ada peduli
mengenai hal begituan
baru nggak, oh
ternyata kalau saya pakai c-panel-c-panelan
nggak ada beginian gitu.
Ternyata kalau udah pakai
yang lain, ada beginian.
Ya, gitulah ceritanya.
Dipaksa belajar.
Dipaksa belajar.
Oke.
Ada lagi?
Yang mau dibahas?
Ada, itu Co-op Co-App
Singkat aja.
Oh iya, itu
walaupun gue bingung juga ya buka aja web dev.
Ada di web dev?
Oke.
Where is it?
Oh, Co-op Co-App.
Ini adalah
wait.
Nah,
gue nggak ngerti juga sih ini.
Ya, udah minimal ada kontennya.
Making your website cross-origin isolated.
Eiji ya?
Ya.
Ada Kang Eiji.
Kang Eiji.
Ini fish apaan nih?
Hah?
Oh, glitch.
Ada gambar ikan.
Itu ada Mas Todon ya?
Mas Todon, ya ini Mas Todon.
Kita bikin social media baru yuk.
Namanya Mbak Todon.
Hehehe.
Anyway, ini apa sih?
Spectre lagi,
Spectre lagi.
Ini gak ada Spectre lagi ya?
Wah, ini ada videonya.
Ini video kapan sih?
Eh, maksudnya dari tahun 2020 ya?
Some web API increase
attack/spectre
to mitigate that risk browser over opt-in
base isolation environment
called cross-origin isolated.
Itu yang tadi, yang cross-origin
TOI, TOI ya?
Tadi kan? TOI.
Bukan, yang corp tadi.
Co-op.
Nah, ini Co-op.
Nah, itu obonnya liat tabel fiturnya
aja. Jadi, kita
isolate. Itu tadi
performance type
origin keber. Tadi kan
ada tuh penjelasan singkatnya yang
di resource policy.
Entah gimana dia
bisa
si attacker-nya itu bisa
dapetin informasi sensitif dari
ngukur waktu
timing, waktu
loading resource kita.
Loading resource kan ya.
Ya, exactly info sensitive.
Apa yang didapat dari ngukur waktu
loading resource, gak tahu sih. Cuma ya
udah, berarti itu bisa jadi
kayak, apa sih, WIX.
Titik lemah masukin
serangan security.
Ini berarti...
Oh, ini tadi corp ya?
Itu kan dibawah itu.
Bukan, itu, kalau corp
cross-origin resource policy.
Ini kan embader
policy sama opener
policy.
Berarti lebih, masih satu
layung, cuma lebih dalem lagi.
Oh iya, ini koop.
Ini koep.
Coop, coop.
Ya.
This header
is that...
I don't know.
Block loading
of resources or iframe
which haven't opt-in
being loaded by
cross-origin document and
prevent cross-origin windows
from directly interacting
with your document.
This also means those
resources being loaded
cross-origin require opt-in.
You can determine
whether web page is in
cross-origin isolated state by
examining self-cross-origin
isolated.
This article show how
to use this new header. In follow-up
article, I will provide more background
context.
Ini contohnya ya.
Why you need
cross-origin isolated
for powerful feature?
Oh, ini kayaknya
ada hubungannya sama ini ya,
sama yang tadi ya, shared array buffer
sama measure agent space.
Ya, buffer data.
Itu kalau diletlist, gak ada tempat, bisa
jadi kayak wake, apa, factor
untuk masuknya serangan
keamanan.
Shared array buffer itu
dipakai di WebAssembly katanya.
Iya, dipakainya
di WebAssembly.
Dan itu bisa mengakses hardware kan?
Iya.
Oke.
All this process
A example,
B.example.
Popup.
Oke.
Terus?
Gak ngerti.
Belum baca sih.
Data yang di-load
ke browsing context group
yang
jadi satu
browsing context group yang sama
seperti kode kita, bisa dibaca.
Ya.
Ya.
Oke.
Terus?
Terus.
Ya.
Terus.
Terus.
Bisa dibaca.
By measuring the time
certain operation A,
attackers can guess
the contents of CPU cage
and through that
the contents of process memory.
Jadi kan ini ada
dua nih
yang performance ini. Jadi dia ngitungnya
pakai itu ya. Jadi
ada kemungkinan bisa di, bukan
dilihat, tapi ditebak.
Guess.
Tapi tebakannya itu
jadi lebih, kayak jadi
lebih akurat. Kalau ada context-context
itu tuh kayak tadi ngitung
time setelah waktu dari
performance method, eh
performance object.
If avil.com embeds
a cross origin image,
they can use specter attack
to read each pixel data
which makes
protection relying on
opaque-ness ineffective.
Ideally,
all cross origin requests
should be explicit
vetted by the server that
owns the resource.
If vetting is not provided by resource
owning server, then
the data will never make it into browser
context group
of an avil actor.
Oh, berarti setiap
kali ada request,
itu ada
atau ada proses yang tadi
server, apa share
array buffer sama performance
dot something, itu
ada data yang masuk ke
browsing context group ya.
Dan itu bisa ditebak
isinya apa.
-
Harus nonton videonya
Kang AJ nih.
- Iya.
Diundang dong, diundang. Cih, diundang.
Cross origin image.
Amin.
Iya, ini berarti
Coop ya, ini urusan Coop ya.
- Iya.
Itu pernah gini, Coop.
Iya.
Prevent document
from loading any cross origin resource
that don't explicit grant
document permission.
With this feature, you can declare that a document
cannot load such resources.
Gak kelihatan ya.
- Kita melarang untuk diemit.
- Nah.
Ininya apa,
image-nya
setengah
setengah transparan.
Setengah transparan.
- Berarti website-nya
a.example
image-nya, domain-nya.
Terus nge-load dari
example js
bisa. - Js-nya, image
dan video.
- Nah, kalau
videonya same origin,
berarti gak bisa nge-load video. - Gak bisa.
Iya.
- Require core.
Jadi pada saat
ini kan di server kita.
Pada saat kita mau request ke server
orang, kalau kita
request require core, artinya
server orang itu harus ada corp-nya.
Kalau gak ada, dia
gak bisa kali. Atau gimana?
- Bukan. Kalau server-nya
server-nya orang bilangnya
require core.
- Kebalik. - Please enforce the
policy that the document hanya bisa
load resource dari same origin
or resources explicitly
marked as loadable.
Nah, explicitly marked as loadable itu
pake header
core.
Co-app sama core itu kayak sepasang
gitu ya? - Iya.
Oh, kalau
core itu dari si response,
co-app itu dari
si kita,
si kita yang punya. - Co-app mencari,
co-app nge-check header core
mereka. - Kita kasih tahu.
- Nggak akan ada header-nya kayaknya.
- Termalem pada ngimpi
co-app core-score semua ini.
- Oh, makanya ada kalau font
dari Google itu bawaannya langsung
ada cross origin itu belakangnya.
Tau gak? Kalau Google
font di-load yang by default kita
copy, langsung ada cross origin-nya.
Link rel pre-load apa gitu
cross origin. - Barunya ada
font.google.com
Oh, bukan ya? Pake S ya?
Fonts.
Misalkan Roboto.
Terus
download ya. Apa sih?
- Get font tuh di ujung kanan atas.
- Oke, get embed code.
Ini ya.
- If a cross origin resource supported,
of course, you may
use cross origin attribute
to load it to your
web page without
being blocked by co-app.
Kalau misalkan server,
kata-kata server si
Google Fonts itu pasti pakai
co-app ya. Kalau kita mau
load font-nya tanpa cross origin
berarti error ya.
- Kalau kita membuat
situsnya kita require
core. - Ya.
Oh, iya, iya.
Ini ya, require core-nya.
Bukan, bukan,
bukan si
Google Font-nya ya?
Google Font-nya tuh punya
core-nya.
Dan kita ngasih tahu
kita require core.
- Got it, got it. - Baru mulai.
Tapi gue masih harus nonton video
Kang Eiji ini biar bisa tahu lebih
dalong.
- Terus, ini
core ya.
Open protection.
Core ini yang ngaturnya same site
same origin ya.
Bisa juga
cross origin.
Resource that mark cross origin
can be load by any website.
Jadi, ini kita
mendefinisikan bahwa server kita
resource-nya
bisa di-load di
website orang.
- Di website apapun. - Ya, kayak
Google Font tadi.
Dia pengen Google Font bisa di-load gitu.
Ya, jadi kita
tulisnya cross origin.
Tapi kalau misalkan kita gak mau
resource kita dipakai
oleh website lain, kita harus
tulis antara same site atau same origin.
- Gitu ya? - Same site.
Same site itu hanya
domain yang persis.
- Domain yang sama. - Abcd.com
subdomain gak boleh.
- Tapi kalau same origin. - Subdomain boleh.
- Ya, same origin. - Subdomain boleh.
- Subdomain boleh. - Domain sama
domainnya beda boleh.
Ya. Nah, ini Coop ya.
Berarti sekarang Coop.
Coop adalah...
Oh, window.open.
So, they cannot directly interact
with top-level window.
For example, if document with Coop
opens a pop-up,
its window opener property will be null.
Jadi, openernya gak ketahuan
dari mana ya.
- Biar gak bisa dibacak.
- Biar gak bisa dibacak.
- Ada-ada aja ya
exploit ini ya.
Kok bisa kalau pikiran?
Gue gak nyampe
kotaknya.
- Gue gak nyampe. - Belum nyampe.
- Yang penting tahu header-header ini aja lah.
- Kesimpulan.
Kalau mau aman,
kalau mau menggunakan set array
buffer,
dan performance.measure user-agent
specify memory,
or high resolution timers,
- Performance.now tadi.
- Oh ya.
With better precision,
jangan lupa
nyalain Coop
dan
co-op dengan same origin.
Kalau
tidak dilakukan,
brosor tidak bisa
menggaransi
keamanan
terhadap -- - Bukan, brosornya
gak akan enable
karena ya itu, ya benar,
brosor gak bisa menjamin
keamanannya, jadi QAP bakal
diblockir.
- Bukan.
Guaranti sufficient isolation
to safely enable.
Dia tetap
enable, tapi gak bisa
- Tidak garansi
ga isolate hasil.
- Jadi by default
tetap enable, jadi kayak
risiko security-nya dibalikin
ke kita sendiri ya.
- Ya.
Jadi itulah kira-kira.
Kalau teman-teman menggunakan
salah satu dari tiga ini, ya
disarankan
menggunakan Co-op dan Co-op.
- Pake DevTool, self-cross,
no, no, itu self.cross
origin isolated di running
di DevTool.
- Oh, di console
console. - Ini?
- Pulse. - Pulse.
- Pulse.
- Coba buka situ salah satu
bank di Indonesia.
- Bank?
- Ya, apapun. - Yang apa?
Digra?
- Bank Indonesia aja lah, bank Indonesia
aja. - Ah, bank Indonesia?
- Eh, ya udah, coba-coba.
Ini pun jadilah.
- Ini?
- Iya.
Kan biar
nggak ini, biar nggak spesifik
apa namanya? - Branding.
- Spesifik branding. - Oh iya.
Episod kali ini disponsornya
oleh Hydra.
False.
- False.
- Kayaknya belum
ini belum implementasi.
Coba, Bin,
badan
intelligence.
- Wah, jangan. Nanti
tiba-tiba rumah Mas Risa
diketok. - Bukan, tiba-tiba
mereka benerin.
Tiba-tiba mereka benerin. Kan bagus
dong.
- Oke.
- Nanti we go drop aja false, kelihatannya masih false.
- Iya, iya.
Masih false semua.
- Hydra itu sudah
ini semua browser belum ya?
Sudah compatible?
- Oh.
- Bisa
lihat di, eh, kalau di
mdn-nya ada nggak sih?
Nggak ada tulisan
compatibility browser gitu?
Di bawah atau di atas? - Nggak ada.
CoP nggak ada. Itu kan
bukanya tadi itu web.dev.
Ini tahun
berapa artikalnya? Updatenya
2021.
- 2021 ya. 2022.
"Worker script also
need to care, cross-organize, let it is
enabled. Added some explanation."
Iya, 2022.
Oke. Sudah?
Ada lagi?
- Sudah. Sudah berasap pokoknya.
- Sudah berasap ya. Jadi
untuk malam ini topiknya itu dulu.
Untuk minggu depan kita kemaren.
- Quoting-quoting. - Quoting-quoting lagi.
Eh, apa lagi kemaren ya?
Kalau nggak salah minggu lalu sudah kan? - Kemaren itu
kalau nggak salah beda buku bukan?
- Beda buku aja, yuk. - Beda buku ya?
- Buku apa? - Buku blocking
algorithm.
- Atau kalau buku lainnya nggak apa-apa sih?
- Keburu nggak kebacanya?
- Atau kalau yang lain apa?
- Pake ini aja entah.
Pake jam 9 di summarize.
- Iya.
Nggak seru lah. Harus kan
memaksa kita membaca?
- Nggak apa-apa juga sih kalau pun banyak.
- Finish project gede nggak?
Gua belum download lagi.
- Apa? - Finish project.
Tapi itu, fixie.
- Tapi
tentang container kan?
- Tentang, iya, tentang devops.
- Iya.
- Iya, boleh.
- Boleh ya? Finish project ya?
- Boleh. - Boleh.
- Untuk bedah website, udah ada yang
submit lho.
Bedah website.
- Tetapkan lah sih, belum lama.
- Belum-belum, nanti.
Website.
Mana dia bedah website? Kok nggak ada?
Sebentar.
Pindah ini dulu.
Pindah browser.
Ups, oke.
Present.
Mana
bedah website? Kok nggak ada di sini?
Apa jangan-jangan di close ya?
Belum kan?
- Nggak.
Ada bedah situs.
- Bedah situs ya, salah ya. Bedah
situs.
Oh, halaman kedua.
- Amazing Ticket.
- Amazing Ticket, ya. Bedah situs.
Nah, ini.
- Udah ada course-nya belum, kita cek dulu.
- Amazing Ticket. Nah, ini dari
- CSP, CSP. - Apa namanya?
- Grafis.
Nugresa.
Oh, namanya keren ya. Grafis.
- Malah jadi web ya?
Bukan jadi desainer grafis?
- Desainer grafis.
- Belum ada
CSP.
Belum ada CSP. Loh.
Kita udah mau ngebedah. Tidak ada.
- Nanti.
- Ya, belum ada itu-nya. Belum ada apa.
Tapi cross-isolated.
Blah-blah-blah.
Kita mau mengapresiasi
apa? Submit per dana.
Submit kedua lah ya. Kalo ini kan
nggak aske itu ya. Internal ya.
- Submit ke 0.
Ini submit pertama.
- Ya.
Jadi minggu depan kita bahas apa?
Phoenix Project dulu.
- Phoenix Project dulu lah. Kita udah lama nggak baca buku.
- Namanya dia IMGDE
VVV.
Keren loh.
- Oh iya bener.
IMGDE
VVV.
- Keren ya.
- Mudah-mudahan nanti
ikutan nonton ya. Oh pekan baru.
Siap-siap.
Selamat malam Eka.
Ini namanya Eka juga.
Kita udah mau udahan.
- Ada Dui juga tadi.
Trini. - Oh iya Dui paling atas.
Dui ini.
Paling rajin Dui.
Rijatur Manca.
- Kemarin tuh ada tri kan. Biasanya ada tri-tri-tri.
Tri-tri-tri nggak hadir malam ini.
Ya. Cuma catur yang belum ada.
- Kalau Eka juga.
- Satu ya?
- Iya.
- Bener ketunggal Eka.
Eh ngomong-ngomong Indonesia
lalu Speledunia ya?
- Serius?
- Kan belum.
- Belum? - Belum.
- Under 17.
- Eh bentar, lagunya apa sih?
Karambol.
- Sepabola.
- Under 17.
- Sepabola U17 ya U17.
Iya kalau U17.
- Bukannya kalah dari Korea.
- Korea.
- Kalah 06.
Kalah 06.
- Sudah lolos.
- Under 17 tahun.
- Sudah lolos. - Udah lolos ya.
- Terus groupnya menarik itu
lawan Yaman, lawan apa lah,
lawan negara nggak tau apa, menang sih.
Lumayan.
Giliran lawan korup kalah 06.
- Jadi
kalau yang mudanya sudah lolos
dulu, sudah punya pengalaman
nanti kan mereka kan tambah tua
yang baru masuk senior dan senior sudah punya
mental.
Sudah mental-mental kompetisi.
Gitu loh maksudnya.
- Oke, oke.
- Bukan proses satu malam
berhasil. - Jadi berapa malam?
- Ya.
- Jadi berapa malam? - 1001 malam.
- 1001 malam.
- Oke deh.
Sebelum kita semakin
ngelantur, jadi kita tutup aja ya.
- Jadi kita bahas buku 1001 malam
aja.
- Oke, cukup untuk malam ini.
- Terima kasih banyak buat semuanya
yang sudah ikutan
diskusi dan belajar bareng
sebenarnya ya. Kita juga banyak
tidak taunya. - Nggak ahli-ahli amat.
Jadi belajar sama-sama.
- Belajar sama-sama, mudah-mudahan
makin ngerti, makin dingin. - Sampai sekarang.
- Sedikit ngerti.
- Tetapi nggak ngerti yang mendalamnya.
Minimal aware kalau besok-besok
ketemu yang oh kita
tau kisi-kisinyalah perkara
embedding atau resource untuk
gamenya. Oh harus pakai corp
ko-op ko-adli. Jadi kita bisa
soto ya di depan temen-temen.
- Bisa soto ya gaya ya.
Oke. Kita ketemu
lagi minggu depan dengan topik yang
berbeda. Sampai jumpa. Selamat malam.
Sampai serhat. Bye-bye.
Deskripsi asli dari YouTube
Yuk mari kita diskusi dan ngobrol ngalor-ngidul tentang dunia web. Agar tetap up-to-date dengan teknologi web terkini. Topik, tautan dan pertanyaan menarik bisa dilayangkan ke https://ksana.in/ngobrolinweb 🎙️ New to streaming or looking to level up? Check out StreamYard and get $10 discount! 😍 https://streamyard.com/pal/d/5512398643920896 Kunjungi https://ngobrol.in untuk catatan, tautan dan informasi topik lainnya.
Episode Terkait
9 Agu 2023
Ngobrolin URL
Episode ini bagian dari niat baru mereka: menyelipkan topik yang benar-benar mendasar setidaknya sebulan sekali, alih-al...
26 Mar 2025
Ngobrolin Design Pattern
Episode ini membahas tentang Design Pattern dalam pengembangan software, sebuah topik permintaan dari Mas Azam Aziz. Dis...
11 Jun 2025
Bedah Situs
Episode ini merupakan sesi bedah situs yang pertama kali mendapatkan partisipasi dari penonton. Website yang dibedah ada...
Suka episode ini?
Episode baru setiap Selasa malam. Dengarkan lewat YouTube, Spotify, atau feed podcast favoritmu.
Memuat komentar dari GitHub Discussions...
Jika komentar tidak muncul karena ekstensi privasi / adblocker, kamu bisa berdiskusi langsung di GitHub Discussions .