Turli Manbalardan Foydalanish Xavfsizligini Joriy Qilish: JavaScript Orqali Aloqa Qilishning Eng Yaxshi Amaliyotlari

Bugungi oʻzaro bogʻlangan veb-dunyoda JavaScript ilovalari tez-tez turli manbalardan (domenlar, protokollar yoki portlar) olingan resurslar bilan ishlashiga toʻgʻri keladi. Bu oʻzaro taʼsir brauzerning Bir Xil Manba Siyosati (Same-Origin Policy) bilan tartibga solinadi, bu zararli skriptlarning domen chegaralaridan tashqaridagi maxfiy maʼlumotlarga kirishini oldini olish uchun moʻljallangan muhim xavfsizlik mexanizmidir. Biroq, qonuniy turli manbalararo aloqa koʻpincha zarur. Aynan shu yerda Turli Manbalardan Resurslarni Almashish (CORS) yordamga keladi. Ushbu maqolada CORS, uni joriy qilish va JavaScript-da xavfsiz turli manbalararo aloqa uchun eng yaxshi amaliyotlar haqida toʻliq maʼlumot beriladi.

Bir Xil Manba Siyosatini Tushunish

Bir Xil Manba Siyosati (SOP) veb-brauzerlardagi fundamental xavfsizlik konsepsiyasidir. U bir manbada ishlayotgan skriptlarning boshqa manbadan resurslarga kirishini cheklaydi. Manba protokol (masalan, HTTP yoki HTTPS), domen nomi (masalan, example.com) va port raqami (masalan, 80 yoki 443) birikmasi bilan aniqlanadi. Ikki URL faqatgina barcha uch komponent toʻliq mos kelgandagina bir xil manbaga ega boʻladi.

Masalan:

• http://www.example.com va http://www.example.com/path: Bir xil manba
• http://www.example.com va https://www.example.com: Turli manba (turli protokol)
• http://www.example.com va http://subdomain.example.com: Turli manba (turli domen)
• http://www.example.com:80 va http://www.example.com:8080: Turli manba (turli port)

SOP veb-saytga kiritilgan zararli skriptlar foydalanuvchi maʼlumotlarini oʻgʻirlashi yoki foydalanuvchi nomidan ruxsatsiz harakatlarni amalga oshirishi mumkin boʻlgan Saytlararo Skripting (XSS) hujumlariga qarshi muhim himoya vositasidir.

Turli Manbalardan Resurslarni Almashish (CORS) Nima?

CORS - bu serverlarga qaysi manbalarga (domenlar, sxemalar yoki portlar) oʻz resurslariga kirishga ruxsat berilganligini koʻrsatish uchun HTTP sarlavhalaridan foydalanadigan mexanizmdir. U asosan maʼlum bir turli manbalararo soʻrovlar uchun Bir Xil Manba Siyosatini yumshatadi, bu esa zararli hujumlardan himoyalangan holda qonuniy aloqani taʼminlaydi.

CORS ruxsat etilgan manbalarni va turli manbalararo soʻrovlar uchun ruxsat etilgan usullarni (masalan, GET, POST, PUT, DELETE) belgilaydigan yangi HTTP sarlavhalarini qoʻshish orqali ishlaydi. Brauzer turli manbalararo soʻrov yuborganida, u soʻrov bilan birga Origin sarlavhasini yuboradi. Server ruxsat etilgan manba(lar)ni belgilaydigan Access-Control-Allow-Origin sarlavhasi bilan javob beradi. Agar soʻrov manbasi Access-Control-Allow-Origin sarlavhasidagi qiymatga mos kelsa (yoki qiymat * boʻlsa), brauzer JavaScript kodiga javobga kirishga ruxsat beradi.

CORS Qanday Ishlaydi: Batafsil Tushuntirish

CORS jarayoni odatda ikki turdagi soʻrovlarni oʻz ichiga oladi:

1. Oddiy Soʻrovlar: Bular maʼlum mezonlarga javob beradigan soʻrovlardir. Agar soʻrov ushbu shartlarga javob bersa, brauzer toʻgʻridan-toʻgʻri soʻrovni yuboradi.
2. Dastlabki Soʻrovlar: Bular murakkabroq soʻrovlar boʻlib, brauzerdan haqiqiy soʻrovni yuborish xavfsiz yoki yoʻqligini aniqlash uchun avval serverga "dastlabki" OPTIONS soʻrovini yuborishni talab qiladi.

1. Oddiy Soʻrovlar

Agar soʻrov quyidagi barcha shartlarga javob bersa, u "oddiy" hisoblanadi:

• Usul GET, HEAD, yoki POST.
• Agar usul POST boʻlsa, Content-Type sarlavhasi quyidagilardan biri boʻlishi kerak:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• Maxsus sarlavhalar oʻrnatilmagan.

Oddiy soʻrov namunasi:

