Ngobrolin CORS - Ngobrolin WEB

2:43soundboard soundboard

2:45soundboard dulu soundboard soundboard

2:47soundboard dong

2:49oh soundboard

2:56lalu semuanya Wah ini ada Nurholid sudah hadir keren keren keren Wow damar yang golput warna

3:04pake pulpen jangan-jangan golput ya milih siapa Wah ini kita mengandalkan setiap berdan jordi

3:11leh apa-apa langsung umum bebas rahasia bebas rahasia bebas mau merahsiakan atau mau membocorkan

3:22mau bukan biasanya habis biasanya di bilik suaranya difotoin difotoin pakai tintanya

3:31difotoin terus upload ya ya ya ada biasa ada ajakan begitu kan nanti mereka pada pada punya

3:39kayak survei hitungannya gitu Oke iya apalagi di story-in dan udah kelihatan dan jadinya ya

3:45jadi nggak ada rahasia lagi ya

3:47ke depan paling epic tuh paling bawah

3:49pilih Imre betul

3:50gue nyoblos Imre aja lah

3:52Imre ya nyalon Imre

3:54iya nggak tau

3:55DPR

3:58cabang mana dia?

4:01cabang Galtimor dia

4:02belum pulang soalnya

4:04kadang-kadang dia mau pulang kan dia

4:08iya

4:08nyoblos

4:09udah pesan tiket tapi nggak tau

4:12tiketnya bulan berapa

4:14nanti kita

4:16kita ini lah ya

4:17kita undang-undang kesini ya

4:19cuma abis pemilu aja sama dia oh iya review pemilu ya gimana ya review diskonan lah diskonan

4:31siapa tau klat ada diskonan ya

4:33nah

4:35ini bagus itu

4:36sebelum kita semakin

4:39ngantor

4:39kita mau ngomongin malam hari ini

4:43tentang

4:44kurs, kepanjangannya apa?

4:47cross origin

4:48RS

4:49siapa di sini yang penyanyi ya bukan penyanyi betul tadi udah bilang Dekor sih tapi ya ayo

5:03lanjut ya di grup-grup itu 20 tahun yang lalu ke Jakarta dia sempat ke Jakarta sebelum Iya

5:13ke rumahnya Mas Rica sempat

5:15ngapain dia?

5:19jelasin soal kurs

5:20oh iya iya

5:22boleh boleh

5:23ya kita bukan mau jualan online kurs

5:28tapi ingin bahas tentang kurs

5:30disini teman-teman

5:35siapa yang belum pernah mengalami

5:38error kurs

5:39mungkin sekarang udah agak kurang ya

5:42dulu-dulu ya sering banget gitu kan apalagi dulu pas baru belajar nyebelin banget itu iya

5:48biasanya dulu Solo kalau saya kena ya cross origin habis tuh pindah masukin ke aplikasi

5:56php-nya headernya cross origin kasih bintang ya Iya jadi kalau gue dulu pengalaman pertama kali

6:06kamu course masih belum belum ngerti ya masih baru banget belajar terus kan carikan stek

6:15overflow caranya ngatasin course Oh dikasih headernya bla bla bla nah bentar ada plot twistnya

6:21ditambahin nya di request nya bukan dari servernya ya udah terus aja sampai ganti presiden berapa

6:3125 nggak bakal bener eh harusnya di-report di pas ngirim request dari klien sitenya ya nggak

6:39bakal berubah lah Iya nggak bahkan dulu sempat ada eh apa namanya extension Chrome extension

6:49masih ya masih ya bypass ngekalin bypass karena biasanya kalau di server kalau servernya kita

6:59yang punya itu bisa nambahin nambahin header dan lain-lain itu mungkin bisa kan bisalah request

7:09sama anak back-end gitu kalau kalau yang kerja ya tapi kalau bisa terparti API nanti dari dev

7:15juga bisa yang baru ya DevTools yang baru nanti ada update nanti ingetin aja kita demo demo bisa

7:22daya apanya bisa apa namanya responsnya kita bisa edit di desktop nanti kita coba

7:32ini ada juga nih yang berpengalaman kalau kena course dialogin secure content

7:38insyakir konten sebenarnya course nggak bisa sih dia di kalau nggak bisa beda harus dari servernya

7:51ya servernya harus mengelola origin udah kan definisi course dengan cross origin

7:57resource sharing nah biar mungkin biar lebih jelas mungkin kita akan run through kali ya

8:05itu apa terus gimana cara kerjanya kenapa bisa kena dan gimana solusinya gimana solusinya untuk

8:13supaya ya enggak kejadian gitu ya ini adalah dari websitenya MDN itu cross origin resource sharing

8:27adalah salah satu properti dari http header yang memungkinkan server

8:37to indicate any origins origins itu artinya berarti ini ya domain, schema, port gitu ya

8:43nah kalau misalnya yang masih bingung origin itu apa kita kan dulu punya episode ya apa ngobrolin domain ya url oh udah URL oh iya ngobrolin URL nah itu keliatannya udah kita bedah semua ya

8:57jadi kalau ada yang belum nonton bisa dicari sendiri

9:01ya bahkan port juga misalkan teman-teman bikin satu server

9:06itu di apa atau klien

9:09klien ya sama klien kalau server aman harusnya ya

9:12klien satu misalkan localhost 3000 gitu kan

9:15terus satunya lagi 3.200 terus mereka sering berkomunikasi bisa jadi kena course juga kan

9:22karena ya apapun yang beda origin itu ya kasarnya gampangnya dicurigain lah jadi kalau misalnya

9:31originnya sama kan ya udah pasti berasal dari satu tempat itu udah enggak enggak ketemu course

9:38sekali tapi di luar itu nah bakal ada semua proses itu paling gampangnya itu kalau misalnya kita dari

9:46domainnya kita tuh kita mau fetch konten tapi dari domain yang berbeda dan domain yang berbeda

9:55itu tidak mengizinkan kita untuk fetch konten dari browser ini browser ya bukan server site

10:01klien website ya jadi enggak memperbolehkan kita untuk fetch konten itu jadi nanti akan keluar

10:10course warning issue atau segala macam datanya juga kita nggak bakal dapat dalam hal ini data

10:18not jason kita nggak bisa dapat kalau server yang menentukan dia mau mengizinkan Apakah semua

10:26origin ya bintang itu tadi yang disebutkan apakah semua boleh manggil boleh membuat request atau

10:32origin tertentu bisa di white list di allow list atau by default kalau enggak ada nggak

10:40nggak di specify ya udah by default same origin tadi cuma yang originnya sama ada beberapa lho

10:47dan

10:55dan kalau tadi kita ngomong antar klien kan klien satu dengan klien kedua gitu kan kalau

11:06misalkan kita taruh server di tengah-tengahnya itu tetap bisa datanya tetap bisa diambil

11:10Iya servernya kan manggil ke yang client

11:15itu namanya middleman middleware ya proxy istilahnya ya proxy bisa karena itu

11:26course ini hanya ada di browser nggak ada di back end

11:32Karena sederhananya semua data yang ada di klien itu bisa di fetch kan, bisa di crawling kan

11:42Kecuali kalau dipakai in autentikasi dan username password dan lain-lain gitu kan

11:49Kalau datanya adalah publik seperti ini data di desain gitu

11:54Kalau server mau ambil ya bisa selama ini publik gitu kan

11:58meskipun kalau antar klien yang nggak bisa antar browser atau antar diantar klien lah

12:05http punya request yang berasal dari client-side dari browser ke server asal atau ke klien atau

12:12manapun nah soal middleware tadi itu jadi kayak jadi landasan lah makanya jadi apa makanya banyak

12:19ada tools yang untuk membypass apa issue course kan ada ada linknya nanti bakal kita lihat itu

12:28kebakangan aja tapi yang jelas emang banyak toolsnya jadi kayak misalnya tools.com dikasih

12:34query parameter url yang pengen kita panggil Nah kita bikin requestnya ke tool yang untuk bypass

