iframe-beágyazás ellenőrző

Mi határozza meg, hogy egy oldal beágyazható-e?

Gyors útmutató: a válaszfejlécek beállításai

Ha a webhely az Öné, közvetlenül a válaszfejlécek segítségével irányíthatja az ágyazást.

Megjegyzés: A CSP frame-ancestors direktívája felülírja az X-Frame-Options-t. Ha mindkettő szerepel, a CSP érvényesül – így a frame-ancestors használata az ajánlott.

Hogyan észleli a szerver, hogy a kérés iframe-ből érkezik?

• Sec-Fetch-Dest: document – Elsődleges navigáció, nem helyezkedik el egyetlen keretelemen belül sem.
• Sec-Fetch-Dest: iframe – A kérés egy <iframe> elemen belül töltődik be.
• Sec-Fetch-Dest: frame – Betöltődik egy elavult <frame> (frameset) elemen belül.
• Sec-Fetch-Dest: embed / object – Betöltődik egy <embed> vagy <object> elemen belül.

Szerverkonfigurációs példák: iframe beágyazás letiltása

Az alábbi kód-részletek azt mutatják be, hogyan kell konfigurálni az egyes szervereket vagy keretrendszereket az iframe ágyazás teljes letiltásához (X-Frame-Options: DENY + CSP frame-ancestors 'none'). Ez a legmagasabb biztonságú módszer a fenti gyors útmutatóban szereplő lehetőségek közül.

server {
    location / {
        add_header X-Frame-Options "DENY" always;
        add_header Content-Security-Policy "frame-ancestors 'none'" always;
    }
}

<IfModule mod_headers.c>
    Header always set X-Frame-Options "DENY"
    Header always set Content-Security-Policy "frame-ancestors 'none'"
</IfModule>

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'DENY');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'none'");
  next();
});

// next.config.js
module.exports = {
  async headers() {
    return [
      {
        source: '/:path*',
        headers: [
          { key: 'X-Frame-Options', value: 'DENY' },
          { key: 'Content-Security-Policy', value: "frame-ancestors 'none'" },
        ],
      },
    ];
  },
};

class SetFrameOptions
{
    public function handle(Request $request, Closure $next): Response
    {
        $response = $next($request);
        $response->headers->set('X-Frame-Options', 'DENY');
        $response->headers->set('Content-Security-Policy', "frame-ancestors 'none'");

        return $response;
    }
}

export default {
  async fetch(request) {
    const response = await fetch(request);
    const headers = new Headers(response.headers);
    headers.set('X-Frame-Options', 'DENY');
    headers.set('Content-Security-Policy', "frame-ancestors 'none'");
    return new Response(response.body, { status: response.status, headers });
  },
};

Ha csak a saját webhelyét vagy egy rövid engedélyezési listát szeretné engedélyezni az ágyazáshoz? Cserélje ki a DENY-t SAMEORIGIN-re, a „none”-t pedig „self”-re (vagy egy konkrét lista a megengedett eredetekről) – a konfiguráció többi része változatlanul marad.

Ismert technikai buktatók

Az általános fejlécsszabályokon túlmenően számos közismert platformnak megvannak a sajátos sajátságai – érdemes ismeretre szerezned róla, mielőtt csupán a fejlécek alapján blokkoltnak vagy beágyazhatónak ítélnél egy oldalt.

Gyakori felhasználási esetek

• Döntsd el, hogy egy külső widget, műszerfal vagy dokumentum beágyazható-e a saját termékedbe, mielőtt az integrációs kód megírása neki kezdenél.
• Ellenőrizd, hogy a saját oldalad valóban a tervezett X-Frame-Options vagy CSP frame-ancestors politikát ad-e vissza.
• Clickjacking-védelem hibakeresése: derítse ki, miért jelenik meg egy oldal iframe-en belül about:blank címként vagy tiltóüzenetet.
• Jelölt URL-ek kötegelt ellenőrzése tartalomaggregálás vagy portálintegráció során, a munkamenet-előzmények használatával az eredmények későbbi visszakereséséhez.
• Biztonsági auditok vagy penetrációs tesztek előkészítése a külső függőségek keretrendezési (iframe) szabályzatának dokumentálásával.

GYIK