GET /resource HTTP/1.1
Origin: http://www.example.com

Manbaga ruxsat beruvchi server javobi namunasi:

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

{
  "data": "Some data"
}

Agar Access-Control-Allow-Origin sarlavhasi mavjud boʻlsa va uning qiymati soʻrov manbasiga mos kelsa yoki * ga oʻrnatilgan boʻlsa, brauzer skriptga javob maʼlumotlariga kirishga ruxsat beradi. Aks holda, brauzer javobga kirishni bloklaydi va konsolda xato xabari koʻrsatiladi.

2. Dastlabki Soʻrovlar

Agar soʻrov oddiy soʻrov mezonlariga javob bermasa, u "dastlabki" hisoblanadi. Bu odatda soʻrov boshqa HTTP usulidan (masalan, PUT, DELETE) foydalanganda, maxsus sarlavhalarni oʻrnatganda yoki ruxsat etilgan qiymatlardan boshqa Content-Type dan foydalanganda sodir boʻladi.

Haqiqiy soʻrovni yuborishdan oldin, brauzer avval serverga OPTIONS soʻrovini yuboradi. Ushbu "dastlabki" soʻrov quyidagi sarlavhalarni oʻz ichiga oladi:

• Origin: Soʻrov yuborayotgan sahifaning manbasi.
• Access-Control-Request-Method: Haqiqiy soʻrovda ishlatiladigan HTTP usuli (masalan, PUT, DELETE).
• Access-Control-Request-Headers: Haqiqiy soʻrovda yuboriladigan maxsus sarlavhalarning vergul bilan ajratilgan roʻyxati.

Dastlabki soʻrov namunasi:

OPTIONS /resource HTTP/1.1
Origin: http://www.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header, Content-Type

Server OPTIONS soʻroviga quyidagi sarlavhalar bilan javob berishi kerak:

• Access-Control-Allow-Origin: Soʻrovni yuborishga ruxsat berilgan manba (yoki har qanday manbaga ruxsat berish uchun *).
• Access-Control-Allow-Methods: Turli manbalararo soʻrovlar uchun ruxsat etilgan HTTP usullarining vergul bilan ajratilgan roʻyxati (masalan, GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Soʻrovda yuborishga ruxsat etilgan maxsus sarlavhalarning vergul bilan ajratilgan roʻyxati.
• Access-Control-Max-Age: Dastlabki soʻrov javobini brauzer tomonidan keshda saqlash mumkin boʻlgan soniyalar soni.

Dastlabki soʻrovga server javobi namunasi:

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

Agar serverning dastlabki soʻrovga javobi haqiqiy soʻrovga ruxsat berilganligini koʻrsatsa, brauzer haqiqiy soʻrovni yuboradi. Aks holda, brauzer soʻrovni bloklaydi va xato xabarini koʻrsatadi.

CORS-ni Server Tomonida Joriy Qilish

CORS asosan server tomonida javobda tegishli HTTP sarlavhalarini oʻrnatish orqali amalga oshiriladi. Aniq amalga oshirish tafsilotlari ishlatilayotgan server texnologiyasiga qarab farq qiladi.

Node.js va Express yordamida misol:

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

// Barcha manbalar uchun CORS-ni yoqish
app.use(cors());

// Shu bilan bir qatorda, muayyan manbalar uchun CORS-ni sozlash
// const corsOptions = {
//   origin: 'http://www.example.com'
// };
// app.use(cors(corsOptions));

app.get('/resource', (req, res) => {
  res.json({ message: 'Bu CORS yoqilgan resurs' });
});

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

cors middleware Express-da CORS sarlavhalarini oʻrnatish jarayonini soddalashtiradi. Siz barcha manbalar uchun cors() yordamida CORS-ni yoqishingiz yoki cors(corsOptions) yordamida maʼlum manbalar uchun sozlashingiz mumkin.

Python va Flask yordamida misol:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/resource")
def hello():
    return {"message": "Bu CORS yoqilgan resurs"}

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

flask_cors kengaytmasi Flask ilovalarida CORS-ni yoqishning oddiy usulini taqdim etadi. Barcha manbalar uchun CORS-ni yoqish uchun app-ni CORS()-ga uzatishingiz mumkin. Muayyan manbalar uchun sozlash ham mumkin.

Java va Spring Boot yordamida misol:

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("/resource")
                .allowedOrigins("http://www.example.com")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowedHeaders("Content-Type", "X-Custom-Header")
                .allowCredentials(true)
                .maxAge(3600);
    }
}

Spring Boot-da siz CORS-ni WebMvcConfigurer yordamida sozlashingiz mumkin. Bu ruxsat etilgan manbalar, usullar, sarlavhalar va boshqa CORS sozlamalari ustidan nozik nazoratni taʼminlaydi.

