Εισαγωγή σε σεναρίων Cross-Site (XSS) και JavaScript Defenses

Διασταυρωμένο σενάριο (XSS) είναι ένα από τα πιο διαδεδομένα τρωτά σημεία ασφάλειας ιστού, με συνέπεια κατάταξη στο OWASP Top 10. Μια επίθεση XSS επιτρέπει σε έναν επιτιθέμενο να εγχύσει κακόβουλα σενάρια από την πλευρά του πελάτη σε ιστοσελίδες που προβάλλονται από άλλους χρήστες. Αυτά τα σενάρια μπορούν να κλέψουν τα σημεία συνεδρίας, να ανακατευθύνουν τους χρήστες σε ιστοσελίδες phishing, σελίδες deface, ή να εγκαταστήσουν κακόβουλο λογισμικό. Ενώ η εξυγίανση από την πλευρά του διακομιστή είναι κρίσιμη, JavaScript παίζει έναν κεντρικό ρόλο στην πλευρά του πελάτη για να ανιχνεύσει και να αποτρέψει αυτές τις επιθέσεις. Αυτό το άρθρο παρέχει έναν ολοκληρωμένο, έτοιμο οδηγό παραγωγής για τη χρήση JavaScript για την προστασία των εφαρμογών σας από XSS.

Κατανόηση των Τριών Των ΧSS

Πριν την κατάδυση στην πρόληψη, είναι απαραίτητο να κατανοήσουμε τις τρεις κύριες κατηγορίες XSS: αποθηκευμένες, ανακλώμενες και βασισμένες στο DOM.

Αποθηκευμένη XSS

Αποθηκευμένο (επιφανές) XSS συμβαίνει όταν κακόβουλη είσοδο είναι μόνιμα αποθηκευμένη στον διακομιστή (π.χ., σε μια βάση δεδομένων, forum post, ή σχόλιο) και αργότερα εξυπηρετήθηκε στους χρήστες χωρίς σωστή αποξήρανση. Το ωφέλιμο φορτίο επίθεσης εκτελεί στον browser οποιουδήποτε βλέπει το αποθηκευμένο περιεχόμενο.

Αντανακλώμενο XSS

Το ανακλώμενο XSS συμβαίνει όταν το κακόβουλο σενάριο αντικατοπτρίζεται από έναν εξυπηρετητή ιστού, συνήθως μέσω μιας παράμετρου URL ή υποβολής φόρμας. Ο επιτιθέμενος κάνει κόλπα με ένα θύμα κάνοντας κλικ σε ένα δημιουργημένο σύνδεσμο, και ο εγχυμένος κώδικας εκτελεί αμέσως. Σε αντίθεση με το αποθηκευμένο XSS, το ωφέλιμο φορτίο δεν επιμένουν.

Βασισμένο σε DOM XSS

Το ωφέλιμο φορτίο επίθεσης τροποποιεί το περιβάλλον DOM στο πρόγραμμα περιήγησης του θύματος. Ο κακόβουλος κώδικας δεν αγγίζει ποτέ τον εξυπηρετητή. προέρχεται από την πλευρά του πελάτη JavaScript που χειρίζεται μη ασφαλή την είσοδο του χρήστη (π.χ., ανάγνωση από ], , ή ).

Ανίχνευση επιθέσεων XSS με JavaScript

Η ανίχνευση αφορά τον εντοπισμό ύποπτης δραστηριότητας πριν από τη βλάβη. JavaScript μπορεί να παρακολουθεί τις εισόδους των χρηστών, να παρακολουθεί τις μεταλλάξεις DOM, και να επικυρώνει τα δεδομένα στα σημεία εισόδου. Ενώ η ανίχνευση από πλευράς πελάτη δεν μπορεί να πιάσει όλες τις επιθέσεις (ειδικά αν ο επιτιθέμενος σκάφος ζητήσει απευθείας στον διακομιστή), παρέχει μια πολύτιμη πρώτη γραμμή άμυνας.

Επικύρωση και εξυγίανση εισόδου

