CORSni tushunish: Cross-Origin Resource Sharing bo'yicha to'liq qo'llanma

Bugungi o'zaro bog'langan internetda ilovalar tez-tez turli manbalardagi resurslarga kirishga muhtoj bo'ladi. Aynan shu yerda Cross-Origin Resource Sharing (CORS) ishga tushadi. CORS veb-brauzerlarning bir manbadan (domen, protokol va port) boshqa manbaga yuborilgan so'rovlarni qanday boshqarishini tartibga soluvchi muhim xavfsizlik mexanizmidir. CORSni tushunish har bir veb-dasturchi uchun xavfsiz va funksional veb-ilovalarni yaratishda muhim ahamiyatga ega.

Bir xil manba siyosati (Same-Origin Policy) nima?

CORSga sho'ng'ishdan oldin, Bir xil manba siyosatini (Same-Origin Policy - SOP) tushunish muhimdir. SOP veb-brauzerlarda amalga oshirilgan fundamental xavfsizlik mexanizmidir. Uning maqsadi bir veb-saytdagi zararli skriptlarning boshqa veb-saytdagi maxfiy ma'lumotlarga kirishini oldini olishdir. Manba protokol (masalan, HTTP yoki HTTPS), domen (masalan, example.com) va port raqami (masalan, 80 yoki 443) birikmasi bilan aniqlanadi. Ikki URL bir xil protokol, domen va portga ega bo'lsa, bir xil manbaga ega deb hisoblanadi.

Misol:

• http://example.com/app1 va http://example.com/app2 - Bir xil manba (bir xil protokol, domen va port)
• https://example.com/app1 va http://example.com/app1 - Boshqa manba (boshqa protokol)
• http://example.com:8080/app1 va http://example.com/app1 - Boshqa manba (boshqa port)
• http://sub.example.com/app1 va http://example.com/app1 - Boshqa manba (boshqa subdomen – boshqa domen deb hisoblanadi)

SOP skriptlarning boshqa manbadan resurslarga kirishini cheklaydi, agar CORS kabi maxsus chora-tadbirlar bunga ruxsat berish uchun mavjud bo'lmasa.

Nima uchun CORS kerak?

Bir xil manba siyosati xavfsizlik uchun juda muhim bo'lsa-da, u cheklovchi bo'lishi ham mumkin. Ko'pgina zamonaviy veb-ilovalar APIlar yoki kontent yetkazib berish tarmoqlari (CDN) kabi turli serverlardan ma'lumotlarni olishga tayanadi. CORS SOPni yumshatish va xavfsizlikni saqlagan holda qonuniy domenlararo so'rovlarga ruxsat berishning nazorat qilinadigan usulini taqdim etadi.

http://example.com da joylashtirilgan veb-ilova http://api.example.net da joylashtirilgan API serveridan ma'lumotlarni olishi kerak bo'lgan stsenariyni ko'rib chiqing. CORSsiz brauzer SOP tufayli bu so'rovni bloklaydi. CORS API serveriga o'z resurslariga qaysi manbalarga kirishga ruxsat berilganligini aniq ko'rsatishga imkon beradi, bu esa veb-ilovaning to'g'ri ishlashini ta'minlaydi.

CORS qanday ishlaydi: Asoslar

CORS mijoz (brauzer) va server o'rtasida almashinadigan bir qator HTTP sarlavhalari orqali ishlaydi. Server ushbu sarlavhalardan brauzerga so'ralgan resursga kirishga ruxsat berilganmi yoki yo'qligini bildirish uchun foydalanadi. Asosiy HTTP sarlavhasi Access-Control-Allow-Origin hisoblanadi.

1-stsenariy: Oddiy so'rov

"Oddiy so'rov" bu ma'lum mezonlarga javob beradigan GET, HEAD yoki POST so'rovidir (masalan, Content-Type sarlavhasi application/x-www-form-urlencoded, multipart/form-data yoki text/plainlardan biri). Bunday holda, brauzer so'rovni to'g'ridan-to'g'ri serverga yuboradi va server Access-Control-Allow-Origin sarlavhasi bilan javob beradi.

Mijoz so'rovi (http://example.com dan):

            GET /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
            

              
                Copy
              
            
          