12:42itu jadi proxy buat course nah sebenarnya tujuannya apa sih ada course ini kenapa harus

12:53kenapa kita kena error ini? Apakah ada hubungannya sama keamanan data dan lain-lain atau ada isu lain?

13:02Lebih utamanya keadaan security sih. Security supaya pertama data kita aman, kita hanya mengizinkan itu diambil oleh

13:12dari yang kita izinkan kedua bisa ada ini kan kayak cross scripting juga bisa terjadi

13:25terus biar nggak di-dose atau apalah biar nggak di bombardir sama request yang kita

13:36atau dari mana ya Nah ini domain ini termasuk subdomain enggak

13:44Hai ah bisa di-include subdomain scan ada Oh ada nggak sini ini ya ada settingannya kan

13:52Hai semuanya posisi itu bisa include subdomain bisa bisa trik enggak ya bisa di-allow bisa di

14:00reject gitu ya itu kelihatannya ada itu deskripsi kebawah mana ya what request Nah kalau request

14:12apa aja itu tuh ternyata bukan cuma fetch atau XHR tapi termasuk phone apa webphone termasuk

14:20di dalam CSS kita kan suka kelewat ke lain-lain nah terus nah bawah lagi

14:28ada contoh-contohnya simple request

14:36course pre-flight get head post

14:42enggak deh ada kayaknya coba deh ke bawah lagi

14:50sudut example ke atas atas pula adart ini ini

15:01ini kan Oh ini mah beda-beda beda-beda enggak ada ya enggak ada di sini

15:10Stop stop, ada itu tadi kita baca headernya.

15:18Origin, dia nggak ada kasih, ya kan dia waktu dia request, dia nggak ada ngasih izin HTTP course-nya kan.

15:29Jadi by default dia same origin policy.

15:35Terus?

15:36Terus kena reject jadinya kan.

15:38ini reject ya kondisi reject ya belum belum sih dia ini kan ini request ini kan ini baru responnya

15:48karena akses kontrol allow origin dibintang semua boleh responnya tetap 200 karena datanya ada cuma

16:01si browser akan diperboleh kalau dia Iya kalau enggak ada Oh browsernya yang Oh iya ya baru

16:07sadar responnya tetap 200 tapi ya ininya nggak bisa nggak bisa dibaca datanya ya Oh ya ada

16:18penjelasannya to the server returns blablabla header with access control alo origin bintang

16:25yang artinya resource ini boleh diakses oleh kondisiapapun

16:30ini yang biasanya saya taruh di nginx udah nggak usah pusing gitu

16:33itu kalau yang punya server kan

16:37iya

16:38nah ini kalau itu kan bintang ya semua boleh kan

16:41kalau kita mau taruh tertentu bisa seperti ini contohnya

16:45yes hanya satu hanya hanya

16:47oh disini nanti bisa bintang.fu.example kali ya

16:51yes itu juga bisa

16:53bisa bisa dalam bentuk list atau Rey jadi saya mau bisa tanpa full dia kalau salah pakai spasi

17:00deh spasi kalau nggak salah ya udah nggak bisa juga bisa di ini tuh bisa di bisa bisa bisa di

17:12kita cuma mau menerima get request atau finish

17:18ini tadi ada gambar di atas ini ada ini nggak penjelasannya kita meloncat terlalu jauh ya

17:24jadikan kalau request dari klien minta sesuatu ke server

17:30minta layout.js minta image ini boleh gitu kan

17:36tapi kalau kita minta image.png dari origin yang berbeda

17:41Oh ini sama juga ya?

17:42Di dalam canvas ya?

17:43Di dalamnya sini domain

17:45Hai kalau di dalam kanvas kanvasnya image dari domain B itu boleh minta ke domain B

17:51Oh itu boleh yang nggak boleh kalau dari luar itu tuh webphone Oke kalau webphone boleh jadi

18:00kalau iframe minta ke domain B minta ke domain B bisa boleh tetapi webphone yang di domain A

18:11kan dimintanya dari luar itu

18:13iya dia CSSnya dari domain A

18:16minta web phone ke domain B itu gak bisa

18:18gak boleh

18:19oke oke

18:23nah ini ada pertanyaan bagus dari Damar

18:25kalau dari mobile app klien bisa kena juga

18:27kayaknya bisa ya

18:28mobile app web view ya

18:31mobile app

18:35gak mesti web view

18:37bisa yang lain

18:38kalau native

18:41kan mungkin pakai server kan nggak nggak ada server kan nggak pernah bikin kayak nggak ada deh

18:54Hai kagak kena deh Nah gimana kalau elektronik

18:59kalau web

18:59kan ini dari menerapin Oh browser ya kalau kita akses dari postman atau http client yang lain

19:13cural itu kena enggak enggak ke bypass kurung enggak Enggak postman enggak ya postman insomnia

19:21temen-temennya dan temen-temennya http client kan itu Oh berarti browser aja ya spesial sering

19:27implementasi in si apa si course ini ya berarti kemungkinan besar mobile app enggak kena cuma

19:37jadi tertarik jadi mikir itu sih webview webview atau elektron atau semacamnya yang sebetulnya

19:42pakai engine browser lu kenal nggak ya enggak mungkin ya bisa jadi bisa jadi kalau mungkin

19:49kena ya mungkin ya apapun yang pakai engine-nya browser ya tapi kalau elektron kalau elektron

19:57itu kan ada backendnya dia ada node.jsnya di dalamnya jadi ada kayak servernya dia

20:02Hai mumpuni proxy kali ya kayak semacam ini keproxy kayaknya gitu kalau elektron

20:08ya tapi kalau webview atau react native atau dari enggak tahu batik kalau pakai ini gimana

20:15web assembly belum tahu ya lebih jauh lagi apalagi ya oke web assembly tenak course

20:26itu yang harus kita cari tahu nanti ya dianggap kayak Kak eh tadi server lagi ya

20:33masa

20:34kesehatan

20:38dia kan bisa jalanin server WordPress kan back-end kan

20:46nah belum pernah pakai soalnya Iya cuma nebak-nebak aja sama belum pernah juga soalnya

20:55Hai kena-kena Oh kena Oh ya ini nih ini dah dokumentasinya silahkan dibaca

21:06Hai jadi harus ada harus proxy berarti ya kita main proxy di bagian itu edis yang di bagian

21:18you search it additionally each module

21:21each module is subject to security policy of its embedding

21:25within a web browser

21:26this includes restriction of info

21:29through the same origin policy

21:31tetap kenal

21:33jadi kalau dia

21:34web assembly yang dijalankan di browser

21:37dia akan kena

21:38kena security

21:40yang ada di clientnya maksudnya ini

21:43oh oke

21:44karena web assembly juga bisa dijalankan di backend ya

21:47jadi kalau yang back-end gak masalah

21:50kalau di browser ya sesuai yang di browser

21:55terus kita bahas apa lagi nih

22:01ini ya

22:03eh kayaknya tadi kita belum bahas pre request ya oh yang disini Iya yang dicontohin ke bawah bawah lagi bawah

22:18bawah kan tadi udah nih dibahas bawah iya itu kadang kita kalau kalau misalnya baru belajar

22:28juga kali bingung ya ngirim request sekali diklik sekali yang muncul di kalau kita buka DevTools

22:35terus apa melihat Network request kan muncul pasti buat tuh sebelum pos biasanya option dulu terus

22:42pernah ngalamin juga kalau pakai apa Lambda functionnya versel itu kelihatannya dulu sempet

22:49ada ya isulah bak jadi kalau misalnya kita cuma bikin kan apa sih function handler kita bikin

22:57function loh kalau pakai lambdanya Vercel kita bikin handler post kan tapi ternyata kena reject

23:06karena pas kita ngirim options nggak bisa jadi kita ya tinggal bikin handler options juga nggak

23:14tahu sekarang sekarang masih kayak gitu atau udah di patch oleh Vercel nya nah ini karena ada

23:23request-request yang options ya unlike simple request request the browser for sense Nah itu

