Conținut de marketing

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:

  1. Baza pe JavaScript: Dacă utilizatorul are JavaScript dezactivat, această metodă nu va funcționa.
  2. Î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ă.
  3. 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.
  4. 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:

  1. DENY – Pagina nu poate fi afișată într-un cadru, indiferent de site-ul care încearcă să facă acest lucru.
  2. SAMEORIGIN – Pagina poate fi afișată numai într-un cadru de aceeași origine cu pagina însăși.
  3. 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 SAMEORIGINHeader 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>

Douglas Karr

Douglas Karr este CMO al OpenINSIGHTS și fondatorul Martech Zone. Douglas a ajutat zeci de startup-uri de succes MarTech, a ajutat la due diligence de peste 5 miliarde de dolari în achiziții și investiții Martech și continuă să asiste companiile în implementarea și automatizarea strategiilor lor de vânzări și marketing. Douglas este un expert în transformare digitală recunoscut la nivel internațional și expert și vorbitor MarTech. Douglas este, de asemenea, un autor publicat al unui ghid pentru Dummie și al unei cărți de conducere în afaceri.

Articole pe aceeaşi temă

Înapoi la butonul de sus
Închide

Blocarea reclamelor a fost detectată

Martech Zone este în măsură să vă furnizeze acest conținut fără costuri, deoarece monetizăm site-ul nostru prin venituri din reclame, linkuri afiliate și sponsorizări. Am aprecia dacă ați elimina dispozitivul de blocare a reclamelor pe măsură ce vizualizați site-ul nostru.