Server javobi (http://api.example.net dan):

            HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "data": "Serverdan olingan ma'lumotlar"
}
            

              
                Copy
              
            
          

Ushbu misolda server Access-Control-Allow-Origin: http://example.com bilan javob beradi, bu http://example.com dan kelgan so'rovlarga ruxsat berilganligini ko'rsatadi. Agar so'rovdagi manba Access-Control-Allow-Origin sarlavhasidagi qiymatga mos kelmasa (yoki sarlavha mavjud bo'lmasa), brauzer javobni bloklaydi va mijoz tomonidagi skriptning ma'lumotlarga kirishiga yo'l qo'ymaydi.

2-stsenariy: Preflight so'rovi (murakkab so'rovlar uchun)

PUT, DELETE kabi HTTP usullarini ishlatadigan yoki maxsus sarlavhalarga ega bo'lgan murakkabroq so'rovlar uchun brauzer HTTP OPTIONS usuli yordamida "preflight" so'rovini amalga oshiradi. Ushbu preflight so'rovi haqiqiy so'rovni yuborishdan oldin serverdan ruxsat so'raydi. Server qaysi usullar, sarlavhalar va manbalarga ruxsat berilganligini ko'rsatuvchi sarlavhalar bilan javob beradi.

Mijozning Preflight so'rovi (http://example.com dan):

            OPTIONS /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
            

              
                Copy
              
            
          