23:34jadi sebelum ngirim request beneran yang mau kita kirim browser tuh secara otomatis ngirim

23:41request yang metode-nya namanya options itu ternyata tujuannya menentukan Apakah requestnya

23:50aman untuk pikirin Oh kayak ngeping dulu ya mastiin bahwa bisa ini contoh ini contohnya

23:58example request begini ya kan kita lihat itu kan post kan metode nya post kenyataannya nanti coba

24:07terus kalau lagi itu dia ngirim ke bawah ada itunya balik lagi nah tuh ngirim options dulu

24:13options metode si server ngasih tahu oke hanya boleh ini bisa gitu ya yang boleh post get options

24:23terus allow headernya up a header apa yang boleh dikirimkan juga ada nah terus responnya 204 tuh

24:32no content karena kan dia belum ngapa-ngapain cuma mengkonfirmasi aja oke kamu boleh bikin request

24:37gini nah baru bawahnya si pos request yang beneran yang mau dikirim itu dia yang ketiga

24:43ini biasanya kalau di kehidupan sehari-hari saya ngecek Halo terus ya boleh nanya enggak

24:54enggak kalau kalau sekarang sekarang itu rupiah aja begitu ya ping-ping-ping

25:06Pong balesnya apa kalau ada yang oke juga bales pelagi terus ya pelagi udah gitu aja terus

25:15nah detailnya seperti berita Oh berarti itu adalah

25:24reflight kali ya juga kali ya reflight terus kita bahasnya sama-sama delete

25:34204 content Iya atau ada yang nanya gitu kan Maaf boleh tanya enggak lah itu barusan nanya

25:46jawab nggak boleh

25:50berarti kita sebenarnya jawab itu

25:52iya

25:53oke

25:56oh ntar

25:57berarti terjawab ya misteri selama ini

25:59P itu adalah kepanjangan dari pre-flight

26:01brutal

26:05jawabnya 204

26:10baiklah oke lanjut

26:12kemana

26:13Nah paling scroll ke bawah lagi responsaders nya kita lihat sekilas aja

26:19kan tadi udah dibahas tuh low access control, low origin dan temen-temennya

26:25Credential, terpati cookies, responsaders

26:30Nah itu dong

26:31Oke Atau bintang atau Udah pokoknya one liner yang ngatasin ngatasin semua masalah masalah sebenarnya kalau dari segi keamanan mungkin ini ya belum tentu ideal ya Mungkin ada kondisi dimana kita nggak

26:47boleh pakai itu cuma kalau lagi buru-buru dan emang cuma pengen pengen front-end cepet kelar

26:53Nah itu di servernya tuh dikasih itu udah selesai semua.

26:56Selesai semua.

26:59Tapi data kita bisa diakses dari browser lain.

27:04Iya bukan browser dari website lain.

27:09Tanpa persetujuan kita.

27:11Gitulah kira-kira ya.

27:12Tujuan utamanya.

27:13Ini sebenarnya konsen ya.

27:15Konsen.

27:15Konsen.

27:17Jadi harus tahu sama tahu.

27:20Mau sama-sama.

27:21suka-suka ini kemana arahnya nih mengirim respon data cuma kalau expose

27:34bersih apa ya berapa pake koma Mas Riza pakai koma berarti original banyak bisa

27:39pakai koma-koma berarti subdomain itu termasuk origin atau domain domain domain aja misal

27:49example.com itu lihat hanya semua subdomain termasuk deh kecuali kita food.example.com

27:56Nah itu kan subdomain khusus ya udah kalau misalnya bird.example.com dianggap BD Origin

28:03ya ya ya ya oke berikutnya kita masuk ke yang sini ini juga masih penjelasan ya course itu apa

28:16contoh-contohnya tadi sebenarnya udah kita bahas juga sekilas ya

28:20ini mirip sama yang tadi cuma lagi-lagi penyakitnya MDN sih

28:24MDN itu kan lengkap dan teknis dan bagus tapi itu lebih berguna kalau kita udah paham

28:29kalau belum paham tuh kayak bingung nyarinya dimana

28:32nah kalau ini kayak lebih catchy aja kayak lebih apa ya gampang dicerna

28:37pertanyaan mas Riza tadi nih your access yes

28:40Oh ya ini ya dari atas dari atas coba dari atas dulu the following table so the same

28:49origin will be applied to normal website.com Oh example jadi PC example HTML dari normal website

28:57kalau ke normal website example saja bisa example 2 sebeda subfolder masih bisa tapi

29:06normal beda skin HTTPS ya HTTPS nggak bisa beda subdomain sudah nggak bisa beda domain ini udah

29:16dianggap domain ya different domain berarti ya ya jatuhnya ini beda domain kan Iya beda-beda

29:23domain beda origin ya beda origin ini beda juga portnya dan ya origin origin ya origin

29:30internet explorer will allow this access because IE does not take account of the port number when applying the same origin policy

29:40jadi kalau ini masih bisa di IE tapi internet explorer yang sebelum edge ya kalau edge kan udah chromium base kan

29:47iya namanya udah bukan IE

29:50internet edge namanya

29:55internet edge

29:56IE juga ya jadinya ya

30:00iya

30:01oke ini contoh-contohnya

30:04cara aksesnya terus ada

30:06ini ya xping

30:07other ini yang tadi ya

30:09itu custom header

30:11jadi kalau misalnya

30:12apapun yang header kan ada x nya

30:16iya iya bebas

30:17preflight ini ya preflight request yang tadi ya

30:20dan biasanya ya

30:22kalau ada company yang kalian

30:24kalian ingin

30:26apply cek aja headernya siapa tahu we are opening tuh ada di header biasanya atau di konsol di

30:34browser yang sering diperlukan kalau di konsol terlalu obvious biasanya yang lebih dalam lagi

30:40di header ditaruh Oh gitu ister X ister X hiring atau X hiring gitu coba jadi yang yang tahu hanya

30:53yang ngulik ya?

30:55dia buka ini

30:57buka DevTool gitu target audience developer hmm ide bagus itu ide bagus itu di Bali mas ide bagus itu

31:08kalau ide bagus

31:09ini tadi udah juga kita bahas

31:17sebagian besar sama ya

31:18cuma enak aja dibacanya

31:20ini kenapa butuh bisa

31:22gimana cara exploitnya itu gimana coba

31:24notice that

31:26most of the real attack

31:27ateks yang memerlukan akses kontrol memungkinkan kredensial

31:31untuk dikatakan benar karena ini akan memungkinkan browser mengirim kredensial

31:37dan membaca respon

31:39tanpa kredensial, banyak ateks menjadi tidak relevan

31:44itu berarti Anda tidak bisa menulis pada kukis pengguna

31:48jadi terkadang tidak ada yang bisa digunakan dengan membuat browser membuang

31:53permintaan itu daripada membuangnya sendiri

31:56Oh jadi sebenarnya nggak papa ya kalau kasarannya ya tadi tuh low apa low bintang itu ya relatif nggak papa ya

32:06Sebenarnya nggak papa

32:07Di luar nggak di luar kemungkinan kalau di DOS kan tetap apa di bombing request yang banyak gitu ya tetap bisa

32:16Maksudnya tetap ada masalah security tapi bukan terkait credentials kan bukan terkait kayak data-data sensitif

32:24cuma ya kayak database kita kan bakal down atau mungkin tagihan cloudnya bakal bengkak

32:30kalau misalnya dibombardir request.

32:33Nah itu tadi itu bahayanya kalau apa tadi header credentials, allow credentials.

32:39Set to be true.

32:41Berarti ada header lain yang di set true jadi kayak credentialsnya kayak token dan lain-lain tuh

32:48kayak bisa dibaca ya oleh server berarti.

32:52User cookie.

32:53oleh browser oleh browser bisa cookie bahkan belum pernah pakai itu sih belum pernah pakai

33:03header itu sama sekali Nah kalau ini poinnya yang di halaman ini tuh berkaitan di bagian

33:10ini berkaitan sama pertimbangan security nya tapi jujur belum pernah kulik sampai security

