Πώς να εφαρμόσετε ασφαλείς κεφαλίδες χρησιμοποιώντας το Cloudflare Workers;

Ένας οδηγός βήμα προς βήμα για την εφαρμογή ασφαλών κεφαλίδων HTTP σε ιστότοπους που υποστηρίζονται από το Cloudflare χρησιμοποιώντας το Cloudflare Workers.

Υπάρχουν πολλοί τρόποι για την εφαρμογή κεφαλίδων απόκρισης HTTP για την ασφάλεια των τοποθεσιών από κοινά τρωτά σημεία, όπως XSS, Clickjacking, sniffing MIMI, injection μεταξύ τοποθεσιών και πολλά άλλα. Είναι ευρέως διαδεδομένη πρακτική και συνιστάται από OWASP.

Προηγουμένως, έγραψα σχετικά με την εφαρμογή κεφαλίδων σε έναν διακομιστή ιστού όπως ο Apache, ο Nginx και ο IIS. Ωστόσο, εάν χρησιμοποιείτε το Cloudflare για την προστασία και την υπερφόρτιση των τοποθεσιών σας, μπορείτε να επωφεληθείτε από αυτό Cloudflare Workers για να χειριστείτε τις κεφαλίδες απόκρισης HTTP.

Το Cloudflare Workers είναι μια πλατφόρμα χωρίς διακομιστή όπου μπορείτε να εκτελέσετε κώδικα JavaScript, C, C++, Rust. Αναπτύσσεται σε κάθε κέντρο δεδομένων Cloudflare, το οποίο είναι πάνω από 200 παγκοσμίως.

Η υλοποίηση είναι πολύ απλή και ευέλικτη. Σας δίνει την ευελιξία να εφαρμόσετε τις κεφαλίδες σε ολόκληρο τον ιστότοπο, συμπεριλαμβανομένου του υποτομέα ή συγκεκριμένου URI με ταιριαστό μοτίβοn χρησιμοποιώντας Regex.

  Είναι η Πιστοποίηση Conversation Designer κατάλληλη για εσάς;

Για αυτήν την επίδειξη, θα χρησιμοποιήσω το κώδικας από τον Scott Helme.

Ας ξεκινήσουμε…👨‍💻

  • Αντιγράψτε τον κώδικα worker.js από GitHub και επικολλήστε στο πρόγραμμα επεξεργασίας σεναρίων
const securityHeaders = {
        "Content-Security-Policy": "upgrade-insecure-requests",
        "Strict-Transport-Security": "max-age=1000",
        "X-Xss-Protection": "1; mode=block",
        "X-Frame-Options": "DENY",
        "X-Content-Type-Options": "nosniff",
        "Referrer-Policy": "strict-origin-when-cross-origin"
    },
    sanitiseHeaders = {
        Server: ""
    },
    removeHeaders = [
        "Public-Key-Pins",
        "X-Powered-By",
        "X-AspNet-Version"
    ];

async function addHeaders(req) {
    const response = await fetch(req),
        newHeaders = new Headers(response.headers),
        setHeaders = Object.assign({}, securityHeaders, sanitiseHeaders);

    if (newHeaders.has("Content-Type") && !newHeaders.get("Content-Type").includes("text/html")) {
        return new Response(response.body, {
            status: response.status,
            statusText: response.statusText,
            headers: newHeaders
        });
    }

    Object.keys(setHeaders).forEach(name => newHeaders.set(name, setHeaders[name]));

    removeHeaders.forEach(name => newHeaders.delete(name));

    return new Response(response.body, {
        status: response.status,
        statusText: response.statusText,
        headers: newHeaders
    });
}

addEventListener("fetch", event => event.respondWith(addHeaders(event.request)));

Μην αποθηκεύσετε ακόμα? μπορεί να θέλετε να προσαρμόσετε τις ακόλουθες κεφαλίδες για να ικανοποιήσετε την απαίτηση.

Content-Security-Policy – ​​εάν χρειάζεται να εφαρμόσετε την πολιτική της αίτησής σας, μπορείτε να το κάνετε εδώ.

Για παράδειγμα, εάν χρειάζεται να προμηθεύεστε περιεχόμενο μέσω του iFrame σε πολλαπλές διευθύνσεις URL, τότε μπορείτε να επωφεληθείτε από τους προγόνους των πλαισίων όπως παρακάτω.

"Content-Security-Policy" : "frame-ancestors 'self' gf.dev grtechpc.org.com",

Τα παραπάνω θα επιτρέψουν τη φόρτωση του περιεχομένου από τον ιστότοπο gf.dev, grtechpc.org.com και από τον ίδιο τον ιστότοπο.

  Πώς να αναγνωρίσετε ένα άγνωστο σύμβολο σχεδιάζοντας το

X-Frame-Options – μπορείτε να αλλάξετε σε SAMEORIGIN εάν σκοπεύετε να εμφανίσετε το περιεχόμενο του ιστότοπού σας σε κάποια σελίδα στον ίδιο ιστότοπο χρησιμοποιώντας το iframe.

"X-Frame-Options": "SAMEORIGIN",

Διακομιστής – μπορείτε να απολυμάνετε την κεφαλίδα του διακομιστή εδώ. Βάλε ό,τι σου αρέσει.

"Server" : "grtechpc.org Server",

RemoveHeaders – χρειάζεται να αφαιρέσετε κάποιες κεφαλίδες για να αποκρύψετε τις εκδόσεις για να μετριαστεί η ευπάθεια διαρροής πληροφοριών;

Μπορείτε να το κάνετε εδώ.

let removeHeaders = [
	"Public-Key-Pins",
	"X-Powered-By",
	"X-AspNet-Version",
]

Προσθήκη νέων κεφαλίδων – εάν χρειάζεται να μεταβιβάσετε ορισμένες προσαρμοσμένες κεφαλίδες στις εφαρμογές σας, μπορείτε να τις προσθέσετε στην ενότητα SecurityHeaders όπως παρακάτω.

let securityHeaders = {
	"Content-Security-Policy" : "frame-ancestors 'self' gf.dev grtechpc.org.com",
	"Strict-Transport-Security" : "max-age=1000",
	"X-Xss-Protection" : "1; mode=block",
	"X-Frame-Options" : "SAMEORIGIN",
	"X-Content-Type-Options" : "nosniff",
	"Referrer-Policy" : "strict-origin-when-cross-origin",
        "Custom-Header"  : "Success",
}

Μόλις ολοκληρώσετε την προσαρμογή όλων των κεφαλίδων που χρειάζεστε, ονομάστε τον εργαζόμενο και κάντε κλικ στην επιλογή Αποθήκευση και ανάπτυξη.

Μεγάλος! ο εργαζόμενος είναι έτοιμος και, στη συνέχεια, πρέπει να το προσθέσουμε στον ιστότοπο όπου θέλετε να εφαρμόσετε τις κεφαλίδες. Θα το εφαρμόσω στην τοποθεσία του εργαστηρίου μου.

  • Μεταβείτε στο σπίτι/πίνακας ελέγχου Cloudflare και επιλέξτε τον ιστότοπο.
  • Μεταβείτε στην καρτέλα Εργαζόμενοι >> Προσθήκη διαδρομής.
  • Εισαγάγετε τη διεύθυνση URL στη διαδρομή. μπορείτε να εφαρμόσετε το Regex εδώ.
  • Επιλέξτε τους νέους εργαζόμενους και Αποθήκευση
  Πώς να διορθώσετε κανένα μικρόφωνο σε εφαρμογές μετά την ενημέρωση δημιουργών της άνοιξης

Αυτό είναι όλο; μέσα σε ένα δευτερόλεπτο, θα παρατηρήσετε ότι όλες οι κεφαλίδες έχουν εφαρμοστεί στον ιστότοπο.

Δείτε πώς φαίνεται από το Chrome Dev Tools. Μπορείτε επίσης να δοκιμάσετε την κεφαλίδα μέσω ενός εργαλείου κεφαλίδας HTTP.

Δεν ξέρω γιατί δεν εμφανίζεται η κεφαλίδα του διακομιστή. Υποθέτω ότι το Cloudflare το παρακάμπτει.

Βλέπετε, η συνολική υλοποίηση διαρκεί ~15 λεπτά και δεν απαιτείται χρόνος διακοπής λειτουργίας ή επανεκκίνηση όπως το Apache ή το Nginx. Εάν σκοπεύετε να το εφαρμόσετε σε μια τοποθεσία παραγωγής, θα πρότεινα πρώτα να κάνετε δοκιμή σε χαμηλότερο περιβάλλον ή με τη βοήθεια μιας διαδρομής, μπορείτε να το εφαρμόσετε στις δοκιμαστικές σελίδες για να επαληθεύσετε τα αποτελέσματα. Μόλις ικανοποιηθείτε, σπρώξτε όπου θέλετε.

Αυτό είναι φοβερό!

Χάρη σε Σκοτ για τον κωδικό.