CORS Εισαγωγή για αρχάριους

Αναρωτιέστε τι είναι το CORS (Cross-Origin Resource Sharing)?


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

https://pt.slideshare.net/atirekgupta/selenium-workshop-34820044

Ένα αντίγραφο αυτού του σεναρίου συμβαίνει στην επικοινωνία μεταξύ προγραμμάτων περιήγησης και διακομιστών ιστού και ονομάζεται πολιτική ίδιας προέλευσης.

Σύμφωνα με το MDN:

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

Τι είναι το CORS?

Σε μια πραγματική περίπτωση, όταν οι πράκτορες ασφαλείας δίνουν έναν κανόνα ότι η επικοινωνία θα πρέπει να συμβαίνει μόνο μεταξύ των χειριστών της ως μέσου ασφαλείας, αυτό είναι παρόμοιο με την πολιτική ίδιας προέλευσης. Ωστόσο, μπορεί να υπάρχουν περιπτώσεις όπου θα πρέπει να αλληλεπιδράσουν με τον έξω κόσμο. Ή με χειριστές άλλων εξαρτημάτων ασφαλείας, για να συμβεί αυτό, μπορούν να εφαρμόσουν ένα άλλο μέτρο ασφαλείας επαληθεύω αυτοί οι πράκτορες. Αυτή η επαλήθευση μπορεί να πραγματοποιηθεί με διαφορετικούς τρόπους, ανάλογα με τους εμπλεκόμενους χειριστές. Στην περίπτωση επικοινωνίας στο Διαδίκτυο, ΚΟΡ είναι ο μηχανισμός που επιτρέπει στα προγράμματα περιήγησης να χρησιμοποιούν πρόσβαση σε πόρους που αρχικά δεν θα μπορούν να κάνουν επειδή ο πόρος είναι διαφορετικής προέλευσης.

Το Cross-Origin Resource Sharing (CORS) είναι ένας μηχανισμός που χρησιμοποιεί πρόσθετες κεφαλίδες HTTP για να πει στα προγράμματα περιήγησης να δώσουν μια εφαρμογή ιστού που λειτουργεί σε μία προέλευση, πρόσβαση σε επιλεγμένους πόρους από διαφορετική προέλευση.

Έχω μιλήσει για την προέλευση περισσότερες από μία φορές και πιθανώς αναρωτιέστε τι σημαίνει αυτό. Η προέλευση ορίζεται από το πρωτόκολλο, τον τομέα και τη θύρα της διεύθυνσης URL. Όταν έχετε το API σας σε μια προέλευση όπως το https://api.geekflare.com:3001 και το frontend σας στο https://geekflare.com, η προέλευση λέγεται ότι είναι διαφορετική. Σε αυτήν την περίπτωση, θα χρειαστείτε το CORS για να έχετε πρόσβαση σε πόρους και στα δύο άκρα.

Όταν υποβάλλονται αιτήματα σε διακομιστή, τα προγράμματα περιήγησης (πελάτης) και διακομιστές στέλνουν αιτήματα και απόκριση, περιλαμβάνονται κεφαλίδες HTTP. Μεταξύ αυτών των κεφαλίδων, περιλαμβάνονται πρόσθετες κεφαλίδες για να αποτραπεί ο αποκλεισμός της επικοινωνίας από το πρόγραμμα περιήγησης.

Γιατί το πρόγραμμα περιήγησης αποκλείει την επικοινωνία?

Τα χαρακτηριστικά ασφαλείας του προγράμματος περιήγησης. Αυτό θα το κάνει εάν το αίτημα προέρχεται από μια προέλευση διαφορετική από αυτήν του πελάτη. Οι πρόσθετες κεφαλίδες που περιλαμβάνονται ως αποτέλεσμα του CORS είναι ένας τρόπος να πείτε στον πελάτη ότι μπορεί να κάνει χρήση της απόκρισης που έλαβε.

Κεφαλίδες CORS

Μία από τις ασφαλείς κεφαλίδες που μπορούν να είναι είτε απόκριση είτε να ζητούν κεφαλίδα.

Κεφαλίδες απόκρισης

Αυτές είναι οι κεφαλίδες που στέλνει ο διακομιστής στην απάντησή του.

  • Access-Control-Allow-Origin:: Χρησιμοποιείται για τον καθορισμό της προέλευσης που επιτρέπεται να έχει πρόσβαση στον πόρο στο διακομιστή. Είναι δυνατόν να προσδιορίσετε ότι επιτρέπονται μόνο αιτήματα από συγκεκριμένη προέλευση – Access-Control-Allow-Origin: https://geekflare.com ή ότι η προέλευση δεν έχει σημασία – Access-Control-Allow-Origin: *.
  • Access-Control-Expose-Headers:: Όπως υποδηλώνει το όνομα, παρατίθενται οι κεφαλίδες στις οποίες έχει πρόσβαση το πρόγραμμα περιήγησης.
  • Access-Control-Max-Age:: Αυτό δείχνει τη διάρκεια για την οποία μπορεί να αποθηκευτεί προσωρινά η απόκριση ενός αιτήματος προκαταρκτικού φωτισμού.
  • Access-Control-Allow-διαπιστευτήρια:: Αυτό δείχνει ότι το πρόγραμμα περιήγησης μπορεί να κάνει χρήση της απόκρισης όταν το αρχικό αίτημα υποβλήθηκε με διαπιστευτήρια.
  • Access-Control-Allow-Methods:: Αυτό υποδεικνύει τη μέθοδο (ες) που επιτρέπονται κατά την προσπάθεια πρόσβασης σε έναν πόρο.
  • Access-Control-Allow-Headers:: Αυτό δείχνει ότι οι κεφαλίδες HTTP μπορούν να χρησιμοποιηθούν σε ένα αίτημα.

Εδώ είναι ένα παράδειγμα του πώς θα είναι η απάντηση

HTTP / 1.1 204 Χωρίς περιεχόμενο
Access-Control-Allow-Origin: *
Μέθοδοι Access-Control-Allow: GET, HEAD, PUT, PATCH, POST, DELETE
Vary: Access-Control-Request-Headers
Access-Control-Allow-Headers: Τύπος περιεχομένου, Αποδοχή
Μήκος περιεχομένου: 0
Ημερομηνία: Σάβ, 16 Νοε 2019 2019 11:41:08 GMT + 1
Σύνδεση: κρατήστε ζωντανή

Αίτημα κεφαλίδων

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

  • Origin:: Αυτό δείχνει την προέλευση του αιτήματος του πελάτη. Όταν εργάζεστε με ένα frontend και backend, όπως αναφέρθηκε προηγουμένως, αυτός θα είναι ο κεντρικός υπολογιστής της εφαρμογής frontend σας.
  • Access-Control-Request-Method:: Χρησιμοποιείται σε ένα αίτημα προκαταρκτικού φωτισμού για να υποδείξει τη μέθοδο HTTP που θα χρησιμοποιηθεί για την υποβολή του αιτήματος.
  • Access-Control-Request-Headers:: Αυτό χρησιμοποιείται σε ένα αίτημα προκαταρκτικού φωτισμού για να υποδείξει τις κεφαλίδες HTTP που θα χρησιμοποιηθούν για την υποβολή του αιτήματος.

Ακολουθεί ένα παράδειγμα για το πώς θα μοιάζει ένα αίτημα

curl -i -X ​​ΕΠΙΛΟΓΕΣ localhost: 3001 / api \
-H ‘Access-Control-Request-Method: GET’ \
-H ‘Πρόσβαση-Έλεγχος-Αίτημα-Κεφαλίδες: Τύπος περιεχομένου, Αποδοχή’ \
-H «Προέλευση: http: // localhost: 3000»

Αιτήματα προ πτήσης

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Αφού αναφέραμε τα αιτήματα προκαταρκτικών πτήσεων εδώ και εκεί, τι θα μπορούσε να σημαίνει?

Τα αιτήματα προ-πτήσης συμβαίνουν όταν ο πελάτης πρέπει να στείλει ένα αίτημα προκαταρκτικού πτήσης πριν από την κύρια αίτηση. Το αίτημα προκαταρκτικού φωτισμού είναι περισσότερο από ένα καθετήρας για να προσδιορίσετε εάν ο διακομιστής υποστηρίζει το κύριο αίτημα που πρόκειται να υποβληθεί. Όταν ληφθεί θετική επιβεβαίωση, αποστέλλεται το κύριο αίτημα.

Όταν ένα αίτημα δεν είναι αίτημα προκαταρκτικού, ονομάζεται a απλό αίτημα.

Εφαρμογή CORS

Θα θέλατε κυρίως να ρυθμίσετε τα πράγματα στο πίσω μέρος της εφαρμογής σας. Η εφαρμογή εξαρτάται από το πλαίσιο που χρησιμοποιείτε. Για αυτό το σεμινάριο, θα δούμε πώς να το κάνουμε στο NodeJS και στο Rails.

Ράγες

Σας προτείνω να κάνετε χρήση του κορδονες κόσμημα. Στη συνέχεια, θα πρέπει να το προσθέσετε στο αρχείο config / application.rb.

config.middleware.insert_before 0, Rack :: Cors
επιτρέψτε να
προέλευση ‘*’
πόρος ‘*’,
κεφαλίδες: οποιαδήποτε,
expose:% i (access-token expiry token-type uid client).,
μέθοδοι:% i (get post post patch patch delete options head),
διαπιστευτήρια: true
τέλος
τέλος

NodeJS

Στο Node.js, θα μοιάζει με αυτό.

app.all (‘*’, (req, res, next) => {
res.header (‘Access-Control-Allow-Origin’, ‘*’) ·
res.header («Access-Control-Allow-Methods», «PUT, GET, POST, DELETE, PATCH, OPTIONS HEAD»).
res.header (‘Access-Control-Allow-Headers’, ‘*’) ·
res.header («Access-Control-Allow-διαπιστευτήρια», αληθινό);
Επόμενο();
});

Στο απόσπασμα κώδικα, ρυθμίζουμε την προέλευση, τις μεθόδους, τις κεφαλίδες και τα διαπιστευτήρια που πρέπει να επιτρέπεται η πρόσβαση στους πόρους που είναι διαθέσιμοι στον διακομιστή μας. Μπορείτε επίσης να αγοράσετε Sqreen ο οποίος παρέχει μια ενότητα κεφαλίδων ασφαλείας για ενσωμάτωση με εφαρμογές Ruby, PHP, Python, Java, Go, Node.JS. Και για εφαρμογή σε Apache ή Nginx, ανατρέξτε σε αυτόν τον οδηγό.

συμπέρασμα

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

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map