33:17intinya sih kalau iframe karena juga berarti ya

33:23Hai kalau beda domainnya kena Iya beda domain

33:29Hai Oke jadi kalau misalkan ada iframe atau pokoknya yang request lah ya

33:34khusus yang request ke domain yang lain ya origin yang lain itu harus dicek juga

33:43Nah ini benar nih, konsol buat yang higher front end, header buat back end.

33:51Benar-benar, make sense.

33:55Oh bisa pakai bypassnya pakai regex ya?

34:00victim.com, bloodprotector.com

34:05Oh bisa dibikin begitu.

34:09Bisa advance gini ya.

34:11Ini apa nih?

34:13The following table contains special character list with the current compatibility.

34:17Oh. Yang ijo cuma Safari. Ijo semua.

34:21Itu apaan deh?

34:25Yang boleh. Yang boleh di... gimana nih?

34:29Bypass.

34:31Regex Bypass. If you found domain victim.com to be whitelisted,

34:35you should check victim.com.at anchor.com is white list Oh ini ada ceritanya di sini kita

34:42nggak baca jadi nggak dapat konteks coba baca ini ngomongin pengen tahu masalah-masalah

34:51security soal course Kenapa penting kayak pertanyaan Mas Riza Kenapa penting course

34:58yang tadi saya bilang kan karena bisa cross-site scripting ya ini penjelasannya

35:02baca ya kita nggak akan gali lebih dalam karena sudah agak di luar konteks sedikit

35:10next ini adalah jawaban stack overflow yang cukup membantu

35:18zoom in zoom in zoom in zoom in

35:20pertanyaannya apa?

35:23Ya intinya apa sih course, kenapa ada course-coursean? Ya intinya I'm trying to

35:30Understand course.

35:31Kenapa error?

35:34Pas pertama kali ketemu course, pasti alur mikirnya dari sudut pandang servernya.

35:43Karena kita kan lagi ngerjain client-side request ya.

35:45Kita lagi fokus di ini, requestnya salah.

35:48Aku tiba-tiba nggak bisa sebelumnya di-call atau di-postman, bisa-bisa aja.

35:54Padahal ini kan sebenarnya dari sudut pandang servernya untuk perkembangan kamu.

36:00Ini tadi ada pertanyaan saya berkaitan dengan klien HTTP klien yang lain selain browser itu tidak menggunakan same origin atau course.

36:14Request made from this other HTTP client don't have an origin.

36:20Unless the postman desktop app emulates a browser it will be able to make request to any URL.

36:26Nah ini yang bikin bingung kalau belum tahu soal course kan, tadi dicoba API-nya bisa.

36:32Iya, begitu di browser kok nggak bisa.

36:35Tadi di course bisa, di postman bisa, tapi kalau di Face pakai JavaScript kok nggak bisa.

36:41Terserah nggak bisa.

36:43Terus pusing sendiri, kenapa gitu.

36:48Course and the same origin policy are needed because a browser does not implicitly trust the website it visits to make requests.

36:56to other website karena kan semua orang bisa bisa buka browser bisa jalanin FED atau jalanin

37:05clientset request dari browser ke server manapun ke origin manapun they don't protect the origin

37:14side they protect the side receiving the cross origin request this is why servernya si resource

37:20jadi sedikit mengenai proses scripting kan misalnya gini

37:24anggap kalian punya situs

37:27terus ada comment box

37:29anggap ini jaman kita belajar bikin form comment

37:38jadi kita gak sanitize gak clean

37:41apa yang dipasukin user

37:44jadi misalnya saya masukin kode javascript ke comment box

37:47dan komen saya masukin itu

37:49anggaplah kita

37:51saya memasukin benar-benar malaysius code

37:53ya malaysius code

37:55mengambil cookie

37:57dan mengirimkan ke server saya

37:59contohnya, ya kan

38:01yang terjadi adalah begitu

38:03komen saya di up

38:05tapi kan tidak keliatan apa-apa

38:07tetapi di background

38:09javascript saya di execute

38:11oleh si pengunjung

38:13bukan oleh si pemilik

38:15pengunjung kan pengunjung halaman itu semua pengunjung yang membuka halaman itu ya akhirnya saya bisa ngambil cookies bisa ngambil analisis analytics apa segala macam dan cross origin mengirimkan cross origin ke situs saya tempat lain nah itulah maksudnya yang diprotect oleh si browser

38:37Kalau tidak satu origin, script apapun itu nggak boleh request, nggak boleh post ke tempat lain.

38:48Kalau tidak diizinkan oleh si pemilik origin, pemilik domain atau pemilik server.

38:56Pemilik resource yang menerima request itu ya.

38:59Betul.

39:00jadi itu bahayanya ya kalau kita allow semuanya gitu ya kalau kita allowing

39:10Oh ini hampir sama konsepnya hampir sama seperti SQL injection kali ya enggak

39:21tapi di frontend

39:23iya tapi di frontend

39:25beda

39:27kalau SQL Injection itu kan

39:29kita men-submit sesuatu

39:31yang diterima server

39:33untuk dimasukin ke database dan diinject

39:35ya kan? betul

39:37jadi

39:39ini tetap di client

39:41karena kontennya

39:43tetap masuk ke database

39:45seseorang tetapi waktu di load

39:47javascriptnya

39:49dan mengirimkan data ke tempat lain Hmm ya ya ya Gitu Oke oke Benar benar

40:02Oke, terus

40:04pembahasan berikutnya

40:07masih sama

40:08tentang kurs juga.

40:11Ini artikel ya, artikel yang berbeda.

40:14Kurs itu apa,

40:15kita nggak usah bahas, bagaimana cara kerjanya,

40:17ya ini ya.

40:18Nah, itu juga sebenarnya

40:19tapi kayak tadi cuma kata-katanya lebih santai aja ini kayak ngobrol gitu ya jadi dari browser

40:27saya mau query ya apa ini request gitu mau fetch tapi apa nih but I'm supposed to block it

40:39browser-nya kan melindungi tadi kan browser-nya harus memblokir unless kecuali server bilang boleh

40:47Oh ini yang tadi privet ya ini tadi privet ya cek dulu cek-cek nih servernya boleh nggak saya

40:55ngambil data dari kamu gitu ya terus si servernya bilang eh Coba cek di sini request kamu ada di

41:04sini enggak ya servernya bilang po nya yang boleh yang boleh bikin request to domain a.com metode

41:11boleh get post option delete, validasinya durasinya 10 menit, terus browsernya oh ya betul-betul boleh lanjut.

41:21Ya, nah begitu. Boleh kita kirimin data sesuatu, akhirnya kembalinya 200.

41:27Nah ini kalau berbeda, saya mau kirimin sesuatu ke domain yang lain, apakah boleh?

41:40Kalau tidak boleh, tolong dikasih tahu.

41:43Nah, servernya juga sama bilang, cuma boleh domain adik-adik.

41:48Metodnya ini, ini, ini. Validasinya begini.

41:51Terus browser kan ini jadi mekanisme yang diimplementasi oleh browser.

41:56Makanya tadi kan kalau di environment lain nggak berlaku.

42:00Browser bilang, oh jangan, berarti ini ada sesuatu yang mencurigakan.

42:05Pokoknya nggak seharusnya jalan.

42:07Diblokir oleh browser.

42:08Iya, iya. Berarti ini murni interupsi dari browser ya?

42:13Dan yang mengirim error di konsol adalah browser yang melakukan servernya.

42:19Servernya kan belum ngerespons pakai error kan, nggak ngerespons apa-apa,

42:23kecuali responnya cuma bilang yang boleh request itu ini, ini, ini dengan metode ini, ini, ini.

42:29Iya, bahkan responsenya itu 200 kan?

42:34200 itu berhasil tapi di blog datanya nggak bisa kita baca karena berbeda originnya

42:44ngetik sebuah course

42:49respon suit konten course header not all request to trigger

42:55request yang mengerjakan toko apa pose ya kayaknya kalau gitu kalau gitu nggak ada

