Protejarea site-ului dvs. cu politica de funcții

Una dintre caracteristicile platformei web evidențiate la recentul Chrome Dev Summit a fost Feature Policy, care urmărește „să permită autorilor site-urilor să activeze și să dezactiveze selectiv utilizarea diferitelor funcții de browser și API-uri”. În acest articol, voi arunca o privire la ce înseamnă asta pentru dezvoltatorii web, cu câteva exemple practice.

În articolul său introductiv pe site-ul Google Developers, Eric Bidelman descrie Politica caracteristicilor astfel:

„Politicile caracteristicilor în sine sunt mici acorduri de înscriere între dezvoltator și browser care ne pot ajuta să ne promovăm obiectivele de a construi (și menține) aplicații web de înaltă calitate.”

Specificația a fost dezvoltată de Google ca parte a activității Web Platform Incubator Group. Scopul Politicii privind funcțiile este ca noi, în calitate de dezvoltatori web, să putem declara utilizarea de către noi a unei caracteristici a platformei web, în ​​mod explicit browserului. Procedând astfel, încheiem un acord cu privire la utilizarea sau neutilizarea acestei caracteristici specifice. Pe baza acestui lucru, browserul poate acționa pentru a bloca anumite funcții sau ne poate raporta că este utilizată o funcție pe care nu se aștepta să o vadă.

Exemplele ar putea include:

1. Încorporez un iframe și nu vreau ca site-ul încorporat să poată accesa camera vizitatorului meu;
2. Vreau să prind situații în care imagini neoptimizate sunt implementate pe site-ul meu prin intermediul CMS;
3. Există mulți dezvoltatori care lucrează la proiectul meu și aș dori să știu dacă folosesc API-uri învechite, cum ar fi document.write .

Toate aceste lucruri pot fi urmărite, blocate sau raportate ca parte a Politicii caracteristicilor.

Cum să utilizați Politica privind funcțiile

Pentru a utiliza Politica caracteristicilor, browserul trebuie să știe două lucruri: pentru ce caracteristică creați o politică și cum doriți să fie gestionată această caracteristică.

 Feature-Policy: <directive> <allowlist>

<directive> este numele caracteristicii pe care setați politica.

Lista actuală de funcții (sursă din prezentarea oferită la Chrome Dev Summit) este următoarea:

• accelerometru
• senzor de lumină ambientală
• Redare automata
• aparat foto
• document-scriere
• media criptată
• ecran complet
• geolocalizare
• giroscop
• layout-animatii
• sarcină leneșă
• formate-imagini moștenite
• magnetometru
• midi
• imagini supradimensionate
• plată
• imagine în imagine
• vorbitor
• sincronizare-script
• sincronizare-xhr
• imagini neoptimizate
• unsized-media
• USB
• vertical-defilare
• vr

<allowlist> detaliază modul în care funcția poate fi utilizată – dacă este deloc – și ia una sau mai multe dintre următoarele valori.

• *
  Cea mai liberală politică, care afirmă că caracteristica va fi permisă în acest document și orice iframe, fie din acest domeniu, fie din altă parte. Poate fi folosit doar ca valoare unică, deoarece nu are sens să activați totul și să treceți și o listă de domenii, de exemplu.
• self
  Caracteristica va fi disponibilă în document și în orice iframe, cu toate acestea, iframe-urile trebuie să aibă aceeași origine.
• src
  Se aplică numai atunci când utilizați un atribut iframe allow . Acest lucru permite o caracteristică atâta timp cât documentul încărcat în ea provine de la aceeași origine cu adresa URL din atributul src al iframe-ului.
• none
  Dezactivează funcția pentru document și orice iframe imbricate. Poate fi folosit doar ca valoare unică.
• <origin(s)>
  Caracteristica este permisă pentru origini specifice; aceasta înseamnă că puteți specifica o listă de domenii în care funcția este permisă. Lista de domenii este separată prin spațiu.

Există două metode prin care puteți activa politicile de caracteristici pe site-ul dvs.: puteți trimite un antet HTTP sau puteți utiliza atributul allow pe un iframe.

Antet HTTP

