Fahami Perkongsian Sumber Merentas Asal (CORS)

Cross-Origin Resource Sharing (CORS) telah diperkenalkan oleh World Wide Web Consortium (W3C) pada tahun 2006 untuk menyediakan pelayan web dengan cara untuk menentukan mana-mana asal-usul lain (domain, skema atau port) yang dibenarkan untuk mengakses sumber pelayan di luar dasar asal yang sama. Ini merupakan evolusi penting dalam keselamatan web, membolehkan aplikasi web yang lebih interaktif dan bersepadu sambil mengekalkan protokol keselamatan yang ketat.

Memahami mekanik CORS (Cross-Origin Resource Sharing) adalah penting untuk pembangunan web moden. Bahagian ini menyelidiki cara CORS meningkatkan keselamatan web, membezakan antara permintaan mudah dan pra-penerbangan, dan menerangkan kepentingan pengepala CORS.

CORS (Perkongsian Sumber Silang Asal) ialah mekanisme yang menggunakan pengepala HTTP untuk memberitahu penyemak imbas membenarkan aplikasi web yang berjalan di satu asal (domain) mempunyai kebenaran untuk mengakses sumber terpilih daripada pelayan di asal yang berbeza. Ini adalah perkembangan penting dalam keselamatan web, kerana ia membolehkan komunikasi yang lebih terbuka antara perkhidmatan web yang berbeza sambil tetap melindungi daripada serangan berniat jahat.

Bagaimana CORS Meningkatkan Keselamatan Web: Satu Wawasan Teknikal

CORS ialah ciri keselamatan yang membolehkan aplikasi web membuat permintaan kepada pelayan yang dihoskan pada asal yang berbeza daripada tapak web.

Sebelum CORS, dasar asal yang sama mengehadkan aplikasi web untuk membuat permintaan hanya kepada domain yang sama dengan tapak tersebut. Walaupun dasar ini merupakan langkah keselamatan yang kritikal, menghalang tapak berniat jahat daripada mengakses data sensitif, ia juga mengehadkan interaksi silang asal yang sah yang diperlukan untuk aplikasi web moden.

CORS membenarkan pelayan memasukkan pengepala khusus yang memberitahu penyemak imbas asal-usul yang dibenarkan untuk mengakses sumber. Berikut ialah contoh asas cara CORS meningkatkan keselamatan:

Aplikasi web di https://example.com percubaan untuk membuat permintaan kepada https://api.example.org/data.
Penyemak imbas secara automatik menghantar permintaan CORS ke https://api.example.org/data.
Pelayan di https://api.example.org menyemak dasar CORSnya untuk menentukan sama ada https://example.com dibenarkan.
Jika https://example.com dibenarkan, pelayan bertindak balas dengan pengepala CORS yang sesuai, seperti Access-Control-Allow-Origin: https://example.com, menunjukkan bahawa penyemak imbas harus membenarkan aplikasi web mengakses sumber.

Tanpa CORS, dasar asal yang sama akan menyekat permintaan, tetapi dengan CORS, pelayan boleh membenarkan permintaan silang asal daripada asal yang dipercayai dengan selamat.

Permintaan Mudah lwn. Prapenerbangan: Memahami Perbezaan

Permintaan CORS dikategorikan kepada dua jenis: permintaan mudah dan permintaan pra-penerbangan. Perbezaan antara mereka adalah berdasarkan kaedah yang digunakan dan pengepala yang dihantar dengan permintaan.

Permintaan Mudah: Ini adalah permintaan yang memenuhi kriteria tertentu yang ditakrifkan oleh CORS. Permintaan mudah boleh menggunakan kaedah GET, POST atau HEAD. Selain itu, ia mesti hanya menggunakan pengepala yang dianggap selamat dan tidak ditentukan pengguna, seperti Accept, Accept-Language, Content-Language, dan Content-Type dengan nilai application/x-www-form-urlencoded, multipart/form-data, atau text/plain. Berikut ialah contoh permintaan mudah:

fetch('https://api.example.org/data', {
  method: 'GET',
  headers: {
    'Accept': 'application/json',
  }
});

Permintaan Prapenerbangan: Permintaan ini tidak memenuhi kriteria untuk permintaan mudah dan memerlukan permintaan "preflight" awal dengan kaedah OPTIONS sebelum permintaan sebenar dihantar. Prapenerbangan ini menyemak sama ada permintaan sebenar selamat untuk dihantar, berdasarkan dasar CORS sumber sasaran. Permintaan prapenerbangan digunakan apabila kaedah selain GET, POST atau HEAD, atau apabila pengepala tersuai digunakan. Berikut ialah contoh:

fetch('https://api.example.org/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  },
  body: JSON.stringify({key: 'value'})
});

Dalam kes ini, penyemak imbas mula-mula menghantar permintaan OPTIONS kepada https://api.example.org/data untuk menentukan sama ada permintaan POST dengan a Content-Type daripada application/json dan pengepala tersuai X-Custom-Header dibenarkan.

Tajuk CORS Dijelaskan: Apa Itu dan Bagaimana Ia Berfungsi

CORS bergantung pada pengepala HTTP tertentu untuk berkomunikasi antara pelayan dan penyemak imbas. Pengepala ini menentukan sama ada penyemak imbas harus menyekat atau membenarkan permintaan diteruskan. Berikut ialah tajuk utama CORS:

Access-Control-Allow-Origin: Pengepala ini menentukan asal mana yang dibenarkan untuk mengakses sumber. Ia boleh ditetapkan kepada asal tertentu, seperti https://example.com, atau * untuk membenarkan semua asal (walaupun menggunakan * dengan kelayakan tidak dibenarkan).
Access-Control-Allow-Methods: Pengepala ini digunakan sebagai tindak balas kepada permintaan pra-penerbangan untuk menunjukkan kaedah HTTP yang dibenarkan semasa mengakses sumber.
Access-Control-Allow-Headers: Sebagai tindak balas kepada permintaan prapenerbangan, pengepala ini menentukan pengepala yang boleh digunakan dalam permintaan sebenar.
Access-Control-Expose-Headers: Pengepala ini membenarkan pelayan menyenarai putihkan pengepala yang dibenarkan untuk diakses oleh pelayar.
Access-Control-Allow-Credentials: Pengepala ini menunjukkan sama ada respons kepada permintaan boleh didedahkan atau tidak apabila bendera bukti kelayakan adalah benar. Ia mesti ditetapkan kepada true jika kuki atau butiran pengesahan terlibat dalam permintaan.
Access-Control-Max-Age: Pengepala ini menunjukkan berapa lama hasil permintaan prapenerbangan boleh dicache.

Memahami dan melaksanakan pengepala CORS dengan betul adalah penting untuk mengamankan aplikasi web sambil membenarkan permintaan silang asal yang diperlukan. Dengan menetapkan pengepala ini, pembangun boleh memperhalusi permintaan silang asal yang dibenarkan, memastikan hanya sumber yang dipercayai boleh mengakses sumber web mereka.

Melaksanakan CORS

Melaksanakan Perkongsian Sumber Silang Asal (CORS) adalah penting untuk aplikasi web moden yang berinteraksi dengan sumber merentas asal yang berbeza. Bahagian ini meneroka cara untuk mendayakan CORS dalam aplikasi anda, nyahpepijat ralat CORS biasa dan menggariskan amalan terbaik untuk pembangun web.

Mendayakan CORS dalam Aplikasi Anda: Panduan Langkah demi Langkah

Mendayakan CORS melibatkan konfigurasi pelayan anda untuk menghantar pengepala CORS yang sesuai sebagai tindak balas kepada permintaan. Prosesnya berbeza-beza bergantung pada teknologi pelayan (cth, Apache, Nginx, Node.js) yang anda gunakan. Berikut ialah cara untuk mendayakan CORS merentas persekitaran pelayan yang berbeza:

Apache: Untuk pelayan Apache, anda boleh mendayakan CORS dengan menambahkan arahan berikut pada anda .htaccess fail atau fail konfigurasi pelayan:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header set Access-Control-Allow-Headers "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
</IfModule>

Konfigurasi ini membenarkan semua asal (*) untuk membuat permintaan menggunakan kaedah dan pengepala tertentu. Laraskan Access-Control-Allow-Origin nilai untuk menyekat akses kepada asal yang dipercayai.

Nginx: Dalam Nginx, CORS boleh didayakan dengan menambahkan perkara berikut pada blok pelayan anda:

location / {
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
        add_header 'Content-Length' '0';
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, DELETE, PUT';
    add_header 'Access-Control-Allow-Headers' 'Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With';
}

Node.js (Express): Untuk aplikasi Node.js menggunakan Express, CORS boleh didayakan dengan mudah menggunakan cors perisian tengah:

const express = require('express');
const cors = require('cors');

const app = express();

app.use(cors({
    origin: '*', // Adjust this to your specific origin
    methods: ['GET', 'POST', 'OPTIONS', 'DELETE', 'PUT'],
    allowedHeaders: ['Content-Type', 'Access-Control-Allow-Headers', 'Authorization', 'X-Requested-With'],
}));

app.get('/data', (req, res) => {
    res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
    console.log('Server running on port 3000');
});

Menyahpepijat Ralat CORS Biasa: Petua dan Trik

Ralat CORS biasanya berlaku apabila penyemak imbas menyekat permintaan disebabkan oleh dasar CORS pelayan. Ralat biasa termasuk mesej tentang hilang Access-Control-Allow-Origin tajuk atau kaedah tidak dibenarkan. Untuk nyahpepijat ralat ini:

Gunakan DevTools Penyemak Imbas: Pelayar moden menyediakan mesej ralat terperinci dalam konsol. Mesej ini selalunya menunjukkan perkara yang hilang atau salah konfigurasi.
Semak Konfigurasi Pelayan: Pastikan pelayan anda dikonfigurasikan dengan betul untuk menghantar pengepala CORS yang diperlukan. Pengepala yang hilang atau nilai yang salah adalah isu biasa.
Uji dengan Alat: Alat seperti Posman atau cURL boleh mensimulasikan permintaan daripada asal yang berbeza dan membantu mengenal pasti sama ada pelayan bertindak balas dengan pengepala CORS yang betul.
Semak Polisi CORS: Pastikan polisi CORS anda pada pelayan sepadan dengan keperluan aplikasi web anda. Contohnya, jika aplikasi anda perlu menghantar bukti kelayakan (kuki, pengesahan HTTP), pastikan Access-Control-Allow-Credentials ditetapkan kepada true dan Access-Control-Allow-Origin tidak ditetapkan kepada *.

Amalan Terbaik Konfigurasi CORS untuk Pembangun Web

Melaksanakan CORS dengan selamat dan cekap memerlukan pematuhan kepada amalan terbaik:

Nyatakan Asal Tepat: Daripada menggunakan * untuk Access-Control-Allow-Origin, nyatakan asal yang tepat yang sepatutnya dibenarkan untuk mengakses sumber anda. Ini mengehadkan pendedahan kepada permintaan silang asal yang tidak diingini.
Gunakan Bukti Kelayakan Berhati-hati: Jika permohonan anda menggunakan bukti kelayakan, pastikan Access-Control-Allow-Credentials ditetapkan kepada true, dan nyatakan asal tepat dan bukannya *. Ingat bahawa bukti kelayakan termasuk kuki, pengesahan HTTP dan sijil SSL pihak pelanggan.
Hadkan Pengepala Terdedah: Hanya dedahkan pengepala yang diperlukan melalui Access-Control-Expose-Headers. Mendedahkan terlalu banyak tajuk boleh membocorkan maklumat sensitif secara tidak sengaja.
Sahkan Tempoh Cache Prapenerbangan: Gunakan Access-Control-Max-Age untuk cache respons prapenerbangan, mengurangkan bilangan permintaan prapenerbangan. Walau bagaimanapun, pastikan tempohnya sepadan dengan kekerapan dasar CORS anda mungkin berubah.
Laksanakan Dasar CORS Dinamik: Untuk aplikasi yang lebih kompleks, pertimbangkan untuk melaksanakan dasar CORS dinamik yang melaraskan Access-Control-Allow-Origin berdasarkan asal permintaan. Ini boleh dilakukan secara pemrograman pada pelayan.
Semak Polisi CORS secara kerap: Semasa aplikasi web anda berkembang, semak dan kemas kini dasar CORS anda secara kerap untuk memastikan ia masih memenuhi keperluan keselamatan dan fungsi anda.

Dengan mengikuti garis panduan ini dan memahami cara mengkonfigurasi dan menyahpepijat CORS, pembangun boleh memastikan aplikasi web mereka berkomunikasi dengan selamat dan berkesan merentas asal.

CORS dalam Tindakan

Melaksanakan Perkongsian Sumber Silang Asal (CORS) bukan sekadar mendayakan ciri; ia mengenai memahami cara ia berfungsi dalam konteks aplikasi web moden. Bahagian ini meneroka contoh dunia sebenar CORS, mengurus dasar CORS dan alat serta teknik untuk pelaksanaan yang berkesan.

Contoh CORS Dunia Sebenar: Dari Teori kepada Amalan

CORS ialah bahagian asas pembangunan web yang membolehkan sumber diminta dengan selamat merentasi asal yang berbeza. Berikut ialah beberapa senario dunia sebenar di mana CORS memainkan peranan penting:

Penggunaan API dalam Aplikasi Satu Halaman (SPA): SPA sering menggunakan API yang dihoskan pada domain yang berbeza. Sebagai contoh, aplikasi React disampaikan daripada https://myapp.com mungkin perlu mengambil data pengguna daripada https://api.userdata.com. Tanpa CORS, permintaan silang asal ini akan disekat oleh penyemak imbas. Dengan menetapkan pengepala CORS yang sesuai (Access-Control-Allow-Origin: https://myapp.com) pada pelayan API, SPA boleh meminta data yang diperlukan dengan selamat.

