Iframe Breaking: Cum să opriți încadrarea neautorizată în iframe a conținutului dvs
Un vizitator al site-ului meu m-a informat odată când a făcut clic pe unul dintre linkurile mele de pe Twitter; a fost adus pe site-ul meu cu un pop-up mare și un avertisment de cod rău intenționat. Este suficient pentru a speria pe cineva, așa că am început să fac niște teste. Nu a fost nimic în neregulă cu site-ul meu – problema a fost linkul.
Linkul de pe un alt site a produs o bară de instrumente în sus, care a încurajat oamenii să facă clic pe un link rău intenționat în timp ce încărcau site-ul meu într-un iframe dedesubt. Pentru majoritatea oamenilor, site-ul meu ar putea părea că răspândește cod rău intenționat. N-aș spune că îmi place orice site care îmi încarcă site-ul într-un iframe, așa că am făcut ceea ce ar face orice tocilar rezonabil... Am încărcat un frame breaker.
Iframing site-ul dvs. nu este întotdeauna rău intenționat, totuși. Am distribuit recent un instrument, Sniply, pentru a adăuga un îndemn (CTA) către orice link de site pe care îl distribuiți. Face acest lucru prin încorporarea întregului site într-un iframe și aplicând div peste conținutul dvs. cu îndemnul.
Dar sunt destul de precis în ceea ce privește conținutul meu și efortul pe care l-am depus Martech Zone, așa că nu vreau ca nimeni să-mi încadreze conținutul, chiar și cu o platformă de link-share. Făcând unele cercetări, există destul de multe moduri de a gestiona acest lucru.
Cum să opriți încadrarea conținutului dvs. cu JavaScript
Acest cod JavaScript verifică dacă fereastra curentă (self
) nu este cea mai sus fereastră (top
). Dacă nu este, aceasta înseamnă că pagina este într-un cadru, iframe sau similar, iar scriptul redirecționează fereastra cea mai de sus către URL-ul a ferestrei curente. Acest lucru eficient izbucnește a iframe-ului.
<script type='text/javascript'>
if (top !== self) top.location.href = self.location.href;
</script>
Există mai multe dezavantaje ale acestei abordări:
- Baza pe JavaScript: Dacă utilizatorul are JavaScript dezactivat, această metodă nu va funcționa.
- Întârzieri: poate exista o ușoară întârziere înainte de execuția JavaScript, timp în care versiunea încadrată a site-ului dvs. ar putea fi în continuare vizibilă.
- Restricții între origini: În unele situații, Politica Aceeași Origine poate împiedica acest script să funcționeze conform intenției. Dacă documentul părinte se află pe un alt domeniu, este posibil să nu poată fi accesat
top.location.href
. - Potențial pentru Frame-Busting-Busters: Există, de asemenea, scripturi (numite frame-busting-busters) care pot împiedica funcționarea scripturilor frame-busting.
Cea mai bună abordare este utilizarea antetelor de răspuns HTTP.
Opțiuni-X-Frame și Politică-Securitate-Conținut
Ambele X-Frame-Options
și Content-Security-Policy
(CSP) sunt antete de răspuns HTTP utilizate pentru a spori securitatea unui site web. Fiecare servește unor scopuri ușor diferite și au niveluri diferite de flexibilitate.
X-Frame-Options
este un antet HTTP mai vechi conceput special pentru a controla dacă site-ul dvs. poate fi încorporat într-un <frame>
, <iframe>
, <embed>
, Sau <object>
pe alt site. Are trei directive posibile:
DENY
– Pagina nu poate fi afișată într-un cadru, indiferent de site-ul care încearcă să facă acest lucru.SAMEORIGIN
– Pagina poate fi afișată numai într-un cadru de aceeași origine cu pagina însăși.ALLOW-FROM uri
– Pagina poate fi afișată numai într-un cadru la originea specificată.
"Dar daca X-Frame-Options
este limitat prin faptul că nu poate gestiona scenarii mai complexe, cum ar fi permiterea încadrării din mai multe origini diferite sau utilizarea metacaracterelor pentru subdomenii. Nu toate browserele acceptă ALLOW-FROM
directivă.
Content-Security-Policy
, pe de altă parte, este un antet HTTP mult mai flexibil și mai puternic. În timp ce poate face totul X-Frame-Options
poate face și multe altele, scopul său principal este de a preveni o gamă largă de atacuri de injectare de cod, inclusiv scripturi între site-uri (XSS) și clickjacking. Funcționează prin specificarea unei liste albe de surse de conținut de încredere (scripturi, stiluri, imagini etc.).
Pentru controlul cadrelor, CSP folosește frame-ancestors
directivă. Puteți specifica mai multe surse, inclusiv mai multe domenii și subdomenii wildcard. Iată un exemplu:
cssCopy codeContent-Security-Policy: frame-ancestors 'self' yourdomain.com *.domain2.com;
Acest lucru ar permite ca pagina să fie încadrată pe propriul site ('self'
), pe yourdomain.com
, și pe orice subdomeniu al domain2.com
.
CSP este recomandat ca înlocuitor pentru X-Frame-Options
, deoarece se poate descurca cu totul X-Frame-Options
pot face și multe altele. În timp ce majoritatea browserelor moderne acceptă CSP, ar putea exista totuși unele browsere vechi sau mai puțin obișnuite care nu îl acceptă pe deplin.
Cum să opriți încadrarea conținutului dvs. cu HTML
Există acum o metaetichetă Content-Security-Policy care poate fi implementată și care dezactivează capacitatea de a-ți încadra conținutul:
<meta http-equiv="Content-Security-Policy" content="frame-ancestors 'self' yourdomain.com">
Eficacitatea metaetichetei HTML este limitată deoarece nu toate browserele respectă Content-Security-Policy
când se setează folosind o metaetichetă.
Cum să opriți încadrarea conținutului dvs. cu anteturi HTTP
Este mai bine să folosiți antetele HTTP X-Frame-Options
or Content-Security-Policy
pentru a controla încadrarea. Aceste opțiuni sunt mai fiabile și mai sigure și funcționează chiar dacă JavaScript este dezactivat. Metoda JavaScript ar trebui folosită doar ca ultimă soluție dacă nu aveți control asupra serverului pentru a seta antetele HTTP. Pentru fiecare exemplu, înlocuiți yourdomain.com
cu domeniul dvs. real.
Apache – Modificați-vă .htaccess
fișier după cum urmează:
Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' yourdomain.com"
nginx – Modificați blocul de server după cum urmează:
add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' yourdomain.com";
IIS – faceți acest lucru adăugând următoarele la dvs web.config
fișier:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="frame-ancestors 'self' yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
WordPress – faceți acest lucru adăugând acest cod în fișierul dumneavoastră functions.php:
function add_security_headers() {
header('X-Frame-Options: SAMEORIGIN');
header("Content-Security-Policy: frame-ancestors 'self' yourdomain.com");
}
add_action('send_headers', 'add_security_headers');
Aceste configurații vor permite ca pagina dvs. să fie încorporată în iframe doar pe domeniul exact pe care îl specificați, nu pe niciun subdomeniu de domeniu. Dacă doriți să permiteți anumite subdomenii, va trebui să le enumerați în mod explicit, cum ar fi subdomain1.yourdomain.com
subdomain2.yourdomain.com
, Și așa mai departe.
Permiteți încadrarea conținutului dvs. din mai multe domenii
Puteți specifica mai multe domenii cu antetul de răspuns HTTP Content-Security-Policy și directiva frame-ancestors. Un spațiu ar trebui să separe fiecare domeniu. Iată un exemplu:
Content-Security-Policy: frame-ancestors 'self' domain1.com domain2.com domain3.com;
Apache – Modificați-vă .htaccess
fișier după cum urmează:
Header always set X-Frame-Options SAMEORIGIN
Header always set Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com"
nginx – Modificați blocul de server după cum urmează:
add_header X-Frame-Options SAMEORIGIN;
add_header Content-Security-Policy "frame-ancestors 'self' domain1.com domain2.com domain3.com";
IIS – faceți acest lucru adăugând următoarele la dvs web.config
fișier:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-Frame-Options" value="SAMEORIGIN" />
<add name="Content-Security-Policy" value="frame-ancestors 'self' domain1.com domain2.com domain3.com" />
</customHeaders>
</httpProtocol>
</system.webServer>
Permiteți încadrarea conținutului dvs. dintr-un domeniu wildcard
De asemenea, puteți specifica un wildcard pentru toate subdomeniile cu Content-Security-Policy
Antetul răspunsului HTTP și directiva frame-ancestors. Iată exemple de Content-Security-Policy
cod care trebuie actualizat:
Content-Security-Policy: frame-ancestors 'self' *.yourdomain.com;
Apache – Modificați-vă .htaccess
fișier după cum urmează:
Header always set Content-Security-Policy "frame-ancestors 'self' *.yourdomain.com"
nginx – Modificați blocul de server după cum urmează:
add_header Content-Security-Policy "frame-ancestors 'self' *.domain1.com *.domain2.com *.domain3.com";
IIS – faceți acest lucru adăugând următoarele la dvs web.config
fișier:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Content-Security-Policy" value="frame-ancestors 'self' *.yourdomain.com" />
</customHeaders>
</httpProtocol>
</system.webServer>