Päritoluülese turvalisuse rakendamine: JavaScripti suhtluse parimad tavad

Tänapäeva omavahel ühendatud veebis peavad JavaScripti rakendused sageli suhtlema ressurssidega, mis pärinevad erinevatest päritoludest (domeenid, protokollid või pordid). Seda suhtlust reguleerib brauseri sama päritolu poliitika (Same-Origin Policy), mis on oluline turvamehhanism, mille eesmärk on takistada pahatahtlikel skriptidel juurdepääsu tundlikele andmetele üle domeenipiiride. Siiski on seaduslik päritoluülene suhtlus sageli vajalik. Siin tulebki mängu päritoluülene ressursijagamine (CORS). See artikkel annab põhjaliku ülevaate CORS-ist, selle rakendamisest ja parimatest tavadest turvaliseks päritoluüleseks suhtluseks JavaScriptis.

Sama päritolu poliitika mõistmine

Sama päritolu poliitika (SOP) on veebibrauserites fundamentaalne turvakontseptsioon. See piirab ühest päritolust käivitatud skriptide juurdepääsu ressurssidele, mis pärinevad teisest päritolust. Päritolu on defineeritud protokolli (nt HTTP või HTTPS), domeeninime (nt example.com) ja pordi numbri (nt 80 või 443) kombinatsioonina. Kahel URL-il on sama päritolu ainult siis, kui kõik kolm komponenti on täpselt samad.

Näiteks:

• http://www.example.com ja http://www.example.com/path: Sama päritolu
• http://www.example.com ja https://www.example.com: Erinev päritolu (erinev protokoll)
• http://www.example.com ja http://subdomain.example.com: Erinev päritolu (erinev domeen)
• http://www.example.com:80 ja http://www.example.com:8080: Erinev päritolu (erinev port)

SOP on kriitilise tähtsusega kaitse saitidevahelise skriptimise (XSS) rünnakute vastu, mille puhul veebisaidile süstitud pahatahtlikud skriptid võivad varastada kasutajaandmeid või sooritada kasutaja nimel volitamata toiminguid.

Mis on päritoluülene ressursijagamine (CORS)?

CORS on mehhanism, mis kasutab HTTP päiseid, et lubada serveritel määrata, millised päritolud (domeenid, skeemid või pordid) tohivad nende ressurssidele juurde pääseda. See sisuliselt leevendab sama päritolu poliitikat konkreetsete päritoluüleste päringute jaoks, võimaldades seaduslikku suhtlust, kaitstes samal ajal pahatahtlike rünnakute eest.

CORS töötab, lisades uusi HTTP päiseid, mis määravad lubatud päritolud ja meetodid (nt GET, POST, PUT, DELETE), mis on päritoluüleste päringute jaoks lubatud. Kui brauser teeb päritoluülese päringu, saadab see päringuga kaasa Origin päise. Server vastab Access-Control-Allow-Origin päisega, mis määrab lubatud päritolu(d). Kui päringu päritolu vastab Access-Control-Allow-Origin päise väärtusele (või kui väärtus on *), lubab brauser JavaScripti koodil vastusele juurde pääseda.

Kuidas CORS töötab: detailne selgitus

CORS-i protsess hõlmab tavaliselt kahte tüüpi päringuid:

1. Lihtsad päringud: Need on päringud, mis vastavad teatud kriteeriumidele. Kui päring vastab neile tingimustele, saadab brauser päringu otse.
2. Eelpäringuga päringud: Need on keerukamad päringud, mis nõuavad, et brauser saadaks esmalt serverile "eelpäringu" (preflight) OPTIONS-päringu, et teha kindlaks, kas tegelikku päringut on ohutu saata.

1. Lihtsad päringud

Päringut peetakse "lihtsaks", kui see vastab kõigile järgmistele tingimustele:

• Meetod on GET, HEAD või POST.
• Kui meetod on POST, on Content-Type päis üks järgmistest:
• application/x-www-form-urlencoded
• multipart/form-data
• text/plain
• Kohandatud päiseid ei ole seatud.

Lihtsa päringu näide:

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

Päritolu lubava serverivastuse näide:

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

{
  "data": "Some data"
}

Kui Access-Control-Allow-Origin päis on olemas ja selle väärtus vastab päringu päritolule või on seatud väärtusele *, lubab brauser skriptil vastuse andmetele juurde pääseda. Vastasel juhul blokeerib brauser juurdepääsu vastusele ja konsoolis kuvatakse veateade.

2. Eelpäringuga päringud

Päringut peetakse "eelpäringuga" päringuks, kui see ei vasta lihtsa päringu kriteeriumidele. See juhtub tavaliselt siis, kui päring kasutab teistsugust HTTP-meetodit (nt PUT, DELETE), seab kohandatud päiseid või kasutab muud Content-Type väärtust kui lubatud.

Enne tegeliku päringu saatmist saadab brauser esmalt serverile OPTIONS-päringu. See "eelpäring" sisaldab järgmisi päiseid:

• Origin: Päringu teinud lehe päritolu.
• Access-Control-Request-Method: HTTP-meetod, mida kasutatakse tegelikus päringus (nt PUT, DELETE).
• Access-Control-Request-Headers: Komadega eraldatud nimekiri kohandatud päistest, mis saadetakse tegelikus päringus.

Eelpäringu näide:

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 peab vastama OPTIONS-päringule järgmiste päistega:

• Access-Control-Allow-Origin: Päritolu, millel on lubatud päringut teha (või *, et lubada mis tahes päritolu).
• Access-Control-Allow-Methods: Komadega eraldatud nimekiri HTTP-meetoditest, mis on päritoluüleste päringute jaoks lubatud (nt GET, POST, PUT, DELETE).
• Access-Control-Allow-Headers: Komadega eraldatud nimekiri kohandatud päistest, mida on päringus lubatud saata.
• Access-Control-Max-Age: Sekundite arv, mille jooksul brauser saab eelpäringu vastust vahemällu salvestada.

Serveri vastuse näide eelpäringule:

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

Kui serveri vastus eelpäringule näitab, et tegelik päring on lubatud, saadab brauser seejärel tegeliku päringu. Vastasel juhul blokeerib brauser päringu ja kuvab veateate.

CORS-i rakendamine serveri poolel

CORS rakendatakse peamiselt serveri poolel, seadistades vastuses sobivad HTTP päised. Konkreetsed rakendamise detailid varieeruvad sõltuvalt kasutatavast serveripoolsest tehnoloogiast.

Näide Node.js-i ja Expressiga:

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

// Luba CORS kõikidele päritoludele
app.use(cors());

// Alternatiivselt, konfigureeri CORS kindlatele päritoludele
// 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 vahevara lihtsustab CORS-i päiste seadistamist Expressis. Saate lubada CORS-i kõikidele päritoludele, kasutades cors(), või konfigureerida seda konkreetsete päritolude jaoks, kasutades cors(corsOptions).

Näide Pythoni ja Flaskiga:

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 laiendus pakub lihtsat viisi CORS-i lubamiseks Flaski rakendustes. Saate lubada CORS-i kõikidele päritoludele, andes app-i edasi CORS()-ile. Samuti on võimalik konfigureerida kindlaid päritolusid.

Näide Java ja Spring Bootiga:

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 Bootis saate CORS-i konfigureerida, kasutades WebMvcConfigurer-it. See võimaldab peeneteralist kontrolli lubatud päritolude, meetodite, päiste ja muude CORS-i seadete üle.

CORS-i päiste otse seadistamine (üldine näide)

Kui te ei kasuta ühtegi raamistikku, saate päised seadistada otse oma serveripoolses koodis (nt PHP, Ruby on Rails jne):

CORS-i parimad tavad

Turvalise ja tõhusa päritoluülese suhtluse tagamiseks järgige neid parimaid tavasid:

1. Vältige Access-Control-Allow-Origin: * kasutamist tootmiskeskkonnas: Kõigile päritoludele juurdepääsu lubamine oma ressurssidele võib olla turvarisk. Selle asemel määrake täpsed päritolud, mis on lubatud.
2. Kasutage HTTPS-i: Kasutage alati HTTPS-i nii päringut tegeva kui ka teenindava päritolu jaoks, et kaitsta andmeid edastamise ajal.
3. Valideerige sisendit: Valideerige ja puhastage alati päritoluülestest päringutest saadud andmeid, et vältida süsterünnakuid.
4. Rakendage nõuetekohane autentimine ja autoriseerimine: Veenduge, et ainult volitatud kasutajad pääseksid ligi tundlikele ressurssidele.
5. Salvestage eelpäringute vastused vahemällu: Kasutage Access-Control-Max-Age-i, et salvestada eelpäringute vastuseid vahemällu ja vähendada OPTIONS-päringute arvu.
6. Kaaluge mandaatide kasutamist: Kui teie API nõuab autentimist küpsiste või HTTP autentimisega, peate seadma serveris Access-Control-Allow-Credentials päise väärtuseks true ja oma JavaScripti koodis credentials valiku väärtuseks 'include' (nt kasutades fetch või XMLHttpRequest). Olge selle valiku kasutamisel äärmiselt ettevaatlik, kuna see võib valesti käsitlemisel tekitada turvaauke. Lisaks, kui Access-Control-Allow-Credentials on seatud väärtusele true, ei saa Access-Control-Allow-Origin olla seatud väärtusele "*". Peate selgesõnaliselt määrama lubatud päritolu(d).
7. Vaadake regulaarselt üle ja uuendage CORS-i konfiguratsiooni: Rakenduse arenedes vaadake regulaarselt üle ja uuendage oma CORS-i konfiguratsiooni, et tagada selle turvalisus ja vastavus teie vajadustele.
8. Mõistke erinevate CORS-i konfiguratsioonide mõju: Olge teadlik erinevate CORS-i konfiguratsioonide turvamõjudest ja valige oma rakenduse jaoks sobiv konfiguratsioon.
9. Testige oma CORS-i rakendust: Testige oma CORS-i rakendust põhjalikult, et veenduda selle ootuspärases toimimises ja et see ei tekitaks turvaauke. Kasutage brauseri arendajatööriistu võrgupäringute ja vastuste kontrollimiseks ning kasutage automaatseid testimisvahendeid CORS-i käitumise kontrollimiseks.

