Starpizcelsmes drošības ieviešana: JavaScript komunikācijas labākās prakses

Mūsdienu savstarpēji saistītajā tīmeklī JavaScript lietojumprogrammām bieži ir nepieciešams mijiedarboties ar resursiem no dažādām izcelsmēm (domēniem, protokoliem vai portiem). Šo mijiedarbību regulē pārlūkprogrammas Tās pašas izcelsmes politika, kas ir būtisks drošības mehānisms, kas paredzēts, lai novērstu ļaunprātīgu skriptu piekļuvi sensitīviem datiem pāri domēnu robežām. Tomēr likumīga starpizcelsmes komunikācija bieži ir nepieciešama. Šeit talkā nāk Starpizcelsmes resursu koplietošana (Cross-Origin Resource Sharing jeb CORS). Šis raksts sniedz visaptverošu pārskatu par CORS, tā ieviešanu un labākajām praksēm drošai starpizcelsmes komunikācijai JavaScript.

Izpratne par Tās pašas izcelsmes politiku

Tās pašas izcelsmes politika (Same-Origin Policy — SOP) ir fundamentāls drošības koncepts tīmekļa pārlūkprogrammās. Tā ierobežo skriptus, kas darbojas vienā izcelsmē, no piekļuves resursiem no citas izcelsmes. Izcelsme tiek definēta ar protokola (piem., HTTP vai HTTPS), domēna nosaukuma (piem., example.com) un porta numura (piem., 80 vai 443) kombināciju. Diviem URL ir viena un tā pati izcelsme tikai tad, ja visi trīs komponenti precīzi sakrīt.

Piemēram:

• http://www.example.com un http://www.example.com/path: Viena izcelsme
• http://www.example.com un https://www.example.com: Atšķirīga izcelsme (atšķirīgs protokols)
• http://www.example.com un http://subdomain.example.com: Atšķirīga izcelsme (atšķirīgs domēns)
• http://www.example.com:80 un http://www.example.com:8080: Atšķirīga izcelsme (atšķirīgs ports)

SOP ir kritiska aizsardzība pret starpvietņu skriptošanas (Cross-Site Scripting — XSS) uzbrukumiem, kur ļaunprātīgi skripti, kas ievietoti vietnē, var nozagt lietotāja datus vai veikt neatļautas darbības lietotāja vārdā.

Kas ir Starpizcelsmes resursu koplietošana (CORS)?

CORS ir mehānisms, kas izmanto HTTP galvenes, lai ļautu serveriem norādīt, kuras izcelsmes (domēni, shēmas vai porti) drīkst piekļūt to resursiem. Būtībā tas atvieglo Tās pašas izcelsmes politiku konkrētiem starpizcelsmes pieprasījumiem, nodrošinot likumīgu komunikāciju, vienlaikus aizsargājot pret ļaunprātīgiem uzbrukumiem.

CORS darbojas, pievienojot jaunas HTTP galvenes, kas norāda atļautās izcelsmes un metodes (piem., GET, POST, PUT, DELETE), kuras ir atļautas starpizcelsmes pieprasījumiem. Kad pārlūkprogramma veic starpizcelsmes pieprasījumu, tā nosūta Origin galveni kopā ar pieprasījumu. Serveris atbild ar Access-Control-Allow-Origin galveni, kas norāda atļauto(-ās) izcelsmi(-es). Ja pieprasījuma izcelsme atbilst vērtībai Access-Control-Allow-Origin galvenē (vai ja vērtība ir *), pārlūkprogramma ļauj JavaScript kodam piekļūt atbildei.

Kā darbojas CORS: detalizēts paskaidrojums

CORS process parasti ietver divu veidu pieprasījumus:

1. Vienkāršie pieprasījumi: Tie ir pieprasījumi, kas atbilst noteiktiem kritērijiem. Ja pieprasījums atbilst šiem nosacījumiem, pārlūkprogramma tieši nosūta pieprasījumu.
2. Pirmsielidošanas (preflighted) pieprasījumi: Tie ir sarežģītāki pieprasījumi, kuriem nepieciešams, lai pārlūkprogramma vispirms nosūtītu "pirmsielidošanas" OPTIONS pieprasījumu serverim, lai noteiktu, vai faktisko pieprasījumu ir droši sūtīt.

1. Vienkāršie pieprasījumi

Pieprasījums tiek uzskatīts par "vienkāršu", ja tas atbilst visiem šiem nosacījumiem:

• Metode ir GET, HEAD vai POST.
• Ja metode ir POST, Content-Type galvene ir viena no šīm:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• Nav iestatītas pielāgotas galvenes.

Vienkārša pieprasījuma piemērs:

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

Servera atbildes piemērs, kas atļauj izcelsmi:

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

{
  "data": "Some data"
}

Ja Access-Control-Allow-Origin galvene ir klāt un tās vērtība atbilst pieprasījuma izcelsmei vai ir iestatīta uz *, pārlūkprogramma ļauj skriptam piekļūt atbildes datiem. Pretējā gadījumā pārlūkprogramma bloķē piekļuvi atbildei, un konsolē tiek parādīts kļūdas ziņojums.

2. Pirmsielidošanas (preflighted) pieprasījumi

Pieprasījums tiek uzskatīts par "pirmsielidošanas", ja tas neatbilst vienkārša pieprasījuma kritērijiem. Tas parasti notiek, ja pieprasījums izmanto citu HTTP metodi (piem., PUT, DELETE), iestata pielāgotas galvenes vai izmanto Content-Type, kas atšķiras no atļautajām vērtībām.

Pirms faktiskā pieprasījuma nosūtīšanas pārlūkprogramma vispirms nosūta OPTIONS pieprasījumu serverim. Šis "pirmsielidošanas" pieprasījums ietver šādas galvenes:

• Origin: Pieprasošās lapas izcelsme.
• Access-Control-Request-Method: HTTP metode, kas tiks izmantota faktiskajā pieprasījumā (piem., PUT, DELETE).
• Access-Control-Request-Headers: Ar komatu atdalīts saraksts ar pielāgotajām galvenēm, kas tiks nosūtītas faktiskajā pieprasījumā.

Pirmsielidošanas pieprasījuma piemērs:

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

Serverim ir jāatbild uz OPTIONS pieprasījumu ar šādām galvenēm:

• Access-Control-Allow-Origin: Izcelsme, kurai ir atļauts veikt pieprasījumu (vai *, lai atļautu jebkuru izcelsmi).
• Access-Control-Allow-Methods: Ar komatu atdalīts saraksts ar HTTP metodēm, kas ir atļautas starpizcelsmes pieprasījumiem (piem., GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Ar komatu atdalīts saraksts ar pielāgotajām galvenēm, kuras ir atļauts sūtīt pieprasījumā.
• Access-Control-Max-Age: Sekunžu skaits, cik ilgi pirmsielidošanas atbildi var kešot pārlūkprogramma.

Servera atbildes piemērs pirmsielidošanas pieprasījumam:

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

Ja servera atbilde uz pirmsielidošanas pieprasījumu norāda, ka faktiskais pieprasījums ir atļauts, pārlūkprogramma nosūtīs faktisko pieprasījumu. Pretējā gadījumā pārlūkprogramma bloķēs pieprasījumu un parādīs kļūdas ziņojumu.

CORS ieviešana servera pusē

CORS galvenokārt tiek ieviests servera pusē, iestatot atbilstošās HTTP galvenes atbildē. Konkrētas ieviešanas detaļas atšķirsies atkarībā no izmantotās servera puses tehnoloģijas.

Piemērs, izmantojot Node.js ar Express:

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

// Iespējot CORS visām izcelsmēm
app.use(cors());

// Alternatīvi, konfigurēt CORS konkrētām izcelsmēm
// const corsOptions = {
//   origin: 'http://www.example.com'
// };
// app.use(cors(corsOptions));

app.get('/resource', (req, res) => {
  res.json({ message: 'This is a CORS-enabled resource' });
});

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

cors starpprogrammatūra vienkāršo CORS galveņu iestatīšanas procesu Express. Jūs varat iespējot CORS visām izcelsmēm, izmantojot cors(), vai konfigurēt to konkrētām izcelsmēm, izmantojot cors(corsOptions).

Piemērs, izmantojot Python ar Flask:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route("/resource")
def hello():
    return {"message": "This is a CORS-enabled resource"}

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

flask_cors paplašinājums nodrošina vienkāršu veidu, kā iespējot CORS Flask lietojumprogrammās. Jūs varat iespējot CORS visām izcelsmēm, padodot app uz CORS(). Ir iespējama arī konfigurācija konkrētām izcelsmēm.

Piemērs, izmantojot Java ar Spring Boot:

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, jūs varat konfigurēt CORS, izmantojot WebMvcConfigurer. Tas ļauj smalki kontrolēt atļautās izcelsmes, metodes, galvenes un citus CORS iestatījumus.

CORS galveņu iestatīšana tieši (Vispārīgs piemērs)

Ja neizmantojat nevienu ietvaru, jūs varat iestatīt galvenes tieši savā servera puses kodā (piem., PHP, Ruby on Rails utt.):

CORS labākās prakses

Lai nodrošinātu drošu un efektīvu starpizcelsmes komunikāciju, ievērojiet šīs labākās prakses:

1. Izvairieties no Access-Control-Allow-Origin: * izmantošanas produkcijā: Atļaujot visām izcelsmēm piekļūt jūsu resursiem, var rasties drošības risks. Tā vietā norādiet precīzas atļautās izcelsmes.
2. Izmantojiet HTTPS: Vienmēr izmantojiet HTTPS gan pieprasošajai, gan apkalpojošajai izcelsmei, lai aizsargātu datus pārsūtīšanas laikā.
3. Validējiet ievaddatus: Vienmēr validējiet un sanitizējiet datus, kas saņemti no starpizcelsmes pieprasījumiem, lai novērstu injekcijas uzbrukumus.
4. Ieviesiet pienācīgu autentifikāciju un autorizāciju: Nodrošiniet, ka tikai autorizēti lietotāji var piekļūt sensitīviem resursiem.
5. Kešojiet pirmsielidošanas atbildes: Izmantojiet Access-Control-Max-Age, lai kešotu pirmsielidošanas atbildes un samazinātu OPTIONS pieprasījumu skaitu.
6. Apsveriet akreditācijas datu izmantošanu: Ja jūsu API nepieciešama autentifikācija ar sīkfailiem vai HTTP autentifikāciju, jums ir jāiestata Access-Control-Allow-Credentials galvene uz true serverī un credentials opcija uz 'include' jūsu JavaScript kodā (piem., izmantojot fetch vai XMLHttpRequest). Esiet īpaši piesardzīgi, izmantojot šo opciju, jo tā var radīt drošības ievainojamības, ja netiek pareizi apstrādāta. Turklāt, kad Access-Control-Allow-Credentials ir iestatīts uz true, Access-Control-Allow-Origin nevar iestatīt uz "*". Jums ir skaidri jānorāda atļautā(-ās) izcelsme(-es).
7. Regulāri pārskatiet un atjauniniet CORS konfigurāciju: Jūsu lietojumprogrammai attīstoties, regulāri pārskatiet un atjauniniet savu CORS konfigurāciju, lai nodrošinātu, ka tā paliek droša un atbilst jūsu vajadzībām.
8. Izprotiet dažādu CORS konfigurāciju ietekmi: Apzinieties dažādu CORS konfigurāciju drošības ietekmi un izvēlieties konfigurāciju, kas ir piemērota jūsu lietojumprogrammai.
9. Testējiet savu CORS implementāciju: Rūpīgi testējiet savu CORS implementāciju, lai nodrošinātu, ka tā darbojas, kā paredzēts, un ka tā nerada nekādas drošības ievainojamības. Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai pārbaudītu tīkla pieprasījumus un atbildes, un izmantojiet automatizētus testēšanas rīkus, lai pārbaudītu CORS uzvedību.

Piemērs: Fetch API izmantošana ar CORS

Šeit ir piemērs, kā izmantot fetch API, lai veiktu starpizcelsmes pieprasījumu:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // Paziņo pārlūkprogrammai, ka šis ir CORS pieprasījums
  headers: {
    'Content-Type': 'application/json',
    'X-Custom-Header': 'value'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => {
  console.log(data);
})
.catch(error => {
  console.error('There was a problem with the fetch operation:', error);
});

Opcija mode: 'cors' norāda pārlūkprogrammai, ka šis ir CORS pieprasījums. Ja serveris neatļauj izcelsmi, pārlūkprogramma bloķēs piekļuvi atbildei, un tiks izmesta kļūda.

Ja izmantojat akreditācijas datus (piem., sīkfailus), jums ir jāiestata opcija credentials uz 'include':

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include', // Iekļaut sīkfailus pieprasījumā
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // ...
});

CORS un JSONP

JSON ar papildinājumu (JSON with Padding — JSONP) ir vecāka tehnika Tās pašas izcelsmes politikas apiešanai. Tā darbojas, dinamiski izveidojot <script> tagu, kas ielādē datus no cita domēna. Lai gan JSONP var būt noderīgs noteiktās situācijās, tam ir būtiski drošības ierobežojumi, un no tā, ja iespējams, vajadzētu izvairīties. CORS ir vēlamais risinājums starpizcelsmes komunikācijai, jo tas nodrošina drošāku un elastīgāku mehānismu.

Galvenās atšķirības starp CORS un JSONP:

• Drošība: CORS ir drošāks par JSONP, jo tas ļauj serverim kontrolēt, kuras izcelsmes drīkst piekļūt tā resursiem. JSONP nenodrošina nekādu izcelsmes kontroli.
• HTTP metodes: CORS atbalsta visas HTTP metodes (piem., GET, POST, PUT, DELETE), savukārt JSONP atbalsta tikai GET pieprasījumus.
• Kļūdu apstrāde: CORS nodrošina labāku kļūdu apstrādi nekā JSONP. Kad CORS pieprasījums neizdodas, pārlūkprogramma sniedz detalizētus kļūdu ziņojumus. JSONP kļūdu apstrāde ir ierobežota ar to, vai skripts ielādējās veiksmīgi.

CORS problēmu novēršana

CORS problēmu atkļūdošana var būt nomācoša. Šeit ir daži bieži sastopami problēmu novēršanas padomi:

• Pārbaudiet pārlūkprogrammas konsoli: Pārlūkprogrammas konsole parasti sniegs detalizētus kļūdu ziņojumus par CORS problēmām.
• Pārbaudiet tīkla pieprasījumus: Izmantojiet pārlūkprogrammas izstrādātāju rīkus, lai pārbaudītu gan pieprasījuma, gan atbildes HTTP galvenes. Pārliecinieties, ka Origin un Access-Control-Allow-Origin galvenes ir iestatītas pareizi.
• Pārbaudiet servera puses konfigurāciju: Vēlreiz pārbaudiet savu servera puses CORS konfigurāciju, lai nodrošinātu, ka tā atļauj pareizās izcelsmes, metodes un galvenes.
• Iztīriet pārlūkprogrammas kešatmiņu: Dažreiz kešotas pirmsielidošanas atbildes var izraisīt CORS problēmas. Mēģiniet iztīrīt pārlūkprogrammas kešatmiņu vai izmantot privātās pārlūkošanas logu.
• Izmantojiet CORS starpniekserveri: Dažos gadījumos jums var būt nepieciešams izmantot CORS starpniekserveri, lai apietu CORS ierobežojumus. Tomēr ņemiet vērā, ka CORS starpniekservera izmantošana var radīt drošības riskus.
• Pārbaudiet nepareizas konfigurācijas: Meklējiet bieži sastopamas nepareizas konfigurācijas, piemēram, trūkstošu Access-Control-Allow-Origin galveni, nepareizas Access-Control-Allow-Methods vai Access-Control-Allow-Headers vērtības, vai nepareizu Origin galveni pieprasījumā.

Noslēgums

Starpizcelsmes resursu koplietošana (CORS) ir būtisks mehānisms drošas starpizcelsmes komunikācijas nodrošināšanai JavaScript lietojumprogrammās. Izprotot Tās pašas izcelsmes politiku, CORS darbplūsmu un dažādās iesaistītās HTTP galvenes, izstrādātāji var efektīvi ieviest CORS, lai aizsargātu savas lietojumprogrammas no drošības ievainojamībām, vienlaikus atļaujot likumīgus starpizcelsmes pieprasījumus. CORS konfigurācijas labāko prakšu ievērošana un regulāra jūsu implementācijas pārskatīšana ir kritiski svarīga, lai uzturētu drošu un robustu tīmekļa lietojumprogrammu.

Šī visaptverošā rokasgrāmata sniedz stabilu pamatu CORS izpratnei un ieviešanai. Atcerieties konsultēties ar oficiālo dokumentāciju un resursiem jūsu konkrētajai servera puses tehnoloģijai, lai nodrošinātu, ka jūs pareizi un droši ieviešat CORS.

Papildu resursi

• MDN Web Docs: Starpizcelsmes resursu koplietošana (CORS)
• W3C: Starpizcelsmes resursu koplietošana (CORS)
• PortSwigger Web Security Academy: CORS