{"id":38932,"date":"2023-05-11T15:10:09","date_gmt":"2023-05-11T08:10:09","guid":{"rendered":"https:\/\/www.rumahweb.com\/journal\/?p=38932"},"modified":"2024-02-23T11:40:28","modified_gmt":"2024-02-23T04:40:28","slug":"cors-adalah","status":"publish","type":"post","link":"https:\/\/www.rumahweb.com\/journal\/cors-adalah\/","title":{"rendered":"Apa itu CORS? Pengertian hingga Cara Mengaktifkannya"},"content":{"rendered":"\n

Sebagai pengembang sistem aplikasi web, tentunya Anda pernah menghadapi kendala saat melakukan pertukaran data melalui HTTP Request yang umumnya terjadi ketika menggunakan Rest API<\/a> melalui JavaScript, Ajax, dan sebagainya. Salah satu yang mungkin anda jumpai adalah CORS.<\/p>\n\n\n\n\n\n

Berikut adalah contoh salah satu error CORS yang sering muncul pada browser.<\/p>\n\n\n\n

\"error<\/a><\/figure>\n\n\n\n

Lalu, apa sebenarnya CORS dan bagaimana cara mengaktifkannya? Pada panduan ini, kami akan membahas secara lengkap tentang apa itu CORS, penyebab hingga cara mengaktifkannya pada website. Berikut informasi selengkapnya.<\/p>\n\n\n\n

Apa itu CORS? <\/h2>\n\n\n\n

CORS adalah singkatan dari Cross Origin Resource Sharing, yaitu kebijakan keamanan yang diterapkan oleh browser web untuk melindungi pengguna dari serangan lintas domain (cross-domain attacks). CORS origin berfungsi untuk mengatur bagaimana sebuah sumber daya web di server (misalnya, file JavaScript, font, atau gambar) dapat diakses oleh halaman web di domain lain.<\/p>\n\n\n\n

Secara default, browser akan memblokir pertukaran data demi keamanan untuk menghindari serangan XSS<\/a> (Cross Site Scripting) oleh pihak yang tidak bertanggung jawab. <\/p>\n\n\n\n

Sebagai contoh domain-a.com akan melakukan fetching API data menggunakan Javascript seperti POST atau GET ke domain-b.com. Apabila di domain-b.com menerapkan kebijakan CORS maka akan menampilkan pesan error. <\/p>\n\n\n\n

Apabila nama domainnya sama dan tidak menerapkan kebijakan CORS, maka tidak akan menampilkan pesan error tersebut.<\/p>\n\n\n

\n
\"CORS<\/a><\/figure>\n<\/div>\n\n\n

Manfaat CORS<\/h2>\n\n\n\n

Secara default dari sisi client side saat ini diblokir untuk mengakses sebagian besar data pada website dengan pembatasan di semua web browser utama. <\/p>\n\n\n\n

Dengan adanya fitur CORS origin pada browser ke web service, data tersebut tidak akan terbuka oleh semua client sehingga dapat mengamankan data yang di fetch dari domain tidak dikenal dan akan menampilkan pesan error \u201chas been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ ader is present on the requested resource.<\/em><\/strong>\u201d dan data tersebut tidak dapat di akses.<\/p>\n\n\n\n

\"blocked<\/a><\/figure>\n\n\n\n

Apabila domain tersebut telah diaktifkan fitur CORS, maka data tersebut akan dapat diakses dan tidak menampilkan pesan error.<\/p>\n\n\n\n

\"contoh<\/a><\/figure>\n\n\n\n

Dampak kesalahan konfigurasi CORS<\/h2>\n\n\n\n

Kesalahan konfigurasi dapat menyebabkan kerentanan kerentanan dalam aplikasi web. Berikut beberapa dampak utama apabila tidak diaktifkan : <\/p>\n\n\n\n

    \n
  • Pencurian Data<\/strong> – Hacker dapat mencuri data sensitif seperti api key, ssh key, hingga akses login pengguna.<\/li>\n<\/ul>\n\n\n\n
      \n
    • Cross-Site Scripting (XSS)<\/strong> – Hacker dapat melakukan serangan XSS dengan me inject kan script berbahaya untuk mencuri data sesi atau melakukan tindakan tidak sah atas nama pengguna.<\/li>\n<\/ul>\n\n\n\n
        \n
      • Remote Code Execution <\/strong>– Hacker dapat melakukan serangan exploitasi rest api.<\/li>\n<\/ul>\n\n\n\n

        Cara mengaktifkan CORS<\/h2>\n\n\n\n

        Setelah memahami mengenai CORS, untuk memperbaikinya secara umum dapat menggunakan extensi \/ plugin dari browser seperti chrome misalnya, dapat menggunakan extensi disable CORS Origin. <\/p>\n\n\n\n

        Namun cara ini tidak tepat karena beberapa pengguna perlu menginstalkan extensi tersebut karena secara default browser saat ini telah memblokir CORS Origin. <\/p>\n\n\n\n

        Dengan demikian, alternatifnya dapat meng allow CORS dari sisi server sehingga dari sisi server perlu menambahkan header khusus dari setiap request yang diberikan yaitu dengan menambahkan kode berikut:<\/p>\n\n\n\n

        Untuk semua domain<\/h3>\n\n\n\n

        Jika Anda ingin mengaktifkan CORS Origin untuk semua domain yang ada di hosting, maka silahkan tambahkan baris berikut di file .htaccess:<\/p>\n\n\n\n

        <IfModule mod_headers.c>\n\u00a0\u00a0Header add Access-Control-Allow-Origin: \"*\"\n<\/IfModule>\n<\/code><\/pre>\n\n\n\n
        Script diatas juga bisa Anda terapkan, untuk website berbasis WordPress.<\/p>\n\n\n\n
        Untuk domain tertentu<\/h3>\n\n\n\n
        Namun jika Anda hanya ingin mengaktifkan CORS Origin pada domain tertentu, anda bisa menambahkan script berikut di htaccess.<\/p>\n\n\n\n
        <IfModule mod_headers.c>\n  Header add Access-Control-Allow-Origin : \"https:\/\/namadomain.com\"\n<\/IfModule><\/code><\/pre>\n\n\n\n
        Untuk metode Get atau Post <\/h3>\n\n\n\n
        Apabila hanya metode tertentu saja, dapat di tambahkan kode berikut :<\/p>\n\n\n\n
        <IfModule mod_headers.c>\n\u00a0\u00a0Header add Access-Control-Allow-Origin: \"*\"\n\u00a0\u00a0Header add Access-Control-Allow-Methods: \"PUT, GET, POST, DELETE, OPTIONS\"\n<\/IfModule><\/code><\/pre>\n\n\n\n
        Apabila menggunakan file php dan tidak menggunakan file .htaccess, dapat di tambahkan kode berikut pada file php <\/p>\n\n\n\n
        <?php \n\nheader(\"Access-Control-Allow-Origin: *\");\nheader(\"Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS\");\n\u2026\n\n?><\/code><\/pre>\n\n\n\n
        Access-Control-Allow-Origin<\/strong>: header tersebut untuk menentukan domain mana saja yang dapat diizinkan untuk melakukan pertukaran data, dan dapat diisi dengan simbol wildcard (*) yang artinya semua domain dapat mengakses pertukaran data tersebut. Apabila hanya domain tertentu saja dapat diisi dengan nama domain atau juga dapat dipisah dengan koma.<\/p>\n\n\n\n
        Access-Control-Allow-Methods<\/strong>: header tersebut untuk menentukan metode HTTP Request yang diizinkan apakah menggunakan metode Get atau Post.<\/p>\n\n\n\n
        Kesimpulan<\/h2>\n\n\n\n
        Dengan adanya fitur CORS, agar tidak dapat melakukan pertukaran data antar domain lain yang tidak diizinkan. CORS adalah salah satu cara untuk meningkatkan keamanan pada website, namun bukan berarti data pada aplikasi web tersebut benar benar aman. Apabila salah konfigurasi dapat menyebabkan kerentanan pada sistem aplikasi web itu sendiri. <\/p>\n\n\n\n
        Demikian artikel kami tentang apa CORS dari Rumahweb, semoga bermanfaat.<\/p>\n","protected":false},"excerpt":{"rendered":"
        Sebagai pengembang sistem aplikasi web, tentunya Anda pernah menghadapi kendala saat melakukan pertukaran data melalui HTTP Request yang umumnya terjadi ketika menggunakan Rest API melalui JavaScript, Ajax, dan sebagainya. Salah satu yang mungkin anda jumpai adalah CORS. Berikut adalah contoh salah satu error CORS yang sering muncul pada browser. Lalu, apa sebenarnya CORS dan bagaimana […]<\/p>\n","protected":false},"author":353,"featured_media":38949,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[1982,1981,538],"class_list":{"0":"post-38932","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-web-programming","8":"tag-cors","9":"tag-cors-origin","10":"tag-security"},"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/38932","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/users\/353"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/comments?post=38932"}],"version-history":[{"count":0,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/posts\/38932\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media\/38949"}],"wp:attachment":[{"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/media?parent=38932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/categories?post=38932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rumahweb.com\/journal\/wp-json\/wp\/v2\/tags?post=38932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}