43:05options bukan yang tetap ada cuma coba baca tadi yang atas-atas saya itu the

43:15request request Oh ya get request get trigger tapi pasti nggak post-request

43:24dengan form URL encoded biasanya form yang disubmit alasannya karena itu adalah itu

43:36dianggap sebagai simple request nah terus daftarnya nanti bisa dicek sendiri ini

43:42Oh, kamu hanya bisa memanfaatkan satu domain.

43:45Oh, gak bisa pakai mana?

43:47PSP.

43:49Ini contoh PSP ya?

43:51Iya, dari server.

43:53Jadi, tambahin.

43:55Oh, bukan penyelesaian.

43:57Gak bisa langsung, kayak misalnya di engine X gitu gak bisa dong kalau itunya banyak.

44:02Ini di cek ya? Ini middleware kan?

44:05Semacam middleware kan? Dia ngecek header, terus kemudian ditampilin kan?

44:08Kalau ada, di-delete.

44:10ini dinamis ya jadi lebih dinamis ya tapi nggak bisa akses kontrol alo origin titik 2 X domain a a domain b nggak bisa berarti Oh iya ini lebih familiar ya kali ya buat teman ya javascript

44:32Ini node.js ya, ini node.js.

44:34Hampir sama ya, kurang lebih sama.

44:36Caranya gimana terserah, yang penting kita bikin jumlah headernya,

44:41jumlah header akses kontrol allow origin sebanyak domain yang pengen kita allow.

44:45Saya yakin teman-teman pasti menggunakan modul atau library yang namanya course di express

44:52Ini cara manual ya, ini cara manual ya

44:57Sebenarnya middleware course itu ya ini sebenarnya

45:01Tapi kita pakai cara manual jadinya ya agak nggak panjang juga sih

45:08Maksudnya cara kerjanya kayak gitu

45:10Cara kerjanya

45:11kan dry do not repeat yourself ya udah pakai aja library yang udah ada yang kita paham

45:17termasuk is 13 is 14 ya Hah itu kan is 13 is 14 jst

45:26library aneh kapan-kapan kita bikin episode library penting gak penting

45:34kapan ya si NPM menerapkan ini ya

45:39dilarang upload

45:41bukan dilarang

45:42iya bukan dilarang

45:45lebih ke dikorasi

45:47ada approvalnya

45:49kayak webstore gitu

45:51kayak appstore gitu kan

45:53di approve dulu, di cek

45:55karena kan banyak kasus ya

45:57ya bukan hanya di NPM sih ya

46:00di python juga

46:01pernah kejadian

46:02di Ruby saya enggak tahu yang saya pernah dengar ya Faker terus ada masuk-masukin

46:11apa namanya mining ya kan banyak kan gitu ada yang mengunfalkan typo

46:18dulu pernah ada monggo.db typo Nah itu masuk kemana jadi kayaknya kurang dekorasi aja gitu

46:27Sayang banget

46:29Padahal kalau di kurasi pun bisa aja masih bocor gitu kan

46:35Tapi ya mungkin ini ya ada bisnis modelnya lah

46:40Kalau harus kurasi kan orangnya banyak ya butuhnya

46:44Cuma kalau NPM kan emang dia jualan private registry juga kan

46:49Jadi kalau misalnya mau aman yaudah jualan private aja

46:53Silahkan organisasi Anda mengkonsumsi dari registrinya sendiri, kurasinya, segala macam ya diserahin ke yang jalanin si organisasi private itu kan.

47:04Ya betul. Jadi bukan klien yang melindungi server tapi browser yang melindungi.

47:09Browser melindungi klien dan server juga.

47:11Kan jadi maksudnya kalau si servernya tadi nggak konsentro bilang saya cuma mau menerima ini, ini, ini.

47:18ya browsernya tahu diri nggak ngirim request lagi kan kalau emang nggak diterima

47:23nah ini ada

47:27wkwkwk

47:29wkwkwkwebview

47:32itu apaan coba

47:35ini adalah webview untuk iOS

47:39namanya wkwp

47:41kenapa namanya gitu sih

47:44nggak tahu pandangannya apa itu

47:46yang memakai webview dengan Cordova atau Ionic, Android tidak akan memberi Anda masalah, tapi webview WK iOS akan memerlukan course.

48:00Oh, yang iOS butuh, yang Android tidak.

48:05Ketinggalan, ketinggalan Android.

48:10another alternative is not to make a jet request in your app and use a cordoba plugin Oh bisa ya

48:19ada di sediain jadi mekanisme STP request di native tuh kayak ada ada prosesnya sendiri ada

48:27ada itunya sendiri impiannya keren sendiri reaktif klater dan teman-temannya juga menyediakan jadi

48:34Bukan pakai fetch, bukan pakai browser.

48:37Sama aja kayak Electron tadi, Electron juga di dalamnya tuh ada Node.js.

48:42Jadi kalau kita mau file access segala macam itu pakai fs gitu jadi ada servernya lah ada servernya jadinya harusnya aman

48:53itu tuh yang Firefox kenapa sih kasusnya? belum pernah nemu sih

48:58if you make a request to file system on Chrome and Safari

49:03tapi nggak Firefox

49:05if you make a request to local file, Firefox will consider that it's always on the same domain and allow the request

49:13Webkit-based browser seperti Chrome atau Safari akan mempertimbangkan bahwa ini adalah security risk dan memblokirkan pilihan ke file lokal.

49:24Oh, file lokal kalau kita fetch di Firefox aman, tapi di Chrome atau Safari itu kena.

49:32File titik dua kan?

49:33Iya, file titik dua slash slash slash.

49:36Itu kan berarti kan beda skim.

49:38Beda, beda origin.

49:41secara spek teknis yang berbeda pendapat sendiri kurang ya ini ini kalau teman-teman penasaran

49:53kenapa si Chrome dan Safari eh apa base-nya sama webkit kita udah pernah bahas ya tentang

50:00browser ya jadi sering itu forking forking webkit dia bikin Chrome Safari pakai webkit

50:08dan webkit Bapaknya dari si browser iya apa sebelumnya KDE environment ya dari dari Linux

50:21ada desktop environment namanya KDE ada browser namanya K-Browser kalau nggak salah namanya

50:27bukan nescape ya nescape jadi nescape dari Firefox lah oh nescape jadi Firefox

50:34satu-satunya yang masih bertahan dengan browser engine yang berbeda untuk saat ini adalah Firefox

50:46Firefox melawan dunia yang lainnya udah mirip-mirip ya

50:51tapi semakin kesini semakin berbeda ya antara WebKit dan Chrome

50:57webkit premium

50:58agak sedikit berbeda

51:01berbeda visi makanya

51:03mereka forking kan

51:05oke

51:08berikutnya, apa lagi nih

51:11protokol, HTTP protokol

51:14ini adalah bagian dari web standar ya

51:16ya itu kalau ada yang iseng banget

51:19pengen lihat

51:20spesifikasinya

51:22jadi si course ini bukan maunya

51:25ya tadi walaupun banyak browser engine yang

51:28semua browser engine

51:30mengimplementasikan course ini

51:32sesuai

51:33cara mereka masing-masing, tapi course ini

51:36bukan punya, bukan milik

51:38browser vendor manapun

51:40jadi ini spesifikasi teknis

51:42memang

51:42bagian dari speknya HTTP

51:46ya terus

51:48nah 3.2 tuh

51:50force protocol

51:52oke

51:53versatil fetches

52:00that possible with

52:02HTML form element the course protocol

52:04exists it is layer on top of HTTP

52:06and allow response to declare

52:08they can be shared with

52:10other origins

52:11adalah response dari

52:14server atau resource nya itu

52:16mendeklarasikan

52:18oke saya mau

52:20membagi respon dengan

52:21origin tertentu.

52:24Oke.

52:28Terus,

52:29kalau kita, apa tadi?

52:31Kita masih bahas tentang

52:32preflight juga.

52:35Optimizing course, technique for bypassing

52:37course, preflight, request to improve performance.

52:40Ini berarti ada kaitannya