CORS sarlavhalarini toʻgʻridan-toʻgʻri oʻrnatish (Umumiy misol)

Agar siz hech qanday freymvorkdan foydalanmasangiz, sarlavhalarni toʻgʻridan-toʻgʻri server kodingizda oʻrnatishingiz mumkin (masalan, PHP, Ruby on Rails va hokazo):

CORS Eng Yaxshi Amaliyotlari

Xavfsiz va samarali turli manbalararo aloqani taʼminlash uchun quyidagi eng yaxshi amaliyotlarga rioya qiling:

1. Ishlab chiqarishda Access-Control-Allow-Origin: * dan foydalanishdan saqlaning: Barcha manbalarga oʻz resurslaringizga kirishga ruxsat berish xavfsizlik xavfini tugʻdirishi mumkin. Buning oʻrniga, ruxsat etilgan aniq manbalarni belgilang.
2. HTTPS dan foydalaning: Tranzitdagi maʼlumotlarni himoya qilish uchun ham soʻrovchi, ham xizmat koʻrsatuvchi manbalar uchun doimo HTTPS-dan foydalaning.
3. Kiritilgan maʼlumotlarni tekshiring: Inyeksiya hujumlarining oldini olish uchun turli manbalardan kelgan soʻrovlardagi maʼlumotlarni doimo tekshiring va tozalang.
4. Toʻgʻri autentifikatsiya va avtorizatsiyani joriy qiling: Maxfiy resurslarga faqat ruxsat etilgan foydalanuvchilar kira olishini taʼminlang.
5. Dastlabki soʻrov javoblarini keshlang: Dastlabki soʻrov javoblarini keshda saqlash va OPTIONS soʻrovlari sonini kamaytirish uchun Access-Control-Max-Age dan foydalaning.
6. Hisob maʼlumotlaridan foydalanishni koʻrib chiqing: Agar API-ingiz cookie-fayllar yoki HTTP autentifikatsiyasi bilan autentifikatsiyani talab qilsa, serverda Access-Control-Allow-Credentials sarlavhasini true ga va JavaScript kodingizda (masalan, fetch yoki XMLHttpRequest dan foydalanganda) credentials parametrini 'include' ga oʻrnatishingiz kerak. Bu parametrni ishlatishda juda ehtiyot boʻling, chunki toʻgʻri ishlov berilmasa, u xavfsizlik zaifliklarini keltirib chiqarishi mumkin. Shuningdek, Access-Control-Allow-Credentials true ga oʻrnatilganda, Access-Control-Allow-Origin * ga oʻrnatilishi mumkin emas. Siz ruxsat etilgan manba(lar)ni aniq belgilashingiz kerak.
7. CORS sozlamalarini muntazam ravishda koʻrib chiqing va yangilang: Ilovangiz rivojlanib borar ekan, uning xavfsizligini va ehtiyojlaringizga mos kelishini taʼminlash uchun CORS sozlamalaringizni muntazam ravishda koʻrib chiqing va yangilang.
8. Turli CORS sozlamalarining oqibatlarini tushuning: Turli CORS sozlamalarining xavfsizlik oqibatlaridan xabardor boʻling va ilovangiz uchun mos keladigan sozlamani tanlang.
9. CORS joriy etishingizni sinab koʻring: U kutilganidek ishlayotganiga va hech qanday xavfsizlik zaifliklarini keltirib chiqarmayotganiga ishonch hosil qilish uchun CORS joriy etishingizni sinchkovlik bilan tekshiring. Tarmoq soʻrovlari va javoblarini tekshirish uchun brauzer ishlab chiquvchi vositalaridan foydalaning va CORS xatti-harakatlarini tekshirish uchun avtomatlashtirilgan sinov vositalaridan foydalaning.

Misol: Fetch API-ni CORS bilan Ishlatish

Quyida turli manbalararo soʻrov yuborish uchun fetch API-dan qanday foydalanishga misol keltirilgan:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // Brauzerga bu CORS soʻrovi ekanligini bildiradi
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Tarmoq javobi muvaffaqiyatli emas edi');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('Fetch operatsiyasida muammo yuzaga keldi:', error);
});

mode: 'cors' opsiyasi brauzerga bu CORS soʻrovi ekanligini bildiradi. Agar server manbaga ruxsat bermasa, brauzer javobga kirishni bloklaydi va xato yuzaga keladi.

Agar siz hisob maʼlumotlaridan (masalan, cookie-fayllar) foydalanayotgan boʻlsangiz, credentials opsiyasini 'include' ga oʻrnatishingiz kerak:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include', // Soʻrovga cookie-fayllarni qoʻshish
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // ...
});

CORS va JSONP

