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