Frontend xavfsizligini kuchaytirish: Kontent Xavfsizlik Siyosati va CORS

Bugungi o'zaro bog'langan raqamli dunyoda frontend xavfsizligi eng muhim masaladir. Veb-ilovalarga tobora murakkab hujumlar uyushtirilmoqda, bu esa mustahkam xavfsizlik choralarini zarur qilib qo'yadi. Xavfsiz frontend arxitekturasining ikkita muhim tarkibiy qismi - bu Kontent Xavfsizlik Siyosati (CSP) va Manbalarni O'zaro Ulashish (CORS). Ushbu keng qamrovli qo'llanma ushbu texnologiyalarni chuqur tahlil qilib, veb-ilovalaringizni zamonaviy tahdidlardan himoya qilishga yordam beradigan amaliy misollar va foydali ma'lumotlarni taqdim etadi.

Kontent Xavfsizlik Siyosati (CSP) nima?

Kontent Xavfsizlik Siyosati (CSP) - bu Saytlararo Skripting (XSS) va ma'lumotlarni kiritish hujumlari kabi ba'zi hujum turlarini aniqlash va yumshatishga yordam beradigan qo'shimcha xavfsizlik qatlami. CSP veb-server tomonidan brauzerga Content-Security-Policy HTTP javob sarlavhasini yuborish orqali amalga oshiriladi. Ushbu sarlavha brauzerga resurslarni yuklashga ruxsat berilgan manbalarning "oq ro'yxatini" belgilaydi. Brauzer yuklashi mumkin bo'lgan kontent manbalarini cheklash orqali, CSP tajovuzkorlarning veb-saytingizga zararli kod kiritishini ancha qiyinlashtiradi.

CSP qanday ishlaydi

CSP brauzerga faqat tasdiqlangan manbalardan resurslarni (masalan, skriptlar, uslublar jadvallari, rasmlar, shriftlar) yuklashni buyurish orqali ishlaydi. Ushbu manbalar CSP sarlavhasida direktivalar yordamida ko'rsatiladi. Agar brauzer aniq ruxsat etilmagan manbadan resurs yuklashga harakat qilsa, u so'rovni bloklaydi va qoidabuzarlik haqida xabar beradi.

CSP Direktivalari: To'liq sharh

CSP direktivalari ma'lum manbalardan yuklanishi mumkin bo'lgan resurs turlarini nazorat qiladi. Mana eng muhim direktivalardan ba'zilarining tahlili:

• default-src: Barcha kontent turlari uchun standart manbani belgilaydi. Bu boshqa, aniqroq direktivalar mavjud bo'lmaganda qo'llaniladigan zaxira direktivasidir.
• script-src: Skriptlar yuklanishi mumkin bo'lgan manbalarni belgilaydi. Bu XSS hujumlarining oldini olish uchun juda muhim.
• style-src: Uslublar jadvallari yuklanishi mumkin bo'lgan manbalarni belgilaydi.
• img-src: Rasmlar yuklanishi mumkin bo'lgan manbalarni belgilaydi.
• font-src: Shriftlar yuklanishi mumkin bo'lgan manbalarni belgilaydi.
• media-src: Audio va video yuklanishi mumkin bo'lgan manbalarni belgilaydi.
• object-src: Plaginlar (masalan, Flash) yuklanishi mumkin bo'lgan manbalarni belgilaydi. Bu ko'pincha o'ziga xos xavfsizlik xatarlari tufayli plaginlarni butunlay o'chirish uchun 'none' ga o'rnatiladi.
• frame-src: Freymlar (masalan, <iframe>) yuklanishi mumkin bo'lgan manbalarni belgilaydi.
• connect-src: Foydalanuvchi agenti XMLHttpRequest, WebSocket va EventSource kabi skript interfeyslari yordamida ulanishi mumkin bo'lgan URL manzillarini belgilaydi.
• base-uri: Hujjatning <base> elementida ishlatilishi mumkin bo'lgan URL manzillarini belgilaydi.
• form-action: Formalar yuborilishi mumkin bo'lgan URL manzillarini belgilaydi.
• upgrade-insecure-requests: Foydalanuvchi agentiga xavfsiz bo'lmagan so'rovlarni (HTTP) avtomatik ravishda xavfsiz so'rovlarga (HTTPS) o'tkazishni buyuradi.
• report-uri: Brauzer CSP qoidabuzarliklari haqidagi hisobotlarni yuborishi kerak bo'lgan URL manzilini belgilaydi. Ushbu direktiva `report-to` foydasiga eskirgan.
• report-to: Brauzer CSP qoidabuzarliklari haqidagi hisobotlarni yuborishi kerak bo'lgan `Report-To` sarlavhasida belgilangan hisobot guruhining nomini ko'rsatadi.

