Verifica incorporamento iframe

Cosa determina se una pagina può essere integrata?

Guida rapida: configurazione delle intestazioni di risposta

Se possiedi il sito, gestisci direttamente l'inserimento in frame tramite gli header di risposta.

Nota: X-Frame-Options è stato superato da frame-ancestors nella CSP. Quando sono presenti entrambi, prevale la CSP: preferisci frame-ancestors.

Come rileva il server che una richiesta proviene da un iframe?

• Sec-Fetch-Dest: document — navigazione di primo livello, non all'interno di alcun frame.
• Sec-Fetch-Dest: iframe — la richiesta viene caricata all'interno di un elemento <iframe>.
• Sec-Fetch-Dest: frame — caricato all'interno di un vecchio <frame> (frameset).
• Sec-Fetch-Dest: embed / object — caricato all'interno di un elemento <embed> o <object>.

Esempi di configurazione server: blocco integrazione iframe

Gli snippet seguenti mostrano come configurare ciascun server o framework per bloccare completamente l'inserimento negli iframe (X-Frame-Options: DENY + CSP frame-ancestors 'none'), ovvero l'impostazione più rigorosa indicata nella guida rapida precedente.

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 });
  },
};

Dev'essere consentito solo al tuo sito o a una breve lista bianca di inserire la pagina in un frame, invece di bloccare tutti? Sostituisci DENY con SAMEORIGIN, e 'none' con 'self' o un elenco esplicito di origini: il resto della configurazione rimane invariato.

Note e avvertenze note sulle piattaforme

Fatti salve le regole generali sugli header, alcune piattaforme affermate presentano proprie peculiarità — un dettaglio da conoscere prima di dedurre che una risorsa sia \"bloccata\" o \"integrabile\" basandosi esclusivamente sugli header.

Casi d'uso comuni

• Valuta se un widget, una dashboard o un documento di terze parti possa essere integrato nel tuo prodotto prima di sviluppare il codice di integrazione.
• Verifica che il tuo sito invii effettivamente la policy X-Frame-Options o CSP frame-ancestors da te impostata.
• Debug della protezione anti-clickjacking: comprendi perché una pagina visualizza `about:blank` o un messaggio di diniego all'interno di un iframe.
• Verifica in batch gli URL candidati durante l'aggregazione dei contenuti o l'integrazione di portali, sfruttando la cronologia delle sessioni per riesaminare i risultati.
• Preparati alle verifiche di sicurezza o ai penetration test documentando la politica di framing delle dipendenze esterne.

Domande frequenti (FAQ)