52:41dengan performance ya?

52:43Ya kan pasti makan waktu.

52:46Preflight dulu,

52:48terima respons,

52:48terus habis itu baru kirim respons.

52:51Oh jadi yang tadinya satu kali request jadi dua. Ya jadi ada dua requestnya.

52:57Ya walaupun sebetulnya mungkin in real world ini 0,0 berapa detik sih ya.

53:04Tapi ya tetap ada setiap request.

53:09Ini setiap request kita lakukan ini?

53:11Iya setiap request.

53:15kecuali get ya

53:16kenapa itu contohnya pakai get ya tapi

53:20iya

53:20salah

53:23oke caranya gimana yang pertama adalah caching

53:26caching itu adalah menyimpan data terakhir

53:30tambahin ini ya

53:32jadi datanya udah

53:35apa disini masih valid atau enggak

53:37kalau masih masuk ke

53:39umurnya

53:4124 jam

53:42berarti masih dianggap sebagai valid

53:44jadi nggak perlu provide nggak perlu ngecek bisa langsung get karena toh get nggak di-preflight

53:53jadi yang bisa di-cashing cuma get ya masa post mau di-cashing nggak mungkin juga kan

53:59nah jadi kita skip aja kekurangannya adalah

54:06um

54:09With this approach one should be aware of

54:16Ada case case key browser keys each case by http method and url as a result if you are accessing control

54:25Cross origin backend and make multiple api calls with variable set of query string parameters then catching will have

54:31little to no impact on performance tetap aja dia akan request karena variabelnya itu pakai string

54:40query ya berubah berbeda terus berbeda terus Jadi kalau kita siapa nih yang sering melakukan ini

54:47Wah ini kok catching nya kok kayaknya datanya enggak berubah mungkin catching kita tambahin

54:51ya query string random supaya sampai sekarang itu kan CDN enggak mesti CDN kadang-kadang kalau kita

55:02main dengan satu Iya mungkin kita lupa ya di devtool itu bisa di disable ya jadi pada saat

55:11kita buka devtools itu by default itu enable memang tapi kita bisa bikin itu di sini ya

55:21ini disable cage lakukan itu aja jadi nggak perlu pakai yang tadi

55:27control shift R udah hafal ya kalau Windows ya kalau command shift R

55:37kalau di command shift R kalau kita buka apa Chrome DevTools kita pencet yang lama

55:46refresh itu dia munculkan normal refresh sama MP3 refresh itu juga bisa gampang incognito aja

55:58oke itu lumayan lucu banget bikin iframe iframe nya same origin nah terus kita bikin listener

56:13event listener untuk mendeteksi apa tuh kayak respons dari dalam my frame nih lumayan kreatif

56:22ya akal-akalan montir ini ya berarti ya seru

56:32Hai di Indonesia jadi kayak itu kayak kalau pakai service worker itu apa at event listener kirim

56:41post pakai apa metode post message ya ya ya Hai I free Naya yang di-frame

56:50di-frame browser overhead repot-request ya

56:57sering ketiga serta proksi ini kelihatannya ya middlemen middleware ya

57:03ada proxy jadi kita tetap menggunakan apa namanya origin kita

57:10Nah si server yang ini yang berurusan sama luar, sama dunia luar.

57:17Ini yang paling ideal kali ya?

57:20Cukup umum.

57:22Cukup umum, yang paling ideal tapi kita butuh resource untuk ini kan.

57:27Maksudnya ya nggak gede sih tapi ya tetap butuh maintenance servernya, setupnya, harus update juga dan lain-lain kan.

57:36Atau kita bisa pakai service yang udah ada Tapi ya kita bergantung ke third party service Yang gratisan juga ada tapi ya itu lagi

57:46Udah gratisan, external service ya ada risikonya.

57:54Kalau dietibriba hilang kita pusing.

57:56Terus belum kalau urusan data sensitif atau keamanan atau apa.

58:00Kalau mereka kena security breach kita bisa repot juga.

58:05ikutan juga karena iya Azure front door or AWS Cloud front gcp mana ccp apa ya

58:15enggak tahu enggak tahu enggak tahu ya besok-besok kita tanya-tanya Mas Danang

58:25kalau mau kok Mas danang sendiri bisa Iya cuman kan udah ada semuanya yang terima jadi

58:32kalau Cloudflare termasuk nggak ya?

58:37Cloudflare proxy juga kan dia cuma nggak proxy ya

58:41tapi dia bukan untuk kursi dia untuk DDoS untuk gitu-gitu kan

58:48dia hanya bisa proxy ke origin

58:51ke non-origin

58:55oke strategi keempat refactor to simple request

59:00ini lebih mahal biasanya

59:03tadi

59:03belum tentu bisa juga

59:06kan refactor

59:07ujung-ujungnya refactor

59:08ya kan belum tentu bisa juga

59:10ini simple request yang kita lihat tadi

59:12atau post tapi yang dari form

59:16yang jenis datanya

59:17URL form encoded

59:19simple request

59:22some request don't trigger course pre-flight

59:24those are called simple request

59:26obsolete

59:27Let's make the motivation is that form element is added HTML4 can submit simple request to any origin.

59:36So anyone writing a server must already protected against cross-site request forgery CSRF.

59:45Kalau teman-teman tidak mengalami atau belum mengalami ini biasanya di framework itu sudah ditangani ya.

59:52Termasuk juga rejection dan lain-lain ya.

59:55Ada helpernya.

59:56nons number ones

59:59nons

1:00:00and ones

1:00:02simple request

1:00:04all following condition

1:00:06oh tadi udah kita baca ya

1:00:08iya tadi kita bahas tapi dari artikel

1:00:11satunya nah cuma kan itu cuma

1:00:13nge-link kalau pengen baca detailnya

1:00:15soal simple request

1:00:16yaitu baca di MDN

1:00:18jadi kalau pakai

1:00:23get aja atas simple request bisa langsung

1:00:24tapi kalau misalkan enggak ya harus pakai preflight ya

1:00:28simple request example

1:00:32ini pakai get

1:00:33nah kan gak semua operasi bisa pakai get doang

1:00:38kirimin datanya gimana

1:00:40pakai header ya kirimin datanya

1:00:42kelihatan dong

1:00:43kalau datanya

1:00:46kalau datanya gak

1:00:50kredensial

1:00:51gak penting ya

1:00:52ya kalau itu kan penting juga cuma ya emang tujuannya untuk pakai gitu

1:01:07Nah kalau kejadian teman-teman misalkan kena masalah course 12 tahun-tahun yang lalu itu

1:01:2011 tahun lalu profile itu oh iya oh iya Wow demo-nya 10 tahun lalu enggak berubah ya karena

1:01:28apa spesifikasi cctp ya gitu-gitu aja sebetulnya no jasproxy which at course header to the proxies

1:01:37request jadi ini kita bikin server sederhana di localhost ya atau di tempat lain terserah untuk

1:01:45membuka itu ya yang tadi ya berarti yang ini ya yang ada di tengah-tengah tadi yang middleware tadi

1:01:53middleware ini kita bikin server ini itu salah satu solusinya

1:01:59dia juga nyebiain kok dia nyebiain tapi pake Heroku gak tau masih hidup gak ya masih ada gak dulu pakai Heroku gratis kan udah bisa orang pakai ini sekarang pas udah banyak masih masih woy mantap

1:02:13coba harus temporary click only

1:02:16kan Heroku gratisan sekarang udah gak ada

1:02:21iya dia bayar berarti

1:02:24kasihan

1:02:25tapi di bawahnya ada lagi nih

1:02:29this demo shown how to use the API

1:02:32kan tinggal belakangnya

1:02:35dikasih query aja kan

1:02:36url yang pengen kita tuju

1:02:38ya

1:02:39misalkan apa

1:02:42gak tau apa

1:02:44kalau kita semuanya bisa kan

1:02:46example API

1:02:47example API ya apa aja lah ya

1:02:50get mah aman

1:02:51ya gitu lah cara pakenya