// Example fetch request in an SPA
fetch("https://api.userdata.com/user", {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
  },
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching user data:', error));

Rangkaian Penghantaran Kandungan (CDN): CDN menyediakan aset statik (imej, skrip, helaian gaya) dari pelbagai lokasi di seluruh dunia. Apabila aplikasi web anda dihoskan di https://example.com meminta imej daripada https://cdn.example.com, CORS memastikan bahawa permintaan silang asal untuk aset statik ini dikendalikan dengan selamat.
Widget dan Integrasi pihak ketiga: Tapak web selalunya menyepadukan widget pihak ketiga (cth, chatbots, suapan media sosial) yang memerlukan akses sumber daripada pelayan luaran. CORS membolehkan widget ini berfungsi dengan lancar merentas asal yang berbeza, meningkatkan pengalaman pengguna tanpa menjejaskan keselamatan.

Mengurus Polisi CORS: Alat dan Teknik untuk Pelaksanaan Berkesan

Mengurus dasar CORS dengan berkesan memerlukan pemahaman alat dan teknik yang anda gunakan:

Konfigurasi Pelayan: Langkah pertama dalam mengurus dasar CORS ialah mengkonfigurasi pelayan web anda. Ini melibatkan menetapkan pengepala CORS yang diperlukan berdasarkan keperluan aplikasi anda. Kebanyakan pelayan web (Apache, Nginx, IIS) membenarkan anda menentukan pengepala ini dalam fail konfigurasi mereka atau melalui .htaccess (untuk Apache).
Middleware untuk Rangka Kerja Web: Jika anda menggunakan rangka kerja web (Express.js untuk Node.js, Django untuk Python), banyak yang menawarkan pakej perisian tengah yang memudahkan pengurusan dasar CORS. Sebagai contoh, yang cors pakej untuk Express membolehkan anda menentukan dasar CORS secara langsung dalam kod aplikasi anda.

// Example using the cors middleware in an Express.js application
const cors = require('cors');
const express = require('express');
const app = express();

// Define CORS options
const corsOptions = {
  origin: 'https://example.com',
  optionsSuccessStatus: 200,
};

app.use(cors(corsOptions));

app.get('/data', (req, res) => {
  res.json({ message: 'CORS-enabled route' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

Pengendalian CORS Dinamik: Untuk aplikasi yang perlu membenarkan permintaan daripada berbilang asal yang dipercayai, pengendalian CORS dinamik boleh dilaksanakan. Ini melibatkan penetapan secara pemrograman Access-Control-Allow-Origin pengepala berdasarkan asal permintaan masuk.

// Example of dynamic CORS handling
app.use((req, res, next) => {
  const allowedOrigins = ['https://example.com', 'https://api.example.com'];
  const origin = req.headers.origin;
  if (allowedOrigins.includes(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
  }
  next();
});

Alat untuk Menguji dan Menyahpepijat Polisi CORS

Alat Pembangun Penyemak Imbas: Tab rangkaian dalam alat pembangun penyemak imbas sangat berharga untuk memeriksa ralat CORS dan memahami cara pengepala CORS dihantar dan diterima dalam masa nyata.
Alatan Dalam Talian: Alat seperti Penguji CORS dan Posmen membolehkan anda menguji dasar CORS dengan menghantar permintaan ke pelayan anda dari asal yang berbeza dan memeriksa respons.
Alatan baris perintah: curl ialah alat yang berkuasa untuk menguji dasar CORS daripada baris arahan. Ia boleh digunakan untuk mensimulasikan permintaan daripada asal yang berbeza dan memeriksa pengepala CORS dalam respons pelayan.

# Example curl command to test CORS
curl -H "Origin: https://example.com" \
     -I https://api.example.com/data

Dengan memahami aplikasi dan strategi pengurusan dunia sebenar ini, pembangun boleh memastikan aplikasi web mereka berinteraksi dengan selamat dengan sumber merentas asal, memanfaatkan CORS ke potensi penuhnya.

Sama ada ia mendayakan permintaan API rentas asal dalam SPA, menyediakan aset melalui CDN atau menyepadukan widget pihak ketiga, CORS ialah bahagian penting dalam ekosistem web moden yang, apabila diurus dengan betul, menyediakan kedua-dua keselamatan dan kefungsian.

Implikasi Keselamatan CORS

Pelaksanaan Cross-Origin Resource Sharing (CORS) membawa implikasi keselamatan yang ketara untuk aplikasi web. Walaupun CORS membolehkan aplikasi web meminta sumber daripada asal yang berbeza, ia juga memperkenalkan potensi kelemahan jika tidak dikonfigurasikan dengan betul.

Bahagian ini menyelidiki aspek keselamatan CORS, menonjolkan pengurangan serangan Skrip Silang Tapak (XSS) dan kepentingan dasar CORS yang ketat.

CORS dan Keselamatan Web: Mengurangkan Serangan Skrip Merentas Tapak (XSS).

Serangan skrip merentas tapak (XSS) membenarkan penyerang menyuntik skrip berniat jahat ke dalam kandungan daripada tapak web yang tidak berbahaya dan dipercayai.

Serangan ini berlaku apabila aplikasi memasukkan data yang tidak dipercayai dalam halaman web tanpa pengesahan yang betul atau melarikan diri, membolehkan penyerang melaksanakan skrip dalam konteks penyemak imbas mangsa. CORS adalah penting dalam mengurangkan serangan XSS dengan mengawal asal mana yang dibenarkan untuk berinteraksi dengan aplikasi web anda.

Pertimbangkan senario di mana aplikasi membenarkan kandungan yang dijana pengguna yang boleh termasuk skrip berniat jahat.

Tanpa pembersihan kandungan yang betul dan dasar CORS yang ketat, aplikasi ini boleh menjadi vektor untuk serangan XSS. CORS tidak secara langsung menghalang XSS tetapi menyumbang kepada strategi keselamatan yang lebih luas dengan memastikan bahawa hanya asal yang ditentukan boleh membuat permintaan kepada aplikasi anda, mengurangkan permukaan serangan.

Sebagai contoh, katakan permohonan anda https://safe-app.com menggunakan API yang dihoskan di https://api.safe-app.com. Dengan menetapkan Access-Control-Allow-Origin tajuk ke https://safe-app.com, anda memastikan bahawa hanya permintaan yang berasal daripada aplikasi anda boleh mengakses API. Sekatan ini membantu mengurangkan kemungkinan serangan XSS dengan mengehadkan interaksi dengan API anda kepada asal yang dipercayai.

Access-Control-Allow-Origin: https://safe-app.com

Walau bagaimanapun, adalah penting untuk menggabungkan dasar CORS dengan amalan keselamatan lain, seperti mengesahkan dan membersihkan input pengguna, untuk mengurangkan XSS dan jenis serangan lain dengan berkesan.

Kepentingan Dasar CORS yang Tegas: Melindungi Aplikasi Web Anda

Melaksanakan dasar CORS yang ketat adalah penting untuk melindungi aplikasi web anda daripada pelbagai ancaman keselamatan. Dasar CORS yang longgar, seperti penetapan Access-Control-Allow-Origin kepada *, boleh mendedahkan aplikasi anda kepada kecurian data, serangan CSRF dan kelemahan lain dengan membenarkan mana-mana asal membuat permintaan kepada pelayan anda.

Dasar CORS yang ketat menentukan asal usul, kaedah dan pengepala yang dibenarkan. Kekhususan ini memastikan bahawa hanya aplikasi web yang dipercayai boleh berinteraksi dengan sumber anda, menyediakan lapisan keselamatan yang membantu melindungi data sensitif dan integriti aplikasi.

Sebagai contoh, pertimbangkan aplikasi yang membenarkan akses daripada domain tertentu dan menggunakan bukti kelayakan (kuki, pengesahan HTTP):

Access-Control-Allow-Origin: https://trusted-domain.com
Access-Control-Allow-Credentials: true

Konfigurasi ini membenarkan https://trusted-domain.com untuk membuat permintaan dengan bukti kelayakan kepada permohonan anda, manakala permintaan daripada asal lain ditolak. Sekatan ini penting untuk aplikasi yang mengendalikan maklumat sensitif atau melakukan tindakan bagi pihak pengguna.

Selain itu, menyatakan kaedah dan tajuk yang dibenarkan mengetatkan lagi keselamatan:

Access-Control-Allow-Methods: GET, POST
Access-Control-Allow-Headers: Content-Type, X-Custom-Header

Persediaan ini memastikan bahawa hanya permintaan GET dan POST dengan pengepala yang ditentukan diterima, mengurangkan risiko permintaan yang tidak dibenarkan atau berniat jahat.

Amalan Terbaik untuk Pelaksanaan CORS Selamat

Nyatakan Asal Dibenarkan: Sentiasa tentukan asal usul tertentu dan bukannya menggunakan kad bebas *. Amalan ini memastikan bahawa hanya domain yang dipercayai boleh membuat permintaan kepada aplikasi anda.
Hadkan Akses dengan Bukti Kelayakan: Berhati-hati apabila membenarkan kelayakan. Memastikan bahawa Access-Control-Allow-Credentials ditetapkan kepada true hanya apabila perlu dan asal usul itu ditakrifkan secara eksplisit.
Tentukan Kaedah dan Pengepala yang Dibenarkan: Tentukan kaedah dan tajuk yang dibenarkan. Sekatan ini bukan sahaja mengetatkan keselamatan tetapi juga menyediakan dokumentasi yang jelas untuk pembangun yang berinteraksi dengan API anda.
Gunakan Permintaan Prapenerbangan: Manfaatkan permintaan prapenerbangan untuk mengesahkan permintaan silang asal sebelum menerimanya. Permintaan prapenerbangan menambah lapisan pengesahan tambahan, memastikan permintaan sebenar mematuhi dasar CORS anda.
Semak Polisi CORS secara kerap: Semasa aplikasi anda berkembang, semak dan kemas kini dasar CORS anda secara kerap untuk mencerminkan perubahan dalam seni bina aplikasi dan interaksi domain anda.
Gabungkan CORS dengan Langkah Keselamatan Lain: CORS harus menjadi sebahagian daripada strategi keselamatan yang komprehensif. Gabungkan dasar CORS dengan dasar keselamatan kandungan (CSP), pengesahan input, pengekodan output dan amalan terbaik keselamatan lain untuk melindungi daripada XSS dan kelemahan web yang lain.

Dengan memahami implikasi keselamatan CORS dan melaksanakan dasar CORS yang ketat, pembangun boleh melindungi aplikasi web mereka daripada serangan silang asal sambil mendayakan interaksi silang asal yang diperlukan yang diperlukan oleh aplikasi web moden.

Topik CORS Lanjutan

Apabila aplikasi web berkembang dalam kerumitan, memahami nuansa Perkongsian Sumber Silang Asal (CORS) menjadi semakin penting. Bahagian ini meneroka topik CORS lanjutan, termasuk keselamatan CORS dan API, melangkaui konfigurasi asas dan menyelesaikan masalah biasa.

CORS dan Keselamatan API: Memastikan Permintaan Silang Asal Selamat

API ialah tulang belakang aplikasi web moden, memudahkan pertukaran data dan fungsi merentas perkhidmatan yang berbeza. CORS memainkan peranan penting dalam keselamatan API dengan memastikan hanya asal yang dibenarkan boleh mengakses API anda. Begini cara CORS meningkatkan keselamatan API:

Pengesahan Berasaskan Token: Banyak API menggunakan pengesahan berasaskan token (cth, OAuth 2.0, JWT) untuk menjamin akses. Dasar CORS perlu dikonfigurasikan dengan teliti untuk membenarkan pengepala token, seperti Authorization, daripada asal yang dipercayai. Sebagai contoh, untuk membenarkan Authorization pengepala dalam permintaan silang asal, pelayan anda mesti menyenaraikannya secara eksplisit Access-Control-Allow-Headers.

Access-Control-Allow-Headers: Authorization

Penggunaan API Pihak Ketiga: Apabila aplikasi web anda menggunakan API pihak ketiga, memahami dasar CORS API ini adalah penting. Jika API pihak ketiga mempunyai dasar CORS yang mengehadkan, anda mungkin perlu menggunakan proksi sisi pelayan pada domain anda untuk menyampaikan permintaan kepada API, dengan itu memintas sekatan CORS.
Mendedahkan Pengepala Tersuai: Jika API anda menggunakan pengepala tersuai untuk maklumat khusus aplikasi, pengepala ini mesti didedahkan secara eksplisit kepada pelanggan melalui Access-Control-Expose-Headers. Ini membolehkan aplikasi pihak klien membaca nilai pengepala ini.

Access-Control-Expose-Headers: X-My-Custom-Header

Melebihi CORS Asas: Konfigurasi Lanjutan dan Penyelesaian Masalah

Konfigurasi CORS lanjutan boleh menangani senario yang lebih kompleks:

Pengesahan Asal Dinamik: Untuk aplikasi yang perlu membenarkan permintaan daripada set asal dinamik (cth, aplikasi berbilang penyewa di mana setiap penyewa mempunyai domain sendiri), melaksanakan pengesahan asal dinamik adalah perlu. Ini melibatkan pemeriksaan secara pemrograman Origin pengepala terhadap senarai asal yang dibenarkan dan menetapkan Access-Control-Allow-Origin pengepala sewajarnya.

const allowedOrigins = ['https://tenant1.example.com', 'https://tenant2.example.com'];
const origin = request.headers.origin;
if (allowedOrigins.includes(origin)) {
    response.setHeader('Access-Control-Allow-Origin', origin);
}

CORS untuk WebSockets: Walaupun WebSockets tidak tertakluk kepada CORS dengan cara yang sama seperti permintaan HTTP, memastikan sambungan WebSocket adalah penting. Memastikan permintaan jabat tangan WebSocket awal (yang merupakan permintaan HTTP) termasuk pengesahan CORS yang betul adalah amalan yang baik.
Pengoptimuman Cache Prapenerbangan: The Access-Control-Max-Age pengepala boleh digunakan untuk menentukan berapa lama hasil permintaan prapenerbangan boleh dicache. Mengoptimumkan nilai ini berdasarkan kekerapan perubahan dasar CORS anda boleh mengurangkan bilangan permintaan prapenerbangan, meningkatkan prestasi aplikasi.

Access-Control-Max-Age: 86400

Menyelesaikan Masalah Isu CORS Biasa

Walaupun dengan persediaan CORS yang betul, isu boleh timbul. Berikut ialah strategi untuk menyelesaikan masalah CORS biasa:

Tajuk CORS Hilang atau Salah: Pastikan pelayan anda dikonfigurasikan dengan betul untuk menghantar pengepala CORS yang dijangkakan. Alat seperti curl boleh digunakan untuk memeriksa pengepala secara manual:

curl -I -H "Origin: https://example.com" https://api.example.com/resource

Respons Legap dalam API Ambil JavaScript: Apabila membuat permintaan dengan API Ambil, respons legap (tindak balas daripada permintaan tanpa cors) boleh membawa kepada isu kerana ia mengehadkan jenis maklumat yang boleh anda akses tentang respons. Pastikan anda tidak menetapkan mode: 'no-cors' dalam permintaan API Ambil anda melainkan perlu.
Ralat CORS dengan Tauliah: Jika permintaan anda termasuk bukti kelayakan (kuki, pengesahan HTTP), pastikan Access-Control-Allow-Credentials ditetapkan kepada true, dan itu Access-Control-Allow-Origin bukan kad bebas (*).
Menyahpepijat Permintaan Prapenerbangan: Jika permintaan prapenerbangan gagal, pastikan pelayan anda mengendalikan OPTIONS permintaan dengan betul dan ia bertindak balas dengan pengepala CORS yang sesuai (Access-Control-Allow-Methods, Access-Control-Allow-Headers).

Dengan menyelami topik CORS lanjutan ini, pembangun boleh lebih memahami cara untuk menjamin dan mengoptimumkan aplikasi web mereka untuk perkongsian sumber merentas asal. Sama ada berurusan dengan keselamatan API, konfigurasi CORS yang kompleks atau menyelesaikan masalah CORS yang mencabar, pemahaman yang mendalam tentang CORS adalah penting untuk pembangunan web moden.

Kesimpulan

Memahami CORS adalah penting untuk interaksi web yang selamat; melaksanakannya dengan betul menguatkan aplikasi daripada pelanggaran, dasar ketatnya melindungi daripada serangan XSS, dan meneroka topik lanjutan mengoptimumkan pembangunan web.

Apakah Perkongsian Sumber Silang Asal?