JSON bilan Toʻldirish (JSONP) - bu Bir Xil Manba Siyosatini chetlab oʻtishning eski usuli. U boshqa domendan maʼlumotlarni yuklaydigan <script> tegini dinamik ravishda yaratish orqali ishlaydi. JSONP baʼzi holatlarda foydali boʻlishi mumkin boʻlsa-da, uning jiddiy xavfsizlik cheklovlari bor va iloji boricha undan foydalanishdan saqlanish kerak. CORS turli manbalararo aloqa uchun afzalroq yechimdir, chunki u xavfsizroq va moslashuvchan mexanizmni taqdim etadi.

CORS va JSONP oʻrtasidagi asosiy farqlar:

• Xavfsizlik: CORS JSONP-ga qaraganda xavfsizroq, chunki u serverga oʻz resurslariga qaysi manbalar kira olishini nazorat qilish imkonini beradi. JSONP hech qanday manba nazoratini taʼminlamaydi.
• HTTP Usullari: CORS barcha HTTP usullarini (masalan, GET, POST, PUT, DELETE) qoʻllab-quvvatlaydi, JSONP esa faqat GET soʻrovlarini qoʻllab-quvvatlaydi.
• Xatoliklarga ishlov berish: CORS JSONP-ga qaraganda yaxshiroq xatoliklarga ishlov berishni taʼminlaydi. CORS soʻrovi muvaffaqiyatsiz boʻlganda, brauzer batafsil xato xabarlarini beradi. JSONP xatolariga ishlov berish skriptning muvaffaqiyatli yuklanganligini aniqlash bilan cheklanadi.

CORS Muammolarini Bartaraf Etish

CORS muammolarini tuzatish asabiylashtirishi mumkin. Quyida baʼzi umumiy muammolarni bartaraf etish boʻyicha maslahatlar keltirilgan:

• Brauzer Konsolini Tekshiring: Brauzer konsoli odatda CORS muammolari haqida batafsil xato xabarlarini beradi.
• Tarmoq Soʻrovlarini Tekshiring: Ham soʻrov, ham javobning HTTP sarlavhalarini tekshirish uchun brauzerning ishlab chiquvchi vositalaridan foydalaning. Origin va Access-Control-Allow-Origin sarlavhalarining toʻgʻri oʻrnatilganligini tekshiring.
• Server Tomonidagi Sozlamalarni Tekshiring: Toʻgʻri manbalar, usullar va sarlavhalarga ruxsat berilganligiga ishonch hosil qilish uchun server tomonidagi CORS sozlamalaringizni ikki marta tekshiring.
• Brauzer Keshini Tozalang: Baʼzan keshda saqlangan dastlabki soʻrov javoblari CORS muammolarini keltirib chiqarishi mumkin. Brauzer keshingizni tozalashga yoki shaxsiy koʻrish oynasidan foydalanishga harakat qiling.
• CORS Proksidan foydalaning: Baʼzi hollarda, CORS cheklovlarini chetlab oʻtish uchun CORS proksidan foydalanishingiz kerak boʻlishi mumkin. Biroq, CORS proksidan foydalanish xavfsizlik xavflarini keltirib chiqarishi mumkinligini yodda tuting.
• Notoʻgʻri Sozlamalarni Tekshiring: Access-Control-Allow-Origin sarlavhasining yoʻqligi, notoʻgʻri Access-Control-Allow-Methods yoki Access-Control-Allow-Headers qiymatlari yoki soʻrovdagi notoʻgʻri Origin sarlavhasi kabi umumiy notoʻgʻri sozlamalarni qidiring.

Xulosa

Turli Manbalardan Resurslarni Almashish (CORS) JavaScript ilovalarida xavfsiz turli manbalararo aloqani taʼminlash uchun muhim mexanizmdir. Bir Xil Manba Siyosatini, CORS ish jarayonini va turli HTTP sarlavhalarini tushunish orqali dasturchilar oʻz ilovalarini xavfsizlik zaifliklaridan himoya qilish va shu bilan birga qonuniy turli manbalararo soʻrovlarga ruxsat berish uchun CORS-ni samarali joriy etishlari mumkin. CORS sozlamalari uchun eng yaxshi amaliyotlarga rioya qilish va joriy etishni muntazam ravishda koʻrib chiqish xavfsiz va ishonchli veb-ilovani taʼminlash uchun juda muhimdir.

Ushbu keng qamrovli qoʻllanma CORS-ni tushunish va joriy etish uchun mustahkam poydevor yaratadi. CORS-ni toʻgʻri va xavfsiz joriy etayotganingizga ishonch hosil qilish uchun oʻzingizning server texnologiyangiz uchun rasmiy hujjatlar va manbalarga murojaat qilishni unutmang.

Qoʻshimcha Manbalar

• MDN Veb Hujjatlari: Turli Manbalardan Resurslarni Almashish (CORS)
• W3C: Turli Manbalardan Resurslarni Almashish (CORS)
• PortSwigger Veb Xavfsizlik Akademiyasi: CORS