CSP Manbalar Ro'yxati Kalit So'zlari

CSP direktivalari ichida siz ruxsat etilgan manbalarni belgilash uchun manbalar ro'yxati kalit so'zlaridan foydalanishingiz mumkin. Mana ba'zi keng tarqalgan kalit so'zlar:

• 'self': Hujjat bilan bir xil manbadan (sxema va xost) resurslarga ruxsat beradi.
• 'none': Barcha manbalardan resurslarga ruxsat bermaydi.
• 'unsafe-inline': Ichki skriptlar va uslublardan foydalanishga ruxsat beradi (masalan, <script> teglari va uslub atributlari). Juda ehtiyotkorlik bilan foydalaning, chunki bu CSP'ning XSS'ga qarshi himoyasini sezilarli darajada zaiflashtiradi.
• 'unsafe-eval': eval() va Function() kabi dinamik kodni baholash funksiyalaridan foydalanishga ruxsat beradi. Juda ehtiyotkorlik bilan foydalaning, chunki bu jiddiy xavfsizlik xatarlarini keltirib chiqaradi.
• 'unsafe-hashes': Belgilangan heshga mos keladigan maxsus ichki hodisa ishlovchilari yoki <style> teglariga ruxsat beradi. Brauzer tomonidan qo'llab-quvvatlanishini talab qiladi. Ehtiyotkorlik bilan foydalaning.
• 'strict-dynamic': Belgilashda nons yoki hesh bilan birga berilgan skriptga aniq ishonch, ushbu ildiz skripti tomonidan yuklangan barcha skriptlarga tarqalishini belgilaydi.
• data: data: URI'lariga ruxsat beradi (masalan, base64 sifatida kodlangan ichki rasmlar). Ehtiyotkorlik bilan foydalaning.
• https:: Har qanday domendan HTTPS orqali resurslarni yuklashga ruxsat beradi.
• [hostname]: Ma'lum bir domendan resurslarga ruxsat beradi (masalan, example.com). Siz port raqamini ham ko'rsatishingiz mumkin (masalan, example.com:8080).
• [scheme]://[hostname]:[port]: To'liq malakali URI, belgilangan sxema, xost va portdan resurslarga ruxsat beradi.

Amaliy CSP Misollari

Keling, CSP sarlavhalarining ba'zi amaliy misollarini ko'rib chiqaylik:

1-misol: 'self' bilan asosiy CSP

Ushbu siyosat faqat bir xil manbadan kelgan resurslarga ruxsat beradi:

            Content-Security-Policy: default-src 'self'
            

              
                Copy
              
            
          

2-misol: Muayyan domendan skriptlarga ruxsat berish

Ushbu siyosat o'zingizning domeningizdan va ishonchli CDN'dan skriptlarga ruxsat beradi:

            Content-Security-Policy: default-src 'self'; script-src 'self' https://cdn.example.com
            

              
                Copy
              
            
          

3-misol: Ichki skriptlar va uslublarni o'chirib qo'yish

Ushbu siyosat ichki skriptlar va uslublarga ruxsat bermaydi, bu XSS'ga qarshi kuchli himoya hisoblanadi:

            Content-Security-Policy: default-src 'self'; script-src 'self'; style-src 'self'
            

              
                Copy
              
            
          

Muhim: Ichki skriptlarni o'chirib qo'yish, ichki skriptlarni tashqi fayllarga o'tkazish uchun HTML'ni qayta ishlashni talab qiladi.

4-misol: Ichki skriptlar uchun nonslardan foydalanish

Agar siz ichki skriptlardan foydalanishingiz kerak bo'lsa, ma'lum ichki skript bloklarini oq ro'yxatga kiritish uchun nonslardan (kriptografik tasodifiy, bir martalik tokenlar) foydalaning. Bu 'unsafe-inline' dan ko'ra xavfsizroq. Server har bir so'rov uchun noyob nons yaratishi va uni ham CSP sarlavhasiga, ham <script> tegiga kiritishi kerak.

            Content-Security-Policy: default-src 'self'; script-src 'nonce-r4nd0mN0nc3'; style-src 'self'
            

              
                Copy
              
            
          

            <script nonce="r4nd0mN0nc3"> console.log('Inline script'); </script>
            

              
                Copy
              
            
          