Server javobi (http://api.example.net dan):

            HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Access-Control-Allow-Methods: GET, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header, Content-Type
Access-Control-Max-Age: 3600
            

              
                Copy
              
            
          

Sarlavhalar tushuntirishi:

• Access-Control-Allow-Origin: http://example.com - http://example.com dan kelgan so'rovlarga ruxsat berilganligini bildiradi.
• Access-Control-Allow-Methods: GET, PUT, DELETE - Domenlararo so'rovlar uchun ruxsat etilgan HTTP usullarini ko'rsatadi.
• Access-Control-Allow-Headers: X-Custom-Header, Content-Type - Haqiqiy so'rovda ruxsat etilgan maxsus sarlavhalarni ro'yxatga oladi.
• Access-Control-Max-Age: 3600 - Preflight javobini brauzer tomonidan qancha vaqt (soniyalarda) keshlash mumkinligini belgilaydi. Bu preflight so'rovlari sonini kamaytirishga yordam beradi.

Agar serverning preflight javobi so'rovga ruxsat berilganligini ko'rsatsa, brauzer haqiqiy so'rovni davom ettiradi. Aks holda, brauzer so'rovni bloklaydi.

Mijozning haqiqiy so'rovi (http://example.com dan):

            PUT /data HTTP/1.1
Host: api.example.net
Origin: http://example.com
X-Custom-Header: some-value
Content-Type: application/json

{
  "data": "Yangilanishi kerak bo'lgan ma'lumotlar"
}
            

              
                Copy
              
            
          

Server javobi (http://api.example.net dan):

            HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://example.com
Content-Type: application/json

{
  "status": "Ma'lumotlar muvaffaqiyatli yangilandi"
}
            

              
                Copy
              
            
          

Umumiy CORS sarlavhalari

Mana siz tushunishingiz kerak bo'lgan asosiy CORS sarlavhalarining tahlili:

• Access-Control-Allow-Origin: Bu eng fundamental sarlavha. U resursga kirishga ruxsat berilgan manba(lar)ni belgilaydi. Mumkin bo'lgan qiymatlar:
  • Aniq bir manba (masalan, http://example.com).
  • * (wildcard): Bu har qanday manbadan kelgan so'rovlarga ruxsat beradi. Ehtiyotkorlik bilan foydalaning, chunki agar maxfiy ma'lumotlar ishtirok etsa, bu xavfsizlikka putur yetkazishi mumkin. Odatda ishlab chiqarish muhitlarida undan qochish kerak.
• Access-Control-Allow-Methods: Bu sarlavha domenlararo so'rovlar uchun ruxsat etilgan HTTP usullarini (masalan, GET, POST, PUT, DELETE) belgilaydi. U preflight javobida ishlatiladi.
• Access-Control-Allow-Headers: Bu sarlavha domenlararo so'rovlarda ruxsat etilgan maxsus sarlavhalarni ro'yxatga oladi. U ham preflight javobida ishlatiladi.
• Access-Control-Allow-Credentials: Bu sarlavha serverning hisob ma'lumotlarini (masalan, cookie-fayllar, avtorizatsiya sarlavhalari) domenlararo so'rovlarga kiritishga ruxsat berishini bildiradi. Agar hisob ma'lumotlarini yuborish kerak bo'lsa, uni true ga o'rnatish kerak. Mijoz tomonida ham XMLHttpRequest obyektida withCredentials = true ni o'rnatish kerak.
• Access-Control-Expose-Headers: Odatiy bo'lib, brauzerlar mijoz tomonidagi skriptlarga faqat cheklangan javob sarlavhalarini (masalan, Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma) ochib beradi. Agar boshqa sarlavhalarni ochib bermoqchi bo'lsangiz, ularni Access-Control-Expose-Headers sarlavhasida ro'yxatga olishingiz kerak.
• Access-Control-Max-Age: Bu sarlavha brauzerning preflight so'rovini qancha vaqt (soniyalarda) keshlashi mumkinligini belgilaydi. Uzoqroq qiymat preflight so'rovlari sonini kamaytiradi va samaradorlikni oshiradi.

Turli server tillarida CORS

CORSni amalga oshirish odatda server tomonidagi ilovangizni tegishli CORS sarlavhalarini yuborish uchun sozlashni o'z ichiga oladi. Mana buni turli tillar va freymvorklarda qanday qilish mumkinligi haqida misollar:

Node.js va Express

Siz cors middleware paketidan foydalanishingiz mumkin:

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

const app = express();

// Barcha manbalar uchun CORSni yoqish (ISHLAB CHIQARISHDA EHTIYOTKORLIK BILAN FOYDALANING)
app.use(cors());

// Yoki, ma'lum manbalar uchun CORSni sozlash
// app.use(cors({
//   origin: 'http://example.com'
// }));

app.get('/data', (req, res) => {
  res.json({ message: 'Bu barcha manbalar uchun CORS yoqilgan!' });
});

app.listen(3000, () => {
  console.log('Server 3000-portda ishlamoqda');
});
            

              
                Copy
              
            
          

Python va Flask

Siz Flask-CORS kengaytmasidan foydalanishingiz mumkin:

            from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

# Yoki, ma'lum manbalar uchun CORSni sozlash
# CORS(app, resources={r"/api/*": {"origins": "http://example.com"}})

@app.route("/data")
def hello():
    return {"message": "Bu barcha manbalar uchun CORS yoqilgan!"}

if __name__ == '__main__':
    app.run(debug=True)
            

              
                Copy
              
            
          

Java va Spring Boot

Siz Spring Boot ilovangizda CORSni annotatsiyalar yoki konfiguratsiya klasslari yordamida sozlashingiz mumkin:

Annotatsiyalardan foydalanish:

            import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "http://example.com") // http://example.com dan kelgan so'rovlarga ruxsat berish
public class DataController {

    @GetMapping("/data")
    public String getData() {
        return "Bu http://example.com uchun CORS yoqilgan!";
    }
}
            

              
                Copy
              
            
          

Konfiguratsiyadan foydalanish:

            import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/data")
                .allowedOrigins("http://example.com") // http://example.com dan kelgan so'rovlarga ruxsat berish
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("*");
    }
}
            

              
                Copy
              
            
          

PHP

             "Bu http://example.com uchun CORS yoqilgan!");
echo json_encode($data);
?>
            

              
                Copy
              
            
          

CORS va Xavfsizlik masalalari

CORS domenlararo so'rovlarga imkon bersa-da, uni xavfsiz tarzda amalga oshirish juda muhim. Mana bir nechta muhim masalalar:

• Ishlab chiqarishda Access-Control-Allow-Origin uchun * dan foydalanishdan saqlaning: Bu har qanday manbadan kelgan so'rovlarga ruxsat beradi, bu esa xavfsizlik uchun xavf tug'dirishi mumkin. Buning o'rniga, resurslaringizga kirishga ruxsat berilgan manbalarni aniq belgilang.
• Server tomonida Origin sarlavhasini tekshiring: CORS konfiguratsiyasini boshqaradigan freymvorkdan foydalansangiz ham, so'rov kutilgan manbadan kelayotganligiga ishonch hosil qilish uchun server tomonida Origin sarlavhasini tekshirish yaxshi amaliyotdir.
• Access-Control-Allow-Credentials ga e'tiborli bo'ling: Agar siz hisob ma'lumotlaridan (masalan, cookie-fayllar, avtorizatsiya sarlavhalari) foydalanayotgan bo'lsangiz, server tomonida Access-Control-Allow-Credentials: true va mijoz tomonida withCredentials = true ni o'rnatganingizga ishonch hosil qiling. Biroq, Access-Control-Allow-Credentials true ga o'rnatilganda Access-Control-Allow-Origin: * dan foydalanishga ruxsat berilmasligini yodda tuting. Siz ruxsat etilgan manbalarni aniq ko'rsatishingiz kerak.
• Access-Control-Allow-Methods va Access-Control-Allow-Headers ni to'g'ri sozlang: Ilovangizning to'g'ri ishlashi uchun zarur bo'lgan HTTP usullari va sarlavhalariga ruxsat bering. Bu hujum yuzasini kamaytirishga yordam beradi.
• HTTPS dan foydalaning: Tranzitdagi ma'lumotlarni himoya qilish uchun har doim veb-ilovalaringiz va APIlaringiz uchun HTTPS dan foydalaning.

CORS muammolarini bartaraf etish

CORS muammolarini tuzatish asabiylashtirishi mumkin. Mana bir nechta keng tarqalgan muammolar va ularni qanday hal qilish mumkinligi:

• "So'ralgan resursda 'Access-Control-Allow-Origin' sarlavhasi mavjud emas": Bu eng keng tarqalgan CORS xatosi. Bu server o'z javobida Access-Control-Allow-Origin sarlavhasini yubormayotganini anglatadi. Sarlavhaning to'g'ri yuborilayotganligiga ishonch hosil qilish uchun server tomonidagi konfiguratsiyangizni ikki marta tekshiring.
• "Preflight so'roviga javob kirish nazorati tekshiruvidan o'tmadi: Unda HTTP ok statusi yo'q": Bu xato preflight so'rovi muvaffaqiyatsiz bo'lganligini bildiradi. Bu server OPTIONS so'rovlarini qayta ishlash uchun sozlanmagan bo'lsa yoki Access-Control-Allow-Methods yoki Access-Control-Allow-Headers sarlavhalari to'g'ri sozlanmagan bo'lsa yuz berishi mumkin.
• "Javobdagi 'Access-Control-Allow-Origin' sarlavhasining qiymati so'rovdagi manbaga teng emas": Bu xato so'rovdagi manba Access-Control-Allow-Origin sarlavhasidagi qiymatga mos kelmasligini anglatadi. Server javobida to'g'ri manbani yuborayotganligiga ishonch hosil qiling.
• Brauzer keshlashi: Ba'zan brauzerlar CORS javoblarini keshlashi mumkin, bu esa kutilmagan xatti-harakatlarga olib kelishi mumkin. Muammoni hal qilish uchun brauzer keshingizni tozalashga yoki boshqa brauzerdan foydalanishga harakat qiling. Siz shuningdek brauzerning preflight javobini qancha vaqt keshlashini nazorat qilish uchun Access-Control-Max-Age sarlavhasidan foydalanishingiz mumkin.

Nosozliklarni tuzatish vositalari:

• Brauzer Dasturchi Vositalari: Tarmoq so'rovlari va javoblarini tekshirish uchun brauzerning dasturchi vositalaridan (odatda F12 tugmasini bosish orqali kiriladi) foydalaning. CORS bilan bog'liq sarlavhalar va xato xabarlarini qidiring.
• Onlayn CORS Tekshiruvchilari: CORS konfiguratsiyangizni sinab ko'rishga yordam beradigan onlayn vositalar mavjud. Ushbu vositalar serveringizga so'rov yuboradi va potentsial muammolarni aniqlash uchun javob sarlavhalarini tahlil qiladi.

Ilg'or CORS stsenariylari