Πάντα επικυρώστε και απολυμάνετε τις εισόδους των χρηστών από την πλευρά του πελάτη πριν την επεξεργασία. Χρησιμοποιήστε [[LFT:3]] αντί [[LFT:4]] για να αποτρέψετε την εκτέλεση σεναρίου. Οι ακόλουθες λειτουργίες αποσυνδέουν επικίνδυνους χαρακτήρες από μια συμβολοσειρά:

function sanitizeInput(input) {
 const div = document.createElement('div');
 div.textContent = input;
 return div.innerHTML;
}

Αυτό λειτουργεί επειδή η ρύθμιση δεν ερμηνεύει ετικέτες HTML· αντιμετωπίζει τα πάντα ως απλό κείμενο. Το αποτέλεσμα περιέχει διαφυγόντες εκδόσεις οποιουδήποτε ειδικού χαρακτήρες HTML (π.χ., , , ]).

Παρακολούθηση των μεταλλαγμάτων DOM για ύποπτα στοιχεία

Οι επιτιθέμενοι συχνά εγχέουν ετικέτες ή φορείς που χειρίζονται γεγονότα (], ]) στο DOM. Χρησιμοποιώντας το API, μπορείτε να παρακολουθήσετε για απροσδόκητες εισαγωγές στοιχείων. Ένα βασικό παράδειγμα:

const observer = new MutationObserver((mutations) => {
 mutations.forEach((mutation) => {
 mutation.addedNodes.forEach((node) => {
 if (node.nodeType === 1) { // element node
 if (node.tagName === 'SCRIPT') {
 console.warn('Potential XSS: a script element was injected via DOM.');
 node.remove(); // or log and analyze
 }
 // Check for dangerous attributes
 if (node.hasAttribute('onerror') || node.hasAttribute('onload')) {
 console.warn('Suspicious event handler attribute detected.');
 }
 }
 });
 });
});
observer.observe(document.body, { childList: true, subtree: true });

Προσοχή: Οι scripts αποκλεισμού μέσω μπορούν να παρακαμφθούν από έξυπνους επιτιθέμενους και μπορεί να σπάσουν τη νόμιμη λειτουργικότητα. Χρησιμοποιήστε το ως εργαλείο παρακολούθησης και όχι ως πρωτεύον μηχανισμό πρόληψης.

Επικύρωση παραμέτρων URL και Hash

Για το DOM XSS, διαβάστε τα συστατικά URL με ασφάλεια χρησιμοποιώντας [[LFT:17]]] και αποφύγετε την απευθείας εισαγωγή τιμών σε HTML. Εντοπίστε τις προσπάθειες να περάσει εκτελέσιμο κώδικα:

const params = new URLSearchParams(window.location.search);
const userParam = params.get('name');
if (userParam && /[<>"'\/]/.test(userParam)) {
 console.warn('Potential XSS in parameter: ' + userParam);
 // Do not use this value in the DOM without encoding
}

Αποτροπή επιθέσεων XSS με JavaScript

Η JavaScript από μόνη της δεν μπορεί να εξασφαλίσει πλήρως μια εφαρμογή, αλλά όταν συνδυάζεται με την κατάλληλη αποξήρανση του συστήματος υποστήριξης και []Η πολιτική ασφαλείας περιεχόμενης (CSP) μειώνει δραματικά τον κίνδυνο.

Κωδικοποίηση όλων των δεδομένων που ελέγχονται από το χρήστη πριν από την εισαγωγή στο DOM

Ο χρυσός κανόνας: ποτέ μην εισάγετε μη εμπιστευτικά δεδομένα απευθείας στο DOM. Χρησιμοποιήστε ασφαλείς μεθόδους DOM αντί για εσωτερικήHTML.

Χρήση ή 

const userInput = getUserInput();
const safeText = document.createTextNode(userInput);
document.getElementById('output').appendChild(safeText);

Όταν Πρέπει να Χρησιμοποιείτε , Αποκαθαρίστε με μια Βιβλιοθήκη

Αν πρέπει οπωσδήποτε να αποδώσετε HTML (π.χ., από έναν πλούσιο επεξεργαστή κειμένου), βασιστείτε σε μια αξιόπιστη βιβλιοθήκη αποξήρανσης όπως [[LFT:0]]DOMPurify[[LFT:1]]. Το DOMPurify είναι μια ευρέως χρησιμοποιούμενη, δοκιμασμένη από μάχη βιβλιοθήκη που αφαιρεί κακόβουλο κώδικα ενώ διατηρεί ασφαλή HTML.

// Example with DOMPurify (install via npm or CDN)
const dirty = '<img src=x onerror="alert(1)">';
const clean = DOMPurify.sanitize(dirty);
document.getElementById('content').innerHTML = clean;

DOMPurify έργα με ανάλυση της εισόδου, απογύμνωση επικίνδυνων ετικετών και ιδιοτήτων, και επιστροφή μόνο επιτρεπόμενα στοιχεία. View DOMPurify on GitHub.

Αποφύγετε επικίνδυνες λειτουργίες JavaScript

Μερικές μέθοδοι και ιδιότητες JavaScript είναι διαβόητες για την ενεργοποίηση XSS. Αποφύγετε ή αυστηρά τον έλεγχο:

  • — χρήση ] ή σωστή αποξήρανση.
  • ], — ίδιος κανόνας.
  • — να μην χρησιμοποιείται ποτέ με είσοδο χρήστη.
  • — μπορεί να αξιοποιηθεί εάν οποιαδήποτε εισροή είναι συμπυκνωμένη.
  • / με κωδικό συμβολοσειρών — να αποφεύγεται· να χρησιμοποιούνται οι αναφορές της συνάρτησης αντ' αυτού.
  • κατασκευαστής — ανάλογος με .

Εφαρμογή της Πολιτικής Ασφάλειας Περιεχομένου (CSP) μέσω JavaScript; Δεν συνιστάται

Είναι συνήθως ρυθμισμένο μέσω HTTP κεφαλές, αλλά μπορείτε επίσης να το ρυθμίσετε χρησιμοποιώντας μια ετικέτα ή μέσω JavaScript δημιουργώντας δυναμικά ένα στοιχείο . Ωστόσο, η ρύθμιση CSP στη JavaScript είναι λιγότερο ασφαλής επειδή ένας επιτιθέμενος που έχει ήδη κάποιο έλεγχο θα μπορούσε να το απενεργοποιήσει. Πάντα προτιμάτε την κεφαλίδα HTTP. Αν πρέπει να χρησιμοποιήσετε JavaScript για να επιβάλετε CSP (π.χ. κατά τη διάρκεια της ανάπτυξης), κάντε το πολύ νωρίς στη σελίδα φορτίο:

const meta = document.createElement('meta');
meta.httpEquiv = 'Content-Security-Policy';
meta.content = "default-src 'self'; script-src 'self' 'unsafe-inline'"; // Be very careful with 'unsafe-inline'
document.head.appendChild(meta);

Για την παραγωγή, ρυθμίστε CSP στον web server σας ή αντιστρέψιμο proxy. Η τεκμηρίωση CSP του MDN παρέχει ολοκληρωμένη καθοδήγηση.

Συμπληρωματικά μέτρα ασφαλείας

Πέρα από τις τακτικές που αφορούν ειδικά το JavaScript, μια ολοκληρωμένη στρατηγική πρόληψης XSS περιλαμβάνει αυτά τα κρίσιμα μέτρα:

  • Πάντα επικυρώνεται από την πλευρά του διακομιστή. Η επικύρωση από την πλευρά του πελάτη μπορεί να παρακαμφθεί. Ποτέ μην εμπιστεύεστε τα δεδομένα του πελάτη.
  • Χρησιμοποιήστε κατάλληλες κεφαλίδες HTTP απόκρισης. , ], και ειδικά .
  • Εξαγωγή κωδικοποιεί κάθε φορά που αποδίδετε τα δεδομένα χρήστη. Θέματα κειμένου: κωδικοποιήστε για οντότητες HTML, κωδικοποίηση URL, κωδικοποίηση συμβολοσειρών JavaScript, κλπ.
  • Κρατήστε τις εξαρτήσεις ενημερωμένες. Ευάλωτες βιβλιοθήκες JavaScript (π.χ., παλαιότερες εκδόσεις του jQuery) είναι ένα κοινό XSS διανύσμα. Χρησιμοποιήστε npm έλεγχο ή παρόμοια εργαλεία.
  • Χρησιμοποιήστε πλαίσια με ενσωματωμένη προστασία XSS. Αντιδρούν, Γωνιακό, και Vue αυτόματα διαφεύγει εξόδου από προεπιλογή. Ακόμα, να είστε προσεκτικοί με ή .
  • Εφαρμογή ενός αυστηρού CSP. Αποφύγετε και αν είναι δυνατόν. Χρησιμοποιήστε nonces ή hashes για inline σενάρια.

Πραγματικό-Παγκόσμιο Παράδειγμα: Ασφαλής Αποτύπωση σχολίων

Εξετάστε ένα σύστημα σχολίων blog όπου οι χρήστες υποβάλλουν μηνύματα που εμφανίζονται σε άλλους. Ένας επιτιθέμενος μπορεί να προσπαθήσει να εισάγει [[LPT:44]]. Εδώ είναι μια προσέγγιση JavaScript που ενσωματώνει με το σύστημα υποστήριξης:

  1. Υποβολή δεδομένων: Εξυγίανση με χρήση [[LFT:45]] πριν την αποστολή στον εξυπηρετητή (αλλά ο διακομιστής πρέπει ακόμα να απολυμανθεί).
  2. Ο Server επιστρέφει τα δεδομένα: Το σύστημα υποστήριξης θα πρέπει να κωδικοποιεί το κείμενο σχολίων HTML.
  3. Αποτύπωση πελάτη: Χρήση [[LFT:46]]] ή ασφαλής μηχανής προτύπου. Ποτέ μη χρησιμοποιείτε [[LFT:47]] με δεδομένα από τους χρήστες.
function renderComment(comment) {
 const item = document.createElement('div');
 item.className = 'comment';
 const body = document.createElement('p');
 body.textContent = comment.body; // escaped by browser
 item.appendChild(body);
 document.getElementById('comments').appendChild(item);
}

Δοκιμές για τις Άμυνες Σας

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

Χρησιμοποιήστε εργαλεία προγραμματιστών για να εξετάσετε το DOM και να διασφαλίσετε ότι τα ωφέλιμο φορτίο θα διαφυγούν. Επίσης, ελέγξτε την επιβολή CSP ελέγχοντας την κονσόλα για αναφορές παραβίασης.

Συμπέρασμα

Η διασχιστική scripting παραμένει μια σοβαρή απειλή, αλλά η JavaScript προσφέρει ισχυρά εργαλεία τόσο για την ανίχνευση όσο και για την πρόληψη. Με την επικύρωση των εισροών, την παρακολούθηση των αλλαγών DOM, την αποφυγή εξόδου, και την ενσωμάτωση με ισχυρές βιβλιοθήκες όπως το DOMPurify, μπορείτε να σκληρύνετε σημαντικά την ασφάλεια πλευρά του πελάτη σας. Θυμηθείτε ότι τα μέτρα πλευρά του πελάτη δεν είναι μια ασημένια σφαίρα?συμπληρώνουν μια αμυντική-σε βάθος στρατηγική που περιλαμβάνει server-side απολυμαντικό, κεφαλές CSP, και τακτική ελέγχους ασφαλείας. Μείνετε σε εγρήγορση, συχνά δοκιμή, και να κρατήσει τις βιβλιοθήκες σας μέχρι σήμερα.

Για περαιτέρω ανάγνωση, συμβουλευτείτε τη σελίδα OWASP XSS και το OWASP XSS Prevention Cheat Sheet.