Eslatma: Har bir so'rov uchun yangi nons yaratishni unutmang. Nonslarni qayta ishlatmang!

5-misol: Ichki uslublar uchun heshlardan foydalanish

Nonslarga o'xshab, heshlar ham ma'lum ichki <style> bloklarini oq ro'yxatga kiritish uchun ishlatilishi mumkin. Bu uslub kontentining SHA256, SHA384 yoki SHA512 heshini yaratish orqali amalga oshiriladi.

            Content-Security-Policy: default-src 'self'; style-src 'sha256-HASHEDSTYLES'
            

              
                Copy
              
            
          

            <style sha256="HASHEDSTYLES"> body { background-color: #f0f0f0; } </style>
            

              
                Copy
              
            
          

Eslatma: Heshlar nonslarga qaraganda kamroq moslashuvchan, chunki uslub kontentidagi har qanday o'zgarish heshni yaroqsiz qiladi.

6-misol: CSP qoidabuzarliklari haqida xabar berish

CSP qoidabuzarliklarini kuzatish uchun report-uri yoki report-to direktivasidan foydalaning:

            Content-Security-Policy: default-src 'self'; report-to csp-endpoint;
            

              
                Copy
              
            
          

Siz shuningdek Report-To sarlavhasini sozlashingiz kerak bo'ladi. Report-To sarlavhasi bir yoki bir nechta hisobot guruhlarini belgilaydi, ular hisobotlar qaerga va qanday yuborilishini ko'rsatadi.

            Report-To: {"group":"csp-endpoint","max_age":10886400,"endpoints":[{"url":"https://example.com/csp-report"}]}
            

              
                Copy
              
            
          

CSP'ni sinovdan o'tkazish va joriy etish

CSP'ni amalga oshirish puxta rejalashtirish va sinovdan o'tkazishni talab qiladi. Qattiq siyosat bilan boshlang va zaruratga qarab uni asta-sekin yumshating. Resurslarni bloklamasdan siyosatingizni sinab ko'rish uchun Content-Security-Policy-Report-Only sarlavhasidan foydalaning. Ushbu sarlavha siyosatni amalga oshirmasdan qoidabuzarliklar haqida xabar beradi, bu sizga siyosatni ishlab chiqarishga joylashtirishdan oldin muammolarni aniqlash va tuzatish imkonini beradi.

            Content-Security-Policy-Report-Only: default-src 'self'; report-to csp-endpoint;
            

              
                Copy
              
            
          

Har qanday qoidabuzarliklarni aniqlash va siyosatingizni mos ravishda sozlash uchun brauzer tomonidan yaratilgan hisobotlarni tahlil qiling. Siyosatingiz to'g'ri ishlayotganiga ishonch hosil qilganingizdan so'ng, uni Content-Security-Policy sarlavhasi yordamida joriy eting.

CSP uchun eng yaxshi amaliyotlar

• default-src bilan boshlang: Asosiy siyosatni o'rnatish uchun har doim default-src ni belgilang.
• Aniq bo'ling: Siyosatingiz ko'lamini cheklash uchun maxsus direktivalar va manbalar ro'yxati kalit so'zlaridan foydalaning.
• 'unsafe-inline' va 'unsafe-eval' dan saqlaning: Bu kalit so'zlar CSP'ni sezilarli darajada zaiflashtiradi va iloji boricha ulardan qochish kerak.
• Ichki skriptlar va uslublar uchun nonslar yoki heshlardan foydalaning: Agar siz ichki skriptlar yoki uslublardan foydalanishingiz kerak bo'lsa, ma'lum kod bloklarini oq ro'yxatga kiritish uchun nonslar yoki heshlardan foydalaning.
• CSP qoidabuzarliklarini kuzatib boring: CSP qoidabuzarliklarini kuzatish va siyosatingizni mos ravishda sozlash uchun report-uri yoki report-to direktivasidan foydalaning.
• Puxta sinovdan o'tkazing: Siyosatingizni ishlab chiqarishga joylashtirishdan oldin uni sinab ko'rish uchun Content-Security-Policy-Report-Only sarlavhasidan foydalaning.
• Takrorlang va takomillashtiring: CSP bir martalik sozlama emas. Ilovangizdagi va tahdidlar landshaftidagi o'zgarishlarga moslashish uchun siyosatingizni doimiy ravishda kuzatib boring va takomillashtiring.

Manbalarni O'zaro Ulashish (CORS) nima?

Manbalarni O'zaro Ulashish (CORS) - bu bir manbadan (domendan) kelgan veb-sahifalarga boshqa manbadan resurslarga kirish imkonini beruvchi mexanizm. Standart bo'yicha, brauzerlar Bir xil manba siyosatini qo'llaydilar, bu esa skriptlarning o'zlari kelib chiqqan manbadan farqli manbaga so'rovlar yuborishini oldini oladi. CORS bu cheklovni tanlab yumshatish yo'lini taqdim etadi, bu esa qonuniy o'zaro manbali so'rovlarga ruxsat beradi va zararli hujumlardan himoya qiladi.

Bir xil manba siyosatini tushunish

Bir xil manba siyosati - bu bir veb-saytdagi zararli skriptning boshqa veb-saytdagi maxfiy ma'lumotlarga kirishini oldini oladigan asosiy xavfsizlik mexanizmi. Manba sxema (protokol), xost (domen) va port bilan belgilanadi. Ikki URL faqat va faqat bir xil sxema, xost va portga ega bo'lsa, bir xil manbaga ega bo'ladi.

Masalan:

• https://www.example.com/app1/index.html va https://www.example.com/app2/index.html bir xil manbaga ega.
• https://www.example.com/index.html va http://www.example.com/index.html turli manbalarga ega (turli sxema).
• https://www.example.com/index.html va https://sub.example.com/index.html turli manbalarga ega (turli xost).
• https://www.example.com:8080/index.html va https://www.example.com:80/index.html turli manbalarga ega (turli port).

CORS qanday ishlaydi

Veb-sahifa o'zaro manbali so'rov yuborganida, brauzer avval serverga "dastlabki" so'rov yuboradi. Dastlabki so'rov HTTP OPTIONS usulidan foydalanadi va haqiqiy so'rov ishlatadigan HTTP usuli va sarlavhalarini ko'rsatadigan sarlavhalarni o'z ichiga oladi. Keyin server o'zaro manbali so'rovga ruxsat berilganligini ko'rsatadigan sarlavhalar bilan javob beradi.

Agar server so'rovga ruxsat bersa, u javobga Access-Control-Allow-Origin sarlavhasini qo'shadi. Ushbu sarlavha resursga kirishga ruxsat berilgan manba(lar)ni belgilaydi. Keyin brauzer haqiqiy so'rov bilan davom etadi. Agar server so'rovga ruxsat bermasa, u Access-Control-Allow-Origin sarlavhasini qo'shmaydi va brauzer so'rovni bloklaydi.

CORS sarlavhalari: Batafsil ko'rib chiqish

CORS brauzer va server o'rtasida aloqa qilish uchun HTTP sarlavhalariga tayanadi. Mana asosiy CORS sarlavhalari:

• Access-Control-Allow-Origin: Resursga kirishga ruxsat berilgan manba(lar)ni belgilaydi. Ushbu sarlavha ma'lum bir manbani (masalan, https://www.example.com), universal belgini (*) yoki nullni o'z ichiga olishi mumkin. * dan foydalanish har qanday manbadan so'rovlarga ruxsat beradi, bu odatda xavfsizlik nuqtai nazaridan tavsiya etilmaydi. `null` dan foydalanish faqat "shaffof bo'lmagan javoblar" uchun mos keladi, masalan, resurs `file://` protokoli yoki ma'lumotlar URI yordamida olinganda.
• Access-Control-Allow-Methods: O'zaro manbali so'rov uchun ruxsat etilgan HTTP usullarini belgilaydi (masalan, GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: O'zaro manbali so'rovda ruxsat etilgan HTTP sarlavhalarini belgilaydi. Bu maxsus sarlavhalarni boshqarish uchun muhim.
• Access-Control-Allow-Credentials: Brauzer o'zaro manbali so'rovga hisob ma'lumotlarini (masalan, cookie'lar, avtorizatsiya sarlavhalari) kiritishi kerakligini bildiradi. Hisob ma'lumotlariga ruxsat berish uchun ushbu sarlavha true ga o'rnatilishi kerak.
• Access-Control-Expose-Headers: Mijozga qaysi sarlavhalar ko'rsatilishi mumkinligini belgilaydi. Standart bo'yicha faqat cheklangan sarlavhalar to'plami ko'rsatiladi.
• Access-Control-Max-Age: Brauzer dastlabki so'rovni qancha vaqt (sekundlarda) keshlashi mumkinligini belgilaydi.
• Origin: Bu so'rovning manbasini ko'rsatish uchun brauzer tomonidan yuboriladigan so'rov sarlavhasi.
• Vary: Umumiy HTTP sarlavhasi, ammo CORS uchun muhim. `Access-Control-Allow-Origin` dinamik ravishda yaratilganda, `Vary: Origin` sarlavhasi javobga kiritilishi kerak, bu keshlash mexanizmlariga javob `Origin` so'rov sarlavhasiga qarab o'zgarishini bildiradi.

Amaliy CORS Misollari

Keling, CORS konfiguratsiyalarining ba'zi amaliy misollarini ko'rib chiqaylik:

1-misol: Muayyan manbadan so'rovlarga ruxsat berish

Ushbu konfiguratsiya faqat https://www.example.com dan kelgan so'rovlarga ruxsat beradi:

            Access-Control-Allow-Origin: https://www.example.com
            

              
                Copy
              
            
          

2-misol: Har qanday manbadan so'rovlarga ruxsat berish (Tavsiya etilmaydi)

Ushbu konfiguratsiya har qanday manbadan so'rovlarga ruxsat beradi. Ehtiyotkorlik bilan foydalaning, chunki bu xavfsizlik xatarlarini keltirib chiqarishi mumkin:

            Access-Control-Allow-Origin: *
            

              
                Copy
              
            
          

3-misol: Muayyan usullar va sarlavhalarga ruxsat berish

Ushbu konfiguratsiya GET, POST va PUT usullariga hamda Content-Type va Authorization sarlavhalariga ruxsat beradi:

            Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
            

              
                Copy
              
            
          

4-misol: Hisob ma'lumotlariga ruxsat berish

Hisob ma'lumotlariga (masalan, cookie'larga) ruxsat berish uchun siz Access-Control-Allow-Credentials ni true ga o'rnatishingiz va ma'lum bir manbani ko'rsatishingiz kerak (hisob ma'lumotlariga ruxsat berishda * dan foydalana olmaysiz):

            Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Credentials: true
            

              
                Copy
              
            
          