Asosiy CORS tushunchalari nisbatan sodda bo'lsa-da, ko'rib chiqilishi kerak bo'lgan ba'zi ilg'or stsenariylar mavjud:

• Subdomenlar bilan CORS: Agar siz bir nechta subdomenlardan (masalan, app1.example.com, app2.example.com) so'rovlarga ruxsat berishingiz kerak bo'lsa, Access-Control-Allow-Origin sarlavhasida *.example.com kabi wildcarddan foydalana olmaysiz. Buning o'rniga, so'rovdagi Origin sarlavhasiga asoslanib Access-Control-Allow-Origin sarlavhasini dinamik ravishda yaratishingiz kerak bo'ladi. Xavfsizlik zaifliklarini oldini olish uchun manbani ruxsat etilgan subdomenlarning oq ro'yxatiga nisbatan tekshirishni unutmang.
• Bir nechta manbalar bilan CORS: Agar siz bir nechta aniq manbalardan so'rovlarga ruxsat berishingiz kerak bo'lsa, Access-Control-Allow-Origin sarlavhasida bir nechta manbani ko'rsata olmaysiz (masalan, Access-Control-Allow-Origin: http://example.com, http://another.com yaroqsiz). Buning o'rniga, so'rovdagi Origin sarlavhasiga asoslanib Access-Control-Allow-Origin sarlavhasini dinamik ravishda yaratishingiz kerak bo'ladi.
• CORS va CDNlar: API-ingizni yetkazib berish uchun CDN dan foydalanganda, CDN ni Origin sarlavhasini asl serveringizga yo'naltirish va Access-Control-Allow-Origin sarlavhasini to'g'ri keshlash uchun sozlashingiz kerak. Maxsus ko'rsatmalar uchun CDN provayderingizning hujjatlariga murojaat qiling.

CORS bo'yicha eng yaxshi amaliyotlar

Xavfsiz va samarali CORS amalga oshirishni ta'minlash uchun ushbu eng yaxshi amaliyotlarga amal qiling:

• Eng kam imtiyoz printsipi: Faqat ilovangizning to'g'ri ishlashi uchun zarur bo'lgan minimal manbalar, usullar va sarlavhalar to'plamiga ruxsat bering.
• CORS Konfiguratsiyasini muntazam ko'rib chiqish: Ilovangiz rivojlanib borar ekan, CORS konfiguratsiyangizni muntazam ravishda ko'rib chiqib, uning hali ham mos va xavfsiz ekanligiga ishonch hosil qiling.
• Freymvork yoki kutubxonadan foydalaning: O'rnatilgan CORS qo'llab-quvvatlashini ta'minlaydigan mavjud freymvorklar yoki kutubxonalardan foydalaning. Bu amalga oshirishni soddalashtirishi va xatolar xavfini kamaytirishi mumkin.
• CORS buzilishlarini kuzatib boring: Potentsial CORS buzilishlarini aniqlash va ularga javob berish uchun monitoringni amalga oshiring.
• Yangilanib turing: Eng so'nggi CORS spetsifikatsiyalari va xavfsizlik tavsiyalaridan xabardor bo'lib turing.

Xulosa

CORS veb-ilovalarda nazorat ostidagi domenlararo so'rovlarni amalga oshiruvchi muhim xavfsizlik mexanizmidir. CORS qanday ishlashini va uni qanday to'g'ri sozlashni tushunish har bir veb-dasturchi uchun zarurdir. Ushbu keng qamrovli qo'llanmada keltirilgan ko'rsatmalar va eng yaxshi amaliyotlarga rioya qilish orqali siz turli manbalardagi resurslar bilan uzluksiz ishlaydigan xavfsiz va funksional veb-ilovalarni yaratishingiz mumkin.

Har doim xavfsizlikka ustuvor ahamiyat berishni va haddan tashqari ruxsat beruvchi CORS konfiguratsiyalaridan foydalanishdan saqlanishni unutmang. CORS sozlamalaringizning xavfsizlik oqibatlarini diqqat bilan ko'rib chiqish orqali siz o'z ilovalaringiz va ma'lumotlaringizni ruxsatsiz kirishdan himoya qilishingiz mumkin.

Umid qilamizki, ushbu qo'llanma sizga CORSni tushunishga yordam berdi. Dasturlashda omad!