1:02:54ya kalau misalkan nanti mau

1:02:56form

1:02:58gitu kan

1:02:59submit form tapi ke

1:03:02origin yang berbeda bisa coba

1:03:04pakai course anywhere ya

1:03:06.herokuapp.com

1:03:08ada satu lagi ya

1:03:10ada satu lagi

1:03:11oh ini

1:03:12ini

1:03:13kode ya

1:03:15ya itu dasarnya yang

1:03:18lengkap banget punya segala

1:03:20service proxy buat

1:03:22nakalin

1:03:23service-nya

1:03:24ada possibility

1:03:26itu ada Cloudflare course ada course anywhere baru tahunnya aja klik aja kemana paginya Oh ini

1:03:36lepon 7 bulan yang lalu kan ah unofficial tapi iya iya

1:03:43jalan di ini di edge-nya Cloudflare kali ya

1:03:48Oh di workers to deploy ke workers cloudflare betul-betul ke workers.dev ya

1:03:58Oke terus ada apa lagi course anywhere all origins possibly dead mungkin sudah ya itu

1:04:10tadi resikonya pakai layanan third party ya tiba-tiba dia bisa mati kapanpun karena untuk

1:04:18ini untuk kalau begini untuk development aja Oh kalau ini ini kan server site ya kalau cuma

1:04:27development di lokal mat pakai extension browser aja sih yang lebih cepet Iya benar

1:04:32ada Chrome Chrome extension Bypass course pasti banyak tuh yang muncul

1:04:38tapi buat di lokal ya buat apa development kan pure development

1:04:48terus kalau buat production gimana caranya kalau mau misalkan nih pada saat develop kita pakai itu

1:04:55pada saat ke server gimana harus pakai service ini yaitu tadi pada service terparti atau bikin

1:05:01sendiri ya kita bikin sendiri aja middleware ya berarti itu hanya untuk tes bahwa masalahnya

1:05:11gitu ya memastikan ya terus kita cuma pengen develop UI ini pengen lihat UI-nya muncul atau

1:05:19enggak misalnya Oke ini ada salah satunya ya salah satunya nah ini dulu sering saya pakai nih buat

1:05:33kamu kalau kena course pakai tunnel pakai tanah kalau itu berfungsinya kayak proxy juga ya berarti

1:05:43sama ya Iya deh dia server kan Yes channel itu kan buat kayak VPN gitu kan ya tunneling dari

1:05:54online server kan lokal Iya Iya ke lokal betul-betul bisa-bisa itu kan jadinya server

1:06:02juga kan berarti apapun punya biar enggak langsung dari client-side dari browser ke

1:06:07resource atau server yang dituju kan yang pingin sesuatu di tengah-tengah kalau ini

1:06:14apa namanya ini nanti saya demo ini nih kalau nggak perlu lagi pakai extension-extension

1:06:19langsung aja, bisa dari DevTools

1:06:23cari contohnya apa ya?

1:06:25oh, cari contoh API ya?

1:06:28oh ini ini ini swapi swapi ah terlalu ribet itu tunggu ya make something API lah

1:06:40let's cut

1:06:42ini API nya OpenAI lah

1:06:44nah nah bisa bisa

1:06:46coba kita contohin sama sama yuk

1:06:48demo demo

1:06:50demo demo

1:06:52oke

1:06:54yuk entire skinnya aja

1:06:56biar gampang hidupnya

1:06:58di-save screen ini dari si apa namanya zoom in jadi si devtool itu kita bisa hidupin dan

1:07:15bisa override content sama override header contohnya di sini ya oh baru tahu

1:07:20inspect kalau kita lihat zoom in kelihatan kelihatan oke kalau kita lihat ada list.json

1:07:36ya kan kita bisa lihat respon sendernya sama respon request tadi kita lihat netlify

1:07:48strict transport cuma gitu doang sih enggak ada nah kita bisa show of right content sama of right

1:07:58kita coba offline konten dulu ya Nah sel folder uh oke bisa ngambil dari local file ya nanti

1:08:09similokal file list jesen itu di local file coba ngobrolin web kita save kita reload copy

1:08:24setelah jadinya Woi itu nah satu sisi lain kita juga bisa ngerubah kita baca selanjutnya

1:08:37di pelan-pelan itu untuk overwrite konten ya kan kita select foldernya nanti dia akan save file

1:08:45jason itu di folder file jadi nanti instead of jadi si devtool itu gak ngambil dari server

1:08:53tapi nge-load yang di lokal dari system kita yang udah kita pilih terus bisa juga kita override

1:09:02responseder responseder ya yang di override bukan requestnya kan berarti yes kalau requestnya ngapain

1:09:11bisa rubah di cross originnya kita

1:09:13kalau tadinya gak boleh

1:09:16aslinya gak boleh

1:09:17tinggal kita override

1:09:19jadi boleh

1:09:20terus ya betul

1:09:23sekali ini ada banyak header yang bisa

1:09:25cross origin, permission policy

1:09:27cross origin assertion header

1:09:28juga bisa kita rubah

1:09:30contohnya ya

1:09:31response headernya

1:09:33kita klik kanan

1:09:36override header

1:09:38nah kan langsung bisa

1:09:40bisa ditulis nih ya bisa di ini ya ya kita mau tambahin tadi apa allow access apa sih

1:09:52allow origin nggak pernah hafal allow origin contoh ya terus tapi kita bikinnya https

1:10:04Google.com contohnya ya kan harusnya error salah harusnya error tapi kok

1:10:20karena ngambil datanya dari lokal ini iya kita bisa jadi kita coba di dibalikin lagi ke semula

1:10:36gimana caranya hapus dulu ya kita hapus kita hapus

1:10:42eh lagian kalau get kelihatannya gak ngaris kan

1:10:45bisa kan kalau get kan

1:10:47coba ya kita saya sudah hapus yang lokal harusnya gak ada mobile dan web

1:10:52nah betul gak ada

1:10:54network listnya masih dapat

1:11:00kan gak bisa none

1:11:01iya kalau get kan bisa normal

1:11:04harus yang post

1:11:06susahnya demo nya

1:11:09kalau post

1:11:10ya ntar coba sendiri

1:11:14pakai post lah

1:11:15kalau post harus bikin

1:11:17aplikasi harus bikin itu

1:11:19bikin form

1:11:21akses kontrol allow origin

1:11:24alat tps

1:11:26alat tps

1:11:26ini kan dari originnya dari si kafika.app

1:11:32kalau Oh maksudnya kalau ada script misalnya gini kalau ada script dari sini

1:11:43Hai Fetch ini nggak bisa begitu ke google.com ke ke ke

1:11:54source-nya itu tadi kan ke source-nya si list of

1:11:57coba ada yang pakai petik-petik example API example API swapi-swapi Oh ya swapi Star Wars

1:12:11tapi saya pilih folder pakai tanda petik tuh jangan lupa suami ini

1:12:23tapi tapi tuh get dong

1:12:26Iya nggak apa-apa itu aja shopee.net

1:12:30slad-slad people selesatu petik-petik petik Nah itu siapa looks ke Wolterya

1:12:38people yang bisa tuh iya kayaknya

1:12:42ngomong-ngomong

1:12:45nggak boleh nggak boleh

1:12:52bisa kan

1:13:03Oh wait wait enggak di-wait soalnya bisa kan langsung kan udah bisa terus enggak ada keluar

1:13:14hasilnya Oh di sini keluarnya muncul ya tapi dia handernya apa karena get low origin entar entar

1:13:25saya coba-coba omelette right over I itu gitu hanya boleh dari Google.com sekarang coba lagi

1:13:38harusnya enggak boleh sadang Oh yeay cara kerja

1:13:48demonya berhasil

1:13:53orang-orang supaya bisa bypass course kita supaya supaya course supaya course

1:14:02supaya error lebih susah loh mendemokan supaya error itu lebih susah

1:14:08tadinya bener jadi error

1:14:10jadi salah tapi kalau di pikir DevTools makin lama makin canggih buat recording apa user interaction flow udah ada buat override apa responseder udah ada lama extension

