Έλεγχος ενσωμάτωσης iframe

Τι καθορίζει αν μια σελίδα μπορεί να ενσωματωθεί;

Γρήγορος οδηγός: ρύθμιση headers απόκρισης

Αν διαχειρίζεστε τον ιστότοπο, ελέγξτε την ενσωμάτωση σε iframe απευθείας μέσω των response headers.

Σημείωση: Το X-Frame-Options υποκαθίσταται από το CSP frame-ancestors. Όταν συνυπάρχουν, προτεραιότητα έχει το CSP — προτιμήστε το frame-ancestors.

Πώς αντιλαμβάνεται ο server ότι το αίτημα προέρχεται από iframe;

• Sec-Fetch-Dest: document — άμεση πλοήγηση κορυφαίου επιπέδου, όχι μέσα σε κάποιο frame.
• Sec-Fetch-Dest: iframe — το request φορτώνεται εντός στοιχείου <iframe>.
• Sec-Fetch-Dest: frame — φορτώνεται εντός παλιού <frame> (frameset).
• Sec-Fetch-Dest: embed / object — φορτώνεται εντός στοιχείου <embed> ή <object>.

Παραδείγματα διαμόρφωσης server: μπλοκάρισμα ενσωμάτωσης iframe

Τα παρακάτω αποσπάσματα δείχνουν πώς να διαμορφώσετε κάθε server ή framework ώστε να αποκλείσετε πλήρως την ενσωμάτωση σε iframe (X-Frame-Options: DENY + CSP frame-ancestors 'none') — η πιο αυστηρή ρύθμιση του παραπάνω γρήγορου οδηγού.

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

Χρειάζεται να επιτρέψετε μόνο τη δική σας ιστοσελίδα ή μια σύντομη λίστα επιτρεπόμενων (allow-list) αντί να μπλοκάρετε όλους τους επισκέπτες; Αντικαταστήστε το DENY με SAMEORIGIN, και το 'none' με 'self' ή μια ρητή λίστα προελεύσεων — η υπόλοιπη διαμόρφωση παραμένει αμετάβλητη.

Σημεία προσοχής σε γνωστές πλατφόρμες

Πέραν των γενικών κανόνων για τις κεφαλίδες HTTP, κάποιες καθιερωμένες πλατφόρμες παρουσιάζουν δικές τους ιδιαιτερότητες. Αξίζει να τις γνωρίζετε πριν υποθέσετε ότι κάτι είναι «αποκλεισμένο» ή «ενσωματώσιμο» βάσει μόνο των κεφαλίδων.

Συχνές χρήσεις

• Αποφασίστε αν ένα widget, πίνακα ελέγχου ή έγγραφο τρίτων μπορεί να ενσωματωθεί στο δικό σας προϊόν, πριν ξεκινήσετε τον κώδικα ενσωμάτωσης.
• Επαληθεύστε ότι ο δικός σας ιστότοπος αποστέλλει την πολιτική X-Frame-Options ή CSP frame-ancestors που είχατε ορίσει.
• Εντοπισμός σφαλμάτων στην προστασία από clickjacking: κατανοήστε γιατί μια σελίδα εμφανίζει about:blank ή μήνυμα άρνησης μέσα σε iframe.
• Ομαδικός έλεγχος υποψήφιων URL κατά τη συλλογή περιεχομένου ή την ενσωμάτωση πύλης, αξιοποιώντας το ιστορικό της συνεδρίας για επαναξιολόγηση των αποτελεσμάτων.
• Προετοιμαστείτε για κριτικές ασφαλείας ή δοκιμές διείσδυσης, τεκμηριώνοντας την πολιτική πλαισίωσης (framing) των εξωτερικών εξαρτήσεων.

Συχνές Ερωτήσεις