Näide: Fetch API kasutamine koos CORS-iga

Siin on näide, kuidas kasutada fetch API-t päritoluülese päringu tegemiseks:

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors', // Annab brauserile teada, et tegemist on CORS-päringuga
  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);
});

Valik mode: 'cors' annab brauserile teada, et tegemist on CORS-päringuga. Kui server ei luba päritolu, blokeerib brauser juurdepääsu vastusele ja visatakse viga.

Kui kasutate mandaate (nt küpsiseid), peate seadma credentials valiku väärtuseks 'include':

fetch('https://api.example.com/data', {
  method: 'GET',
  mode: 'cors',
  credentials: 'include', // Kaasa küpsised päringusse
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  // ...
});

CORS ja JSONP

JSON with Padding (JSONP) on vanem tehnika sama päritolu poliitikast möödahiilimiseks. See töötab, luues dünaamiliselt <script> sildi, mis laadib andmeid teisest domeenist. Kuigi JSONP võib teatud olukordades olla kasulik, on sellel olulised turvapiirangud ja seda tuleks võimaluse korral vältida. CORS on eelistatud lahendus päritoluüleseks suhtluseks, kuna see pakub turvalisemat ja paindlikumat mehhanismi.

Peamised erinevused CORS-i ja JSONP vahel:

• Turvalisus: CORS on turvalisem kui JSONP, kuna see võimaldab serveril kontrollida, millised päritolud tohivad tema ressurssidele juurde pääseda. JSONP ei paku päritolu kontrolli.
• HTTP-meetodid: CORS toetab kõiki HTTP-meetodeid (nt GET, POST, PUT, DELETE), samas kui JSONP toetab ainult GET-päringuid.
• Veakäsitlus: CORS pakub paremat veakäsitlust kui JSONP. Kui CORS-päring ebaõnnestub, pakub brauser üksikasjalikke veateateid. JSONP veakäsitlus piirdub tuvastamisega, kas skript laaditi edukalt.

CORS-i probleemide tõrkeotsing

CORS-i probleemide silumine võib olla frustreeriv. Siin on mõned levinumad tõrkeotsingu näpunäited:

• Kontrollige brauseri konsooli: Brauseri konsool annab tavaliselt üksikasjalikke veateateid CORS-i probleemide kohta.
• Uurige võrgupäringuid: Kasutage brauseri arendajatööriistu, et uurida nii päringu kui ka vastuse HTTP päiseid. Veenduge, et Origin ja Access-Control-Allow-Origin päised on õigesti seadistatud.
• Kontrollige serveripoolset konfiguratsiooni: Kontrollige oma serveripoolset CORS-i konfiguratsiooni topelt, et veenduda, et see lubab õigeid päritolusid, meetodeid ja päiseid.
• Tühjendage brauseri vahemälu: Mõnikord võivad vahemällu salvestatud eelpäringute vastused põhjustada CORS-i probleeme. Proovige tühjendada brauseri vahemälu või kasutada privaatset sirvimisakent.
• Kasutage CORS-i proksit: Mõnel juhul võib CORS-i piirangutest möödahiilimiseks olla vajalik kasutada CORS-i proksit. Olge siiski teadlik, et CORS-i proksi kasutamine võib tekitada turvariske.
• Otsige valekonfiguratsioone: Otsige levinud valekonfiguratsioone, nagu puuduv Access-Control-Allow-Origin päis, valed Access-Control-Allow-Methods või Access-Control-Allow-Headers väärtused või vale Origin päis päringus.

Kokkuvõte

Päritoluülene ressursijagamine (CORS) on oluline mehhanism turvalise päritoluülese suhtluse võimaldamiseks JavaScripti rakendustes. Mõistes sama päritolu poliitikat, CORS-i töövoogu ja erinevaid seotud HTTP päiseid, saavad arendajad CORS-i tõhusalt rakendada, et kaitsta oma rakendusi turvaaukude eest, lubades samal ajal seaduslikke päritoluüleseid päringuid. CORS-i konfiguratsiooni parimate tavade järgimine ja oma rakenduse regulaarne ülevaatamine on turvalise ja robustse veebirakenduse säilitamiseks ülioluline.

See põhjalik juhend annab kindla aluse CORS-i mõistmiseks ja rakendamiseks. Ärge unustage tutvuda oma konkreetse serveripoolse tehnoloogia ametliku dokumentatsiooni ja ressurssidega, et tagada CORS-i korrektne ja turvaline rakendamine.

Lisamaterjalid

• MDN Web Docs: Cross-Origin Resource Sharing (CORS)
• W3C: Cross-Origin Resource Sharing (CORS)
• PortSwigger Web Security Academy: CORS