Antete de securitate Frontend: Stăpânirea Content Security Policy (CSP)

În peisajul digital actual, unde aplicațiile web sunt din ce în ce mai complexe și interconectate, protejarea împotriva amenințărilor de securitate este esențială. În timp ce securitatea backend primește adesea o atenție semnificativă, securitatea frontend este la fel de crucială. Antetele de securitate Frontend acționează ca prima linie de apărare, oferind un mecanism de a instrui browserul cu privire la modul în care ar trebui să se comporte și de a proteja utilizatorii de diverse atacuri. Printre aceste antete, Content Security Policy (CSP) se remarcă drept un instrument puternic pentru atenuarea unei game largi de riscuri.

Ce sunt antetele de securitate Frontend?

Antetele de securitate Frontend sunt antete de răspuns HTTP pe care un server web le trimite browserului. Aceste antete conțin instrucțiuni despre modul în care browserul ar trebui să gestioneze conținutul pe care îl primește. Ele ajută la prevenirea atacurilor comune, cum ar fi:

• Cross-Site Scripting (XSS): Injectarea de scripturi malițioase în site-uri web de încredere.
• Clickjacking: Păcălirea utilizatorilor să facă clic pe ceva diferit de ceea ce percep.
• Atacuri Man-in-the-Middle: Interceptarea comunicării dintre utilizator și server.

Unele dintre cele mai importante antete de securitate frontend includ:

• Content Security Policy (CSP): Definește sursele din care browserul are voie să încarce resurse.
• Strict-Transport-Security (HSTS): Forțează browserul să utilizeze HTTPS pentru toate comunicările cu site-ul web.
• X-Frame-Options: Împiedică încorporarea site-ului web într-un iframe, atenuând atacurile de tip clickjacking.
• X-XSS-Protection: Activează filtrul XSS încorporat al browserului. (Notă: Adesea înlocuit de CSP, dar poate oferi în continuare un strat de apărare).
• Referrer-Policy: Controlează cantitatea de informații de referință trimise cu solicitările.
• Feature-Policy (acum Permissions-Policy): Permite dezvoltatorilor să activeze și să dezactiveze selectiv funcțiile și API-urile browserului.

O analiză profundă a Content Security Policy (CSP)

Content Security Policy (CSP) este un antet de răspuns HTTP care controlează resursele pe care agentul utilizator are voie să le încarce pentru o anumită pagină. În esență, listează sursele aprobate de conținut, reducând semnificativ riscul atacurilor XSS. Prin definirea explicită a originilor din care pot fi încărcate resurse, cum ar fi scripturi, foi de stil, imagini și fonturi, CSP face mult mai dificilă injectarea de cod malițios în site-ul dvs. web de către atacatori.

Cum funcționează CSP

CSP funcționează oferind browserului o listă de surse aprobate pentru diferite tipuri de conținut. Când browserul întâlnește o resursă care încalcă CSP, acesta blochează resursa și raportează încălcarea. Acest mecanism de blocare împiedică executarea codului malițios, chiar dacă un atacator reușește să îl injecteze în HTML.

Directivele CSP

Directivele CSP sunt componentele de bază ale unei politici CSP. Ele specifică sursele permise pentru diferite tipuri de resurse. Unele dintre cele mai frecvent utilizate directive includ:

• default-src: Setează sursa implicită pentru toate tipurile de resurse. Aceasta este o directivă de rezervă care se aplică atunci când alte directive mai specifice nu sunt definite.
• script-src: Specifică sursele permise pentru JavaScript.
• style-src: Specifică sursele permise pentru foile de stil CSS.
• img-src: Specifică sursele permise pentru imagini.
• font-src: Specifică sursele permise pentru fonturi.
• media-src: Specifică sursele permise pentru audio și video.
• object-src: Specifică sursele permise pentru plugin-uri, cum ar fi Flash. (În general, cel mai bine este să evitați permiterea plugin-urilor dacă este posibil).
• frame-src: Specifică sursele permise pentru cadre (iframe-uri).
• connect-src: Specifică sursele permise pentru solicitările de rețea (AJAX, WebSockets).
• base-uri: Restricționează adresele URL care pot fi utilizate într-un element <base>.
• form-action: Restricționează adresele URL la care pot fi trimise formulare.
• frame-ancestors: Specifică părinți valizi care pot încorpora o pagină folosind <frame>, <iframe>, <object>, <embed> sau <applet>. Această directivă oferă protecție împotriva Clickjacking.
• upgrade-insecure-requests: Instruiește agenții utilizator să trateze toate adresele URL nesigure ale unui site (încărcate prin HTTP) ca și cum ar fi fost înlocuite cu adrese URL sigure (încărcate prin HTTPS). Această directivă este destinată site-urilor web care sunt în curs de migrare de la HTTP la HTTPS.
• report-uri: Specifică o adresă URL la care browserul ar trebui să trimită rapoarte despre încălcările CSP. Depreciat în favoarea `report-to`.
• report-to: Specifică un nume de grup definit într-un antet `Report-To`. Acest lucru permite un control mai fin asupra raportării, inclusiv specificarea mai multor puncte finale de raportare.

Valorile sursă CSP

Valorile sursă definesc originile din care resursele au voie să fie încărcate. Unele valori sursă comune includ:

• *: Permite conținut din orice sursă (Evitați utilizarea acestuia în producție!).
• 'self': Permite conținut din aceeași origine (schemă, gazdă și port) ca și documentul protejat.
• 'none': Interzice conținut din orice sursă.
• 'unsafe-inline': Permite utilizarea JavaScript și CSS inline (Evitați utilizarea acestuia în producție!).
• 'unsafe-eval': Permite utilizarea evaluării dinamice a codului (de exemplu, eval(), Function()) (Evitați utilizarea acestuia în producție!).
• 'strict-dynamic': Specifică faptul că încrederea acordată explicit unui script prezent în marcaj, prin însoțirea acestuia cu un nonce sau un hash, va fi propagată tuturor scripturilor încărcate de acel strămoș.
• 'unsafe-hashes': Permite gestionarii de evenimente inline specifice. Acest lucru este în general descurajat datorită complexității sale și a beneficiilor limitate.
• data:: Permite încărcarea resurselor de la adrese URL de date (de exemplu, imagini încorporate). Utilizați cu precauție.
• mediastream:: Permite utilizarea URI-urilor `mediastream:` ca sursă media.
• blob:: Permite utilizarea URI-urilor `blob:` ca sursă media.
• filesystem:: Permite încărcarea resurselor dintr-un sistem de fișiere.
• https://example.com: Permite conținut de la un domeniu și un port specific.
• *.example.com: Permite conținut din orice subdomeniu al example.com.
• nonce-{random-value}: Permite scripturi sau stiluri cu un atribut nonce corespunzător. Acest lucru necesită generarea pe server a unei valori nonce aleatorii pentru fiecare solicitare.
• sha256-{hash-value}: Permite scripturi sau stiluri cu un hash SHA256, SHA384 sau SHA512 corespunzător.

Moduri CSP: Aplicare vs. Doar raportare

CSP poate fi implementat în două moduri:

• Modul de aplicare: În acest mod, browserul blochează orice resurse care încalcă CSP. Acesta este modul recomandat pentru mediile de producție. CSP este trimis utilizând antetul `Content-Security-Policy`.
• Modul Doar raportare: În acest mod, browserul raportează încălcările CSP, dar nu blochează resursele. Acest lucru este util pentru testarea și evaluarea unui CSP înainte de a-l aplica. CSP este trimis utilizând antetul `Content-Security-Policy-Report-Only`.

Implementarea CSP: Un ghid pas cu pas

Implementarea CSP poate părea descurajantă, dar urmând o abordare structurată, vă puteți securiza eficient aplicația web.

1. Începeți cu o politică Doar raportare

Începeți prin implementarea unui CSP în modul doar raportare. Acest lucru vă permite să monitorizați încălcările fără a perturba funcționalitatea site-ului dvs. web. Configurați directiva report-uri sau report-to pentru a trimite rapoarte de încălcare către un punct final desemnat.

Exemplu de antet (Doar raportare): Content-Security-Policy-Report-Only: default-src 'self'; report-uri /csp-report

2. Analizați rapoartele de încălcare

Analizați cu atenție rapoartele de încălcare pentru a identifica ce resurse sunt blocate și de ce. Acest lucru vă va ajuta să înțelegeți dependențele de resurse ale site-ului dvs. web și să identificați potențialele vulnerabilități de securitate.

Rapoartele de încălcare sunt de obicei trimise ca sarcini utile JSON către punctul final report-uri sau report-to configurat. Aceste rapoarte conțin informații despre încălcare, cum ar fi URI-ul blocat, directiva încălcată și URI-ul documentului.

3. Rafinați politica CSP

Pe baza rapoartelor de încălcare, rafinați-vă politica CSP pentru a permite resurse legitime, menținând în același timp o poziție de securitate puternică. Adăugați valori sursă specifice pentru resursele care sunt blocate. Luați în considerare utilizarea de nonces sau hash-uri pentru scripturi și stiluri inline pentru a evita utilizarea 'unsafe-inline'.

4. Trecerea la modul de aplicare

Odată ce sunteți sigur că politica dvs. CSP nu blochează resurse legitime, treceți la modul de aplicare. Acest lucru va bloca orice încălcări rămase și va oferi un strat robust de securitate împotriva atacurilor XSS.

Exemplu de antet (Aplicare): Content-Security-Policy: default-src 'self'; script-src 'self' https://example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

5. Monitorizați și mențineți politica CSP

CSP nu este o soluție de tip setează și uită. Este esențial să vă monitorizați continuu politica CSP și să o actualizați pe măsură ce site-ul dvs. web evoluează și apar noi amenințări de securitate. Revizuiți periodic rapoartele de încălcare și ajustați politica după cum este necesar.

Exemple practice de CSP

Să ne uităm la câteva exemple practice de CSP pentru diferite scenarii:

Exemplul 1: CSP de bază pentru un site web simplu

Acest CSP permite conținut din aceeași origine și permite imagini din orice sursă.

Content-Security-Policy: default-src 'self'; img-src *

Exemplul 2: CSP cu surse specifice de script și stil

Acest CSP permite scripturi din aceeași origine și dintr-un CDN specific și stiluri din aceeași origine și stiluri inline.

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

Exemplul 3: CSP cu Nonces pentru Scripturi Inline

Acest CSP necesită un nonce unic pentru fiecare script inline.

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

HTML:

<script nonce="r4nd0mn0nc3">console.log('Hello, world!');</script>

Important: Valoarea nonce trebuie să fie generată dinamic pe server pentru fiecare solicitare. Acest lucru împiedică atacatorii să reutilizeze nonce-ul.

Exemplul 4: CSP care restricționează strămoșii cadrului pentru a preveni Clickjacking

Acest CSP împiedică încorporarea paginii într-un iframe pe orice domeniu, cu excepția `https://example.com`.

Content-Security-Policy: frame-ancestors 'self' https://example.com

Exemplul 5: Un CSP mai restrictiv care utilizează „strict-dynamic” și o rezervă pentru „self”

Acest CSP utilizează `strict-dynamic` pentru browserele moderne, sprijinind în același timp browserele mai vechi care nu îl acceptă. De asemenea, include un `report-uri` pentru monitorizarea încălcărilor.

Content-Security-Policy: default-src 'self'; script-src 'strict-dynamic' 'nonce-{random-nonce}' 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report

Nu uitați să înlocuiți `{random-nonce}` cu o valoare nonce generată dinamic pe partea serverului.

CSP și aplicațiile cu o singură pagină (SPA)

Implementarea CSP în SPA-uri poate fi o provocare din cauza naturii dinamice a acestor aplicații. SPA-urile se bazează adesea foarte mult pe JavaScript pentru a genera și manipula DOM-ul, ceea ce poate duce la încălcări CSP dacă nu este tratat cu atenție.

Iată câteva sfaturi pentru implementarea CSP în SPA-uri:

• Evitați 'unsafe-inline' și 'unsafe-eval': Aceste directive ar trebui evitate ori de câte ori este posibil în SPA-uri. Ele slăbesc semnificativ securitatea aplicației dvs.
• Utilizați Nonces sau Hash-uri: Utilizați nonces sau hash-uri pentru scripturi și stiluri inline. Aceasta este abordarea recomandată pentru SPA-uri.
• Luați în considerare tipurile de încredere: Tipurile de încredere este un API browser care ajută la prevenirea vulnerabilităților XSS bazate pe DOM. Poate fi utilizat împreună cu CSP pentru a spori și mai mult securitatea.
• Utilizați un cadru compatibil cu CSP: Unele cadre frontend (cum ar fi React cu configurații specifice, Angular și Vue.js) oferă funcții care vă ajută să implementați CSP mai ușor.

Alte antete de securitate Frontend importante

În timp ce CSP este o piatră de temelie a securității frontend, alte antete joacă un rol crucial în furnizarea unei strategii de apărare cuprinzătoare:

Strict-Transport-Security (HSTS)

Antetul Strict-Transport-Security (HSTS) instruiește browserul să utilizeze întotdeauna HTTPS pentru a se conecta la site-ul web. Acest lucru previne atacurile man-in-the-middle care încearcă să retrogradeze conexiunea la HTTP.

Exemplu de antet: Strict-Transport-Security: max-age=31536000; includeSubDomains; preload

• max-age: Specifică durata (în secunde) pentru care browserul ar trebui să-și amintească să acceseze site-ul doar prin HTTPS. O valoare de 31536000 de secunde (1 an) este recomandată pentru mediile de producție.
• includeSubDomains: Indică faptul că politica HSTS se aplică tuturor subdomeniilor domeniului.
• preload: Permite includerea domeniului într-o listă de domenii compatibile cu HSTS, care este preîncărcată în browsere. Acest lucru necesită trimiterea domeniului dvs. la lista de preîncărcare HSTS menținută de Google.

X-Frame-Options

Antetul X-Frame-Options previne atacurile clickjacking controlând dacă site-ul web poate fi încorporat într-un iframe.

Exemplu de antet: X-Frame-Options: DENY

Valori posibile:

• DENY: Împiedică afișarea paginii într-un iframe, indiferent de origine.
• SAMEORIGIN: Permite afișarea paginii într-un iframe numai dacă originea iframe-ului se potrivește cu originea paginii.
• ALLOW-FROM uri: Permite afișarea paginii într-un iframe numai dacă originea iframe-ului se potrivește cu URI-ul specificat. Notă: Această opțiune este depreciată și este posibil să nu fie acceptată de toate browserele.

Notă: Directiva frame-ancestors din CSP oferă o modalitate mai flexibilă și mai puternică de a controla încadrarea și este în general preferată față de X-Frame-Options.

X-XSS-Protection

Antetul X-XSS-Protection activează filtrul XSS încorporat al browserului. În timp ce CSP este o soluție mai robustă pentru prevenirea atacurilor XSS, acest antet poate oferi un strat suplimentar de apărare, în special pentru browserele mai vechi care ar putea să nu accepte pe deplin CSP.

Exemplu de antet: X-XSS-Protection: 1; mode=block

• 1: Activează filtrul XSS.
• 0: Dezactivează filtrul XSS.
• mode=block: Instruiește browserul să blocheze pagina dacă este detectat un atac XSS.
• report=uri: Specifică o adresă URL la care browserul ar trebui să trimită un raport dacă este detectat un atac XSS.

Referrer-Policy

Antetul Referrer-Policy controlează cantitatea de informații de referință care este trimisă cu solicitările. Informațiile de referință pot fi utilizate pentru a urmări utilizatorii pe site-uri web, astfel încât controlul acesteia poate îmbunătăți confidențialitatea utilizatorilor.

Exemplu de antet: Referrer-Policy: strict-origin-when-cross-origin

Unele valori comune:

• no-referrer: Nu trimiteți niciodată antetul Referer.
• no-referrer-when-downgrade: Nu trimiteți antetul Referer către origini fără TLS (HTTPS).
• origin: Trimiteți numai originea (schemă, gazdă și port) în antetul Referer.
• origin-when-cross-origin: Trimiteți originea pentru solicitările cross-origin și adresa URL completă pentru solicitările same-origin.
• same-origin: Trimiteți antetul Referer pentru solicitările same-origin, dar nu pentru solicitările cross-origin.
• strict-origin: Trimiteți numai originea atunci când nivelul de securitate al protocolului rămâne același (HTTPS la HTTPS), dar nu trimiteți niciun antet către o destinație mai puțin sigură (HTTPS la HTTP).
• strict-origin-when-cross-origin: Trimiteți originea când efectuați o solicitare same-origin. Pentru solicitările cross-origin, trimiteți originea numai atunci când nivelul de securitate al protocolului rămâne același (HTTPS la HTTPS), dar nu trimiteți niciun antet către o destinație mai puțin sigură (HTTPS la HTTP).
• unsafe-url: Trimiteți adresa URL completă în antetul Referer, indiferent de origine. Utilizați cu extremă precauție, deoarece acest lucru poate expune informații sensibile.

Permissions-Policy (fostă Feature-Policy)

Antetul Permissions-Policy (cunoscut anterior ca Feature-Policy) permite dezvoltatorilor să activeze și să dezactiveze selectiv funcțiile și API-urile browserului. Acest lucru poate ajuta la reducerea suprafeței de atac a aplicației dvs. și la îmbunătățirea confidențialității utilizatorilor.

Exemplu de antet: Permissions-Policy: geolocation=()

Acest exemplu dezactivează API-ul de geolocalizare pentru site-ul web.

Alte caracteristici care pot fi controlate cu Permissions-Policy includ:

• camera
• microphone
• geolocation
• accelerometer
• gyroscope
• magnetometer
• usb
• midi
• payment
• fullscreen

Setarea antetelor de securitate pe diferite platforme

Metoda de setare a antetelor de securitate variază în funcție de serverul web sau de platforma pe care o utilizați. Iată câteva exemple comune:

Apache

Puteți seta antete de securitate în Apache adăugându-le la fișierul .htaccess sau la fișierul de configurare a serverului (httpd.conf).

Exemplu de configurație .htaccess:

<IfModule mod_headers.c>
 Header set Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report"
 Header set Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
 Header set X-Frame-Options "DENY"
 Header set X-XSS-Protection "1; mode=block"
 Header set Referrer-Policy "strict-origin-when-cross-origin"
</IfModule>

Nginx

Puteți seta antete de securitate în Nginx adăugându-le la blocul server din fișierul de configurare Nginx (nginx.conf).

Exemplu de configurație Nginx:

server {
 listen 443 ssl;
 server_name example.com;

 add_header Content-Security-Policy "default-src 'self'; script-src 'self' https://cdn.example.com; style-src 'self' 'unsafe-inline'; img-src 'self' data:; report-uri /csp-report";
 add_header Strict-Transport-Security "max-age=31536000; includeSubDomains; preload";
 add_header X-Frame-Options "DENY";
 add_header X-XSS-Protection "1; mode=block";
 add_header Referrer-Policy "strict-origin-when-cross-origin";

 ...
}

Node.js (Express)

Puteți seta antete de securitate în Node.js folosind middleware precum Helmet.

Exemplu folosind casca:

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

const app = express();

app.use(helmet());

// Personalizați CSP dacă este necesar
app.use(helmet.contentSecurityPolicy({
 directives: {
 defaultSrc: ["'self'"],
 scriptSrc: ["'self'", "https://cdn.example.com"],
 styleSrc: ["'self'", "'unsafe-inline'"],
 imgSrc: ["'self'", "data:"],
 reportUri: '/csp-report'
 },
}));

app.get('/', (req, res) => {
 res.send('Hello World!');
});

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

Cloudflare

Cloudflare vă permite să setați antete de securitate folosind regulile de pagină sau regulile de transformare.

Testarea antetelor dvs. de securitate

După implementarea antetelor de securitate, este esențial să le testați pentru a vă asigura că funcționează corect. Mai multe instrumente online vă pot ajuta să analizați antetele de securitate ale site-ului dvs. web:

• SecurityHeaders.com: Un instrument simplu și eficient pentru analizarea antetelor de securitate.
• Mozilla Observatory: Un instrument cuprinzător pentru testarea securității site-ului web, inclusiv antete de securitate.
• WebPageTest.org: Vă permite să vizualizați antetele HTTP în diagrama cascadei.

Concluzie

Antetele de securitate frontend, în special Content Security Policy (CSP), sunt esențiale pentru protejarea aplicațiilor web de diverse atacuri și pentru îmbunătățirea securității utilizatorilor. Prin implementarea și întreținerea atentă a acestor antete, puteți reduce semnificativ riscul de XSS, clickjacking și alte vulnerabilități de securitate. Nu uitați să începeți cu o politică doar de raportare, să analizați rapoartele de încălcare, să rafinați politica și apoi să treceți la modul de aplicare. Monitorizați și actualizați în mod regulat antetele de securitate pentru a menține site-ul dvs. web securizat pe măsură ce evoluează și apar noi amenințări.

Adoptând o abordare proactivă a securității frontend, puteți crea aplicații web mai sigure și mai fiabile, care vă protejează utilizatorii și afacerea.