1:14:25gak laku. Betul saya waktu belajar ini senang banget karena saya daripada bikin faker-fakeran

1:14:32segala macam saya langsung aja dari sini ngetes segala macam save terus pada special test.

1:14:40bener juga sekian demonya dan terima kasih ye nah kalau yang jesenp ini perlu dibahas perlu perlu

1:14:54perlu perlu ya karena gua nggak ngerti itu apa ini kalau mau baca soal Dev tool nanti bisa oke

1:15:01kalau nanti ada yang lebih bahas lebih dalam mungkin itu jadi topik Ayo extend

1:15:09saya Woi bisa bisa bisa bisa apa yang baru di tepuk sikit ya Nah jeson P nah

1:15:19pernah tahu jason.pi bukan jason.blas kan sempat bahas sedikit di konfigurasi file

1:15:26kan sebenarnya kan iya tapi ada pernah pakai gak? enggak ini sering saya pakai dulu sebelum ada

1:15:34kursan saya sebelum maksudnya untuk bypass course oh ya jadi begini ceritanya jason.pi

1:15:45artinya jason with padding

1:15:46oke

1:15:48kalau misalnya

1:15:51saya ajak nih tetapi

1:15:53mau kayak gini contohnya

1:15:55saya mau ambil dari twitter timeline

1:15:57dulunya atau mau ambil

1:15:59dari list dari

1:16:01third party

1:16:03api yang tidak

1:16:05mengizinkan allow origin

1:16:07itu

1:16:07tetapi dia ngasih bisa

1:16:10data type nya jason p

1:16:12dia belum ada header header course

1:16:15dia kasih tapi dia boleh memperbolehkan JSONP atau aplikasi saya sendiri dari domain berbeda

1:16:21dan daripada saya pakai allow course saya pakai JSONP format cara jadinya begini scroll nanti

1:16:32terus-terus terus-terus terus-terus JSONP, JSON with padding, how it works ya how does it work

1:16:39kalau kita jason biasa tuh seperti ini turun seperti ini kan first name last name kalau pakai jasonp itu ada callback yang akan membuatnya jadi string

1:16:51oke turun lagi, ini error kalau turun lagi

1:17:01dia akan sup, nah ini dia, jadi callback name

1:17:08callback name itu whatever ya, apapun stringnya terserah

1:17:12mau ngobrolin web terus kurung terus baru jsonnya

1:17:18nanti akan jadi window object turun ke bawah

1:17:21ini absurd

1:17:25nah ini bypass si course karena ini adalah dia tidak termasuk dalam polisi itu kontrol termasuk dalam posisi kasih ecp blablabla itu apa ini ini enggak masuk deteksi itu ini

1:17:48callback ya Kenapa namanya pading Iya pakai masih bayangin CSS atau pading atau

1:17:56pading sama kayak kenapa Java dan JavaScript ya kekitulah pertanyaan itu sama itu artinya

1:18:06kalau JavaScript ada penjelasannya dulu javol lagi ngetrend jadi kayak udah kasih aja nama

1:18:14ada java-javanya formatnya format tetap Jason mungkin kasih pede-pede Iya kenapa namanya

1:18:21pede gitu Iya kalau nggak bisa sih jesen wuih atau jesen-jesen kekasihnya ini nanya ke yang

1:18:31bikin kumit dia akan akalan aja supaya bypass gitu sih jadi objeknya sih ini objeknya Windows

1:18:41jadi bukan jason data dia Iya yang kita permasalahkan bukan ininya yang kita permasalahkan

1:18:49kenapa namanya Jason padding ada-ada aja nggak ada jawabannya nggak terjawab jawabannya Iya ya

1:19:02maklum lah yang kasih nama kayak developer ya jadi ya itu kata damar 204204 204

1:19:14sumpah preflight get options delete Oh Jason preflight aja bagus nama Jason pay juga tapi

1:19:25bukan padding hehe hehe jadi sudah jelas tentang course malam hari ini mudah-mudahan dapat

1:19:36pencerahan ya kayaknya kayaknya semakin kesini ya orang sudah semakin teredukasi error Jason

1:19:43apa error Jason error course itu apa dan solusinya seperti apa kalau dulu kan kayak misterius kita

1:19:52masih belum tahu misterius kan uh kaget langsung ini error nih coba ini setelah flow Iya kita

1:19:58cobain di http client pakai jual pakai postman dan lain-lain kok aman gitu ya Kenapa ini salahnya di

1:20:05di kode frontend kita kah atau gimana gitu kan sama kayak sama kayak dotdev nya Mas Diza ini

1:20:13pakai cural bisa 200 history history https http domain.dev pakai cur bisa pakai postman bisa

1:20:24loh browser nggak bisa play direct ke https masalahnya itu dotdev kan nggak cobain domain

1:20:32lain kan jadi kita enggak tahu bisa membandingkan ya begitulah jadi solusinya udah lumayan banyak

1:20:39tadi ya ya Mister browser Mister browser ini adalah salah satu cara browser memproteksi mengamankan yang semua penggunanya serunya baik dari klien dari server kalau yang paling gampangnya throw in server

1:21:00bikin bingung ini Valempen, frontend itu banyak banget under deal-nya

1:21:07perintilan-perintilan kecil yang menghalangi kita untuk getting things done

1:21:13tapi sebetulnya kalau udah tahu cara kerjanya kayak gini nih kalau kita udah baca itu semua

1:21:18tadi Oh ya ngerti-ngerti tapi sebelum ke situ kayak eh aneh-aneh nonton ngobrolin web biar

1:21:30menambah ini ya cakrawala pengalaman di chat rupiah doang jawabnya apa huish tujuannya itu

1:21:41ya ya ya ya oke kalau gitu ada lagi sebelum mudahan kita mau mau adem-adem mau usul saran

1:21:51kalau ada yang mau saran-saran usul topik-topik saran kritik ya mau ngundang siapa boleh ke

1:22:00kesana.in slash ngobrolin nanya-nanya juga boleh nanya-nanya juga boleh mau kalau punya ide mau

1:22:08bikin aplikasi web ya, jangan aplikasi mobile, boleh juga nanya-nanya kita apa aja, pokoknya boleh kita menerima

1:22:19walaupun belum tentu dijawab, tapi bisa kita jadikan bahan referensi kalau kita nggak ada obrolan apa gitu

1:22:26yang mau diobrolin ya kita bisa membaca pertanyaan di sini nanti kita akan jawab.

1:22:31Ini sebagai pengganti slido ya kemarin ya, kalau slido itu kayak nggak ada diskusinya,

1:22:36kalau ini kan kita bisa diskusi nih kayak yang ini nah ini menarik nih image to react code ada

1:22:42V0 ada macam-macam ya tadi saya cobain yang apa make realnya si tel draw juga itu keren

1:22:51ini kita bisa sambil diskusi juga di sini jadi nanti pas topiknya diangkat kita bisa mereferensikan

1:22:59apa yang teman-teman

1:23:01dan kita diskusikan disini

1:23:03mungkin untuk malam hari ini

1:23:06segitu dulu aja

1:23:07tuh

1:23:09Dita udah

1:23:11mau nodong

1:23:14nih ya kayaknya ya

1:23:15emang udah ada

1:23:18tanggalnya

1:23:19ya

1:23:23jadi

1:23:24tiba-tiba udah ada ya

1:23:27nyuristat ya biar gak

1:23:29keburu diambil

1:23:31di booking sama kota-kota lain

1:23:34oke

1:23:37kita udahan dulu, terima kasih banyak

1:23:39buat atensinya, buat

1:23:41obrolannya dan buat diskusinya malam hari ini

1:23:43kita ketemu lagi minggu depan

1:23:45di selasa malam jam 8 malam

1:23:47sampai jumpa

1:23:48jaga kesehatan semuanya

1:23:51mudah-mudahan

1:23:52tahun barunya berjalan lancar

1:23:55ya

1:23:56sampai jumpa

1:23:59Bye-bye