Trimiterea unui antet HTTP înseamnă că puteți activa o politică de caracteristici pentru pagina sau întregul site, setând acel antet și, de asemenea, orice lucru încorporat în site. Anteturile pot fi setate pentru întregul site pe serverul web sau pot fi trimise din aplicația dvs.

De exemplu, dacă doream să împiedic utilizarea API-ului de localizare geografică și foloseam serverul web NGINX, aș putea edita fișierele de configurare pentru site-ul meu în NGINX pentru a adăuga următorul antet, care ar împiedica orice document de pe site-ul meu și orice iframe încorporat din utilizarea API-ului de localizare geografică.

 add_header Feature-Policy "geolocation none;";

Mai multe politici pot fi setate într-un singur antet. Pentru a preveni geolocalizarea și vibrația, dar pentru a permite unsized-media din domeniul example.com , aș putea seta următoarele:

 add_header Feature-Policy "vibrate none; geolocation none; unsized-media https://example.com;";

Atributul allow pe iFrame

Dacă suntem preocupați în primul rând de ceea ce se întâmplă cu conținutul dintr-un iframe, putem folosi Politica de caracteristici pe iframe în sine; aceasta beneficiază de un suport ușor mai bun pentru browser la momentul scrierii, Chrome și Safari acceptând această utilizare.

Dacă încorporez un site și nu vreau ca acel site să folosească API-uri de localizare geografică, cameră sau microfon, atunci iframe-ul meu ar arăta ca următorul exemplu:

 <iframe allow="geolocation 'none'; camera 'none'; microphone 'none'">

Este posibil să fiți deja familiarizați cu atributele individuale care controlează conținutul cadrelor iframe allowfullscreen , allowpaymentrequest și allowusermedia . Acestea pot fi înlocuite cu atributul Feature Policy allow și, din motive de compatibilitate cu browserul, le puteți folosi pe ambele pe un iframe. Dacă folosiți ambele atribute, atunci se va aplica cel mai restrictiv. Articolul Google arată un exemplu de iframe care utilizează allowfullscreen - ceea ce înseamnă că iframe-ului i se permite să intre pe ecran complet, dar apoi o politică de funcții conflictuală de fullscreen none . Acestea sunt în conflict, astfel încât politica cea mai restrictivă câștigă și acest iframe nu ar avea voie să intre pe ecran complet.

 <iframe allowfullscreen allow="fullscreen 'none'" src="...">

Elementul iframe are, de asemenea, un atribut sandbox conceput pentru a gestiona suportul pentru multe funcții. Această caracteristică a fost adăugată și la Politica de securitate a conținutului cu o valoare sandbox care dezactivează toate funcțiile sandbox, care pot fi apoi reactivate selectiv. Există o oarecare încrucișare între funcțiile sandbox și cele controlate de Feature Policy, iar Feature Policy nu încearcă să dubleze acele valori deja acoperite de sandbox. Cu toate acestea, abordează unele dintre limitările sandbox-ului adoptând o abordare mai precisă a gestionării acestor politici, mai degrabă decât una de dezactivare a totul la nivel global ca un set mare de politici.

Politica și API-ul de raportare pentru funcții

Încălcările politicii privind funcțiile pot fi raportate prin API-ul de raportare, ceea ce înseamnă că puteți dezvolta un set cuprinzător de politici de urmărire a utilizării funcțiilor pe site-ul dvs. Acest lucru ar fi complet transparent pentru utilizatorii dvs., dar vă va oferi o cantitate imensă de informații despre modul în care au fost utilizate funcțiile.

Asistență pentru browser pentru politica privind funcțiile

În prezent, suportul browserului pentru Politica de funcții este limitat la Chrome, cu toate acestea, în multe cazuri în care utilizați Politica de funcționalitate în timpul dezvoltării și când previzualizați site-urile, aceasta nu este neapărat o problemă.

Multe dintre cazurile de utilizare pe care le voi schița mai jos sunt utilizabile chiar acum, fără a provoca niciun impact asupra vizitatorilor site-ului care folosesc browsere fără suport.

Când să utilizați politica privind funcțiile