Siz shuningdek JavaScript fetch/XMLHttpRequest so'rovingizda credentials: 'include' ni o'rnatishingiz kerak.

            fetch('https://api.example.com/data', {
  credentials: 'include'
})
            

              
                Copy
              
            
          

CORS dastlabki so'rovlari

Ma'lum turdagi o'zaro manbali so'rovlar uchun (masalan, maxsus sarlavhalar yoki GET, HEAD yoki Content-Type application/x-www-form-urlencoded, multipart/form-data yoki text/plain bo'lgan POST dan boshqa usullar bilan so'rovlar), brauzer OPTIONS usulidan foydalanib dastlabki so'rov yuboradi. Server haqiqiy so'rovga ruxsat berilganligini ko'rsatish uchun dastlabki so'rovga tegishli CORS sarlavhalari bilan javob berishi kerak.

Mana dastlabki so'rov va javobning misoli:

Dastlabki so'rov (OPTIONS):

            OPTIONS /data HTTP/1.1
Origin: https://www.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization
            

              
                Copy
              
            
          

Dastlabki javob (200 OK):

            HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
            

              
                Copy
              
            
          

Access-Control-Max-Age sarlavhasi brauzer dastlabki javobni qancha vaqt keshlashi mumkinligini belgilaydi, bu esa dastlabki so'rovlar sonini kamaytiradi.

CORS va JSONP

Padding bilan JSON (JSONP) - bu Bir xil manba siyosatini chetlab o'tishning eski usuli. Biroq, JSONP jiddiy xavfsizlik xatarlariga ega va uning o'rniga CORS'dan foydalanish kerak. JSONP sahifaga <script> teglarini kiritishga tayanadi, bu esa ixtiyoriy kodni bajarishi mumkin. CORS o'zaro manbali so'rovlarni boshqarishning xavfsizroq va moslashuvchan usulini taqdim etadi.

CORS uchun eng yaxshi amaliyotlar

• * dan foydalanishdan saqlaning: Access-Control-Allow-Origin sarlavhasida universal belgi (*) dan foydalanishdan saqlaning, chunki u har qanday manbadan so'rovlarga ruxsat beradi. Buning o'rniga, resursga kirishga ruxsat berilgan ma'lum manba(lar)ni ko'rsating.
• Usullar va sarlavhalar bilan aniq bo'ling: Access-Control-Allow-Methods va Access-Control-Allow-Headers sarlavhalarida ruxsat etilgan aniq HTTP usullari va sarlavhalarini ko'rsating.
• Access-Control-Allow-Credentials'dan ehtiyotkorlik bilan foydalaning: Faqatgina o'zaro manbali so'rovlarda hisob ma'lumotlariga (masalan, cookie'larga) ruxsat berishingiz kerak bo'lsa, Access-Control-Allow-Credentials ni yoqing. Hisob ma'lumotlariga ruxsat berishning xavfsizlik oqibatlaridan xabardor bo'ling.
• Dastlabki so'rovlaringizni himoyalang: Serveringiz dastlabki so'rovlarni to'g'ri boshqarishini va to'g'ri CORS sarlavhalarini qaytarishini ta'minlang.
• HTTPS'dan foydalaning: Har doim ham manba, ham o'zaro manbadan kirayotgan resurslar uchun HTTPS'dan foydalaning. Bu "man-in-the-middle" hujumlaridan himoya qilishga yordam beradi.
• Vary: Origin: Agar siz `Access-Control-Allow-Origin` sarlavhasini dinamik ravishda yaratsangiz, keshlash muammolarining oldini olish uchun har doim `Vary: Origin` sarlavhasini qo'shing.

Amalda CSP va CORS: Birlashtirilgan yondashuv

CSP va CORS ikkalasi ham xavfsizlik muammolarini hal qilsa-da, ular turli qatlamlarda ishlaydi va bir-birini to'ldiruvchi himoyani ta'minlaydi. CSP brauzerning zararli kontentni yuklashini oldini olishga qaratilgan bo'lsa, CORS serveringizdagi resurslarga qaysi manbalar kira olishini nazorat qilishga qaratilgan.

CSP va CORS'ni birlashtirib, siz veb-ilovalaringiz uchun yanada mustahkam xavfsizlik holatini yaratishingiz mumkin. Masalan, siz skriptlar yuklanishi mumkin bo'lgan manbalarni cheklash uchun CSP'dan va API nuqtalaringizga qaysi manbalar kira olishini nazorat qilish uchun CORS'dan foydalanishingiz mumkin.

Misol: API'ni CSP va CORS bilan himoyalash

Aytaylik, sizda https://api.example.com manzilida joylashgan API bor va unga faqat https://www.example.com dan kirishni xohlaysiz. Siz serveringizni quyidagi sarlavhalarni qaytarish uchun sozlashingiz mumkin:

API javob sarlavhalari (https://api.example.com):

            Access-Control-Allow-Origin: https://www.example.com
Content-Type: application/json
            

              
                Copy
              
            
          

Va siz o'z veb-saytingizni (https://www.example.com) quyidagi CSP sarlavhasidan foydalanish uchun sozlashingiz mumkin:

Veb-sayt CSP sarlavhasi (https://www.example.com):

            Content-Security-Policy: default-src 'self'; script-src 'self'; connect-src 'self' https://api.example.com;
            

              
                Copy
              
            
          

Ushbu CSP siyosati veb-saytga skriptlarni yuklashga va API'ga ulanishga ruxsat beradi, ammo uning boshqa domenlardan skriptlarni yuklashini yoki ulanishini oldini oladi.

Xulosa

Kontent Xavfsizlik Siyosati (CSP) va Manbalarni O'zaro Ulashish (CORS) frontend ilovalaringiz xavfsizligini kuchaytirish uchun muhim vositalardir. CSP va CORS'ni ehtiyotkorlik bilan sozlash orqali siz XSS hujumlari, ma'lumotlarni kiritish hujumlari va boshqa xavfsizlik zaifliklari xavfini sezilarli darajada kamaytirishingiz mumkin. Qattiq siyosat bilan boshlashni, puxta sinovdan o'tkazishni va ilovangizdagi o'zgarishlarga va rivojlanayotgan tahdidlar landshaftiga moslashish uchun konfiguratsiyangizni doimiy ravishda kuzatib borish va takomillashtirishni unutmang. Frontend xavfsizligiga ustuvorlik berish orqali siz foydalanuvchilaringizni himoya qilishingiz va bugungi tobora murakkablashib borayotgan raqamli dunyoda veb-ilovalaringizning yaxlitligini ta'minlashingiz mumkin.