Îmi place foarte mult ideea de a putea folosi Politica privind funcțiile pentru a ajuta la susținerea deciziilor luate la dezvoltarea site-ului. Decizii care pot fi foarte bine înscrise în documente, cum ar fi un buget de performanță sau ca parte a unui audit GDPR, dar care apoi devin ceva ce trebuie să ne amintim să păstrăm pe toată durata de viață a site-ului. Acest lucru nu este întotdeauna ușor atunci când mai multe persoane lucrează pe un site; oameni care probabil nu au fost implicați în timpul luării deciziei inițiale sau care pur și simplu nu sunt conștienți de cerințe. Ne gândim mult la faptul că terții reușesc să influențeze cumva site-ul nostru, totuși, uneori, site-urile noastre trebuie protejate de noi înșine!

Urmărirea terților

Puteți împiedica un site terță parte să acceseze camera sau microfonul utilizând o politică de caracteristici pe iframe cu atributul allow . Dacă motivul pentru încorporarea acelui site nu are nimic de-a face cu acele caracteristici, atunci dezactivarea lor înseamnă că site-ul nu poate începe niciodată să le ceară. Acest lucru ar putea fi apoi legat de procesele dvs. pentru asigurarea conformității GDPR. Pe măsură ce auditați impactul asupra confidențialității site-ului dvs., puteți integra procese pentru blocarea accesului terților prin intermediul politicii de funcții - oferindu-vă și vizitatorilor dvs. securitate suplimentară și liniște sufletească.

Această utilizare se bazează pe suportul browserului pentru Politica caracteristicilor pentru a bloca utilizarea. Cu toate acestea, puteți utiliza modul de raportare a Politicii caracteristicilor pentru a vă informa despre utilizarea acestor API-uri dacă terța parte a schimbat ceea ce ar fi făcut. Acest lucru vă va oferi o informație foarte rapidă - în esență, de îndată ce prima persoană care folosește Chrome ajunge pe site.

Activarea selectivă a funcțiilor

De asemenea, ar putea dori să activăm selectiv unele funcții care sunt în mod normal blocate. Poate dorim să permitem unui iframe care încărcă conținut de pe alt site să folosească funcția de geolocalizare din browser. Chrome blochează în mod prestabilit acest lucru, dar dacă încărcați conținut de pe un site de încredere, puteți activa solicitarea cu origini încrucișate folosind Politica privind funcțiile. Aceasta înseamnă că puteți activa în siguranță funcțiile atunci când încărcați conținut de pe un alt domeniu care se află sub controlul dvs.

Obținerea utilizării API-urilor învechite și a funcțiilor cu performanțe slabe

Politica de funcții poate fi executată într-un mod doar de raportare. Apoi poate urmări utilizarea anumitor funcții și vă poate anunța când sunt găsite pe site. Acest lucru poate fi util în multe scenarii. Dacă aveți un site foarte mare, cu mult cod vechi, activarea Politicii caracteristicilor vă va ajuta să găsiți locurile care necesită atenție. Dacă lucrați cu o echipă mare (mai ales dacă dezvoltatorii atrag adesea niște biblioteci de cod terțe), Politica caracteristicilor poate prinde lucruri pe care preferați să nu le vedeți pe site.

Gestionarea imaginilor slab optimizate

În timp ce majoritatea articolelor pe care le-am văzut despre Politica caracteristicilor se concentrează pe aspectele de securitate și confidențialitate, caracteristicile din jurul optimizării imaginii m-au atras cu adevărat, ca cineva care se ocupă cu mult conținut generat de utilizatori tehnici și non-tehnici. Politica privind funcțiile poate fi utilizată pentru a proteja experiența utilizatorului, precum și performanța site-ului dvs., împiedicând descărcarea de către vizitatori a imaginilor prea mari sau neoptimizate.

Într-o lume ideală, CMS-ul tău s-ar ocupa de gestionarea imaginilor, asigurându-se că imaginile au fost redimensionate în mod sensibil, optimizate pentru web și pentru contextul în care vor fi afișate. Viața reală este rareori acea lume ideală, totuși, și așadar, uneori, sarcina de a redimensiona iar optimizarea imaginilor este lăsată pe seama editorilor de conținut pentru a se asigura că nu încarcă imagini uriașe pe web. Aceasta este o problemă în special dacă utilizați un CMS static fără un strat de gestionare a conținutului pe deasupra. Chiar și ca persoană tehnică, este foarte ușor să uiți să redimensionezi acea captură de ecran gigantică sau imaginea camerei pe care ai introdus-o într-un folder ca substituent.

În prezent, în spatele unui steag în Chrome se află funcții care pot ajuta. Ideea din spatele acestor caracteristici este de a evidenția imaginile problematice, astfel încât să poată fi remediate - fără a sparge complet site-ul.

Politica privind caracteristicile unsized-media caută imagini sau videoclipuri care nu au o dimensiune setată în HTML sau CSS. Când se încarcă un element media nedimensionat, acesta poate cauza redistribuirea conținutului de pe pagină.

Pentru a preveni adăugarea de conținut media nedimensionat pe site, setați următorul antet. Media vor fi apoi afișate cu o dimensiune implicită de 300×150 pixeli. Veți vedea că site-ul dvs. se încarcă cu medii mici și veți realiza că aveți o problemă de rezolvat.

 Feature-Policy: unsized-media 'none'

Vedeți o demonstrație (are nevoie de Chrome Canary cu funcțiile platformei web experimentale activate).

Politica caracteristicii oversized-images verifică dacă imaginile nu sunt mult mai mari decât containerul lor. Dacă sunt, va fi afișat un substituent. Această politică este incredibil de utilă pentru a verifica dacă nu trimiteți imagini uriașe de pe desktop utilizatorilor dvs. de telefonie mobilă.

 Feature-Policy: oversized-images 'none'

Vedeți o demonstrație (are nevoie de Chrome Canary cu funcțiile platformei web experimentale activate).

Politica privind caracteristicile unoptimized-images verifică dacă dimensiunea datelor imaginilor în octeți nu este de 0,5 ori mai mare decât aria sa de randare în pixeli. Dacă această politică este activată și imaginile o încalcă, va fi afișat un substituent în locul imaginii.

 Feature-Policy: unoptimized-images 'none'

Vedeți o demonstrație (are nevoie de Chrome Canary cu funcțiile platformei web experimentale activate).

Testarea și raportarea asupra politicii caracteristicilor

Chrome DevTools va afișa un mesaj pentru a vă informa că anumite funcții au fost blocate sau activate de o Politică privind funcțiile. Dacă ați activat Politica caracteristicilor pe site-ul dvs., puteți verifica dacă aceasta funcționează.

Suport pentru Politica de caracteristici a fost adăugat și pe site-ul Antete de securitate, ceea ce înseamnă că le puteți verifica împreună cu antete precum Politica de securitate a conținutului de pe site-ul dvs. sau de pe alte site-uri de pe web.

Există o extensie Chrome DevTools care vă permite să activați și să dezactivați diferite politici de funcții (de asemenea, o modalitate excelentă de a vă verifica paginile fără a fi nevoie să configurați niciun antet).

Dacă doriți să intrați în integrarea politicilor dvs. de caracteristici cu API-ul de raportare, atunci există mai multe informații despre cum să faceți acest lucru aici.

Lectură suplimentară și resurse

Am găsit o serie de resurse, dintre care multe le-am folosit când am cercetat acest articol. Acestea ar trebui să vă ofere tot ceea ce aveți nevoie pentru a începe implementarea Politicii caracteristicilor în propriile aplicații. Dacă utilizați deja Politica de securitate a conținutului, acesta pare un pas logic suplimentar spre controlul modului în care site-ul dvs. funcționează cu browserul pentru a asigura securitatea și confidențialitatea persoanelor care vă folosesc site-ul. Aveți avantajul suplimentar de a putea folosi Politica privind funcțiile pentru a vă ajuta să fiți la curent cu elementele care dăunează performanței care sunt adăugate pe site-ul dvs. în timp.

• Specificația politicii caracteristicilor
• Prezentarea politicii caracteristicilor
• Vedere din Chrome Dev Summit
• Politica caracteristicilor pe MDN
• Pot folosi Politica privind funcțiile
• Politica de funcții Demo
• Configurați anteturile pentru Politica de funcții, Politica de referință și Politica de securitate a conținutului în Nginx