www, ανακατεύθυνση και μικτό περιεχόμενο (mixed content)

Ενότητα 3: Διεύθυνση, https και χρήστες · Χρόνος ανάγνωσης: 9 λεπτά

Μαθησιακός στόχος: Μετά από αυτό το μάθημα θα μπορείτε να επιλέγετε μία κύρια διεύθυνση, να στέλνετε όλες τις παραλλαγές σε αυτήν με μία μόνο ανακατεύθυνση και να εντοπίζετε και να διορθώνετε το μικτό περιεχόμενο (mixed content).

Βασικές έννοιες: κανονική (canonical) διεύθυνση, 301 και 308, αλυσίδα ανακατευθύνσεων, μικτό περιεχόμενο (mixed content), αναζήτηση και αντικατάσταση στη βάση δεδομένων, σειριοποιημένα (serialized) δεδομένα

Τέσσερις διευθύνσεις, ένας ιστότοπος

Ο ιστότοπός σας είναι προσβάσιμος από τέσσερις διευθύνσεις:

http://example.com
http://www.example.com
https://example.com
https://www.example.com

Για έναν επισκέπτη αυτό δεν έχει σημασία, αλλά για τις μηχανές αναζήτησης πρόκειται για τέσσερις διαφορετικές διευθύνσεις με το ίδιο περιεχόμενο. Και τα cookies (όπως το cookie σύνδεσής σας) ισχύουν ανά όνομα: όποιος συνδέεται στο www δεν είναι συνδεδεμένος στο domain χωρίς www. Γι' αυτό επιλέγετε μία κανονική (canonical) διεύθυνση (την κύρια διεύθυνση) και κάνετε ανακατεύθυνση των άλλων τριών σε αυτήν.

Ποια θα επιλέξετε είναι θέμα προτίμησης (μάθημα 2.1). Το σημαντικό είναι η κύρια διεύθυνση να είναι παντού η ίδια: στο DNS, στο πιστοποιητικό, στις Ρυθμίσεις > Γενικά (μάθημα 3.1) και στις ανακατευθύνσεις.

Ανακατεύθυνση με 301, σε ένα βήμα

Μια ανακατεύθυνση είναι μια απάντηση του διακομιστή: "αυτή η σελίδα βρίσκεται κάπου αλλού". Ο browser μεταβαίνει τότε αυτόματα στη νέα διεύθυνση. Ο κωδικός δηλώνει τι είδους ανακατεύθυνση είναι:

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

Προσέξτε επίσης την αλυσίδα. Ας πούμε ότι η κύρια διεύθυνσή σας είναι https://example.com. Τότε θέλετε:

http://www.example.com   301  https://example.com/
http://example.com       301  https://example.com/
https://www.example.com  301  https://example.com/
https://example.com      200

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

http://www.example.com   301  https://www.example.com/
https://www.example.com  301  https://example.com/

Αυτό λειτουργεί, αλλά κοστίζει ένα επιπλέον βήμα (επιπλέον χρόνο αναμονής, ειδικά σε κινητά) και μια επιπλέον χειραψία TLS. Χειρότερος είναι ένας βρόχος: ο web server ανακατευθύνει σε https, το WordPress ανακατευθύνει πίσω σε http επειδή οι διευθύνσεις στις ρυθμίσεις είναι ακόμα σε http, και ο browser αναφέρει "πάρα πολλές ανακατευθύνσεις". Τότε δύο ρυθμίσεις ανακατευθύνουν η μία αντίθετα στην άλλη. Φροντίστε να υπάρχει μόνο ένα σημείο που ανακατευθύνει σε https (ο web server ή ο πίνακας διαχείρισης της φιλοξενίας) και οι διευθύνσεις στο WordPress να είναι ήδη ρυθμισμένες στην κύρια διεύθυνση.

Το WordPress κάνει και το ίδιο ανακατευθύνσεις: αν κάποιος ζητήσει https://www.example.com/contact/ ενώ η διεύθυνση του ιστοτόπου είναι https://example.com, τότε το WordPress ανακατευθύνει στο https://example.com/contact/. Αυτό λειτουργεί μόνο αν το αίτημα φτάσει στο WordPress, δηλαδή αν ο web server στέλνει και το όνομα www σε αυτόν τον ιστότοπο.

Μικτό περιεχόμενο

Μικτό περιεχόμενο (mixed content) είναι μια σελίδα https που φορτώνει στοιχεία μέσω http://: μια εικόνα, ένα stylesheet, ένα script, μια γραμματοσειρά ή ένα ενσωματωμένο βίντεο. Ο browser το θεωρεί μη ασφαλές, επειδή αυτά τα στοιχεία μπορούν να αλλοιωθούν καθ' οδόν.

• Scripts, stylesheets και iframes μέσω http μπλοκάρονται από τους browsers. Ο ιστότοπός σας φαίνεται τότε χαλασμένος ή μια λειτουργία δεν δουλεύει.
• Εικόνες, ήχο και βίντεο μέσω http οι σύγχρονοι browsers προσπαθούν να τα φορτώσουν αυτόματα μέσω https· αν αυτό δεν πετύχει, μπλοκάρονται. Το λουκέτο μπορεί τότε να εμφανίσει προειδοποίηση.

Από πού προέρχεται:

1. Παλιοί σύνδεσμοι στο περιεχόμενό σας: ένας ιστότοπος που παλαιότερα λειτουργούσε σε http έχει σε χιλιάδες άρθρα <img src="http://example.com/wp-content/uploads/...">. Το WordPress αποθηκεύει αυτούς τους συνδέσμους αυτούσιους στη βάση δεδομένων.
2. Ρυθμίσεις θέματος εμφάνισης ή προσθέτου με πλήρη διεύθυνση, για παράδειγμα ένα λογότυπο ή φόντο με http://.
3. Εξωτερικά στοιχεία από άλλον ιστότοπο που είναι προσβάσιμα μόνο μέσω http. Αυτά πρέπει να τα αντικαταστήσετε ή να τα αφαιρέσετε.
4. Διευθύνσεις στις Ρυθμίσεις > Γενικά που είναι ακόμα σε http (μάθημα 3.1).

Πώς θα το βρείτε

Ανοίξτε τη σελίδα, πατήστε F12 και δείτε την καρτέλα Κονσόλα (Console). Ο browser αναφέρει κάθε μικτό περιεχόμενο με τη διεύθυνση του στοιχείου. Ή αναζητήστε στον πηγαίο κώδικα της σελίδας (Ctrl+U) τα src="http:// και href="http://. Σύνδεσμοι προς άλλους ιστοτόπους μέσα σε απλό κείμενο (<a href="http://...">) δεν δημιουργούν μικτό περιεχόμενο· το θέμα αφορά όσα η σελίδα φορτώνει.

Αναζήτηση και αντικατάσταση, αλλά σωστά

Η λύση για τους παλιούς συνδέσμους στο περιεχόμενό σας είναι να αντικαταστήσετε όλα τα http://example.com στη βάση δεδομένων με https://example.com. Ο πειρασμός είναι μια εντολή SQL όπως:

UPDATE wp_options SET option_value = REPLACE(option_value, 'http://example.com', 'https://example.com');

Μην το κάνετε. Πολλές ρυθμίσεις θεμάτων εμφάνισης, προσθέτων και widgets αποθηκεύονται σειριοποιημένες (serialized). Αυτό μοιάζει έτσι:

s:27:"http://example.com/logo.png";

Το s:27 σημαίνει: ακολουθεί κείμενο 27 χαρακτήρων. Μετά από μια απλή αντικατάσταση το κείμενο έχει 28 χαρακτήρες (προστέθηκε ένα s), αλλά εξακολουθεί να γράφει 27. Η PHP δεν μπορεί πλέον να διαβάσει την τιμή και η ρύθμιση χάνεται αθόρυβα: ένα άδειο μενού, ένα λογότυπο που εξαφανίστηκε, widgets που χάθηκαν.

Χρησιμοποιήστε ένα εργαλείο που ενημερώνει αυτά τα μήκη και κρατήστε πάντα πρώτα ένα αντίγραφο ασφαλείας (μάθημα 8.1): η αναζήτηση και αντικατάσταση δεν έχει κάδο ανακύκλωσης.

• WP-CLI: πρώτα κοιτάξτε, μετά εκτελέστε. Μεταβείτε στο τερματικό στον φάκελο του WordPress σας και εκτελέστε πρώτα τη δοκιμαστική εκτέλεση (πρώτη γραμμή) και μόνο μετά την πραγματική (δεύτερη γραμμή).

wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid --dry-run
wp search-replace 'http://example.com' 'https://example.com' --skip-columns=guid

Με το --dry-run βλέπετε πόσες αντικαταστάσεις θα γίνονταν ανά πίνακα, χωρίς να αλλάξει τίποτα. Το --skip-columns=guid αφήνει ανέγγιχτα τα μόνιμα αναγνωριστικά των άρθρων (στήλη guid)· το WordPress συνιστά να μην τα αλλάζετε ποτέ. Χωρίς επιπλέον επιλογή, το WP-CLI λειτουργεί μόνο στους πίνακες του WordPress. Αν ένα πρόσθετο έχει δικούς του πίνακες με το ίδιο πρόθεμα, προσθέστε το --all-tables-with-prefix. Χρησιμοποιήστε το --all-tables μόνο αν ξέρετε γιατί: επηρεάζει κάθε πίνακα της βάσης δεδομένων, ακόμα και εκείνους άλλου ιστοτόπου ή εφαρμογής.

• Ένα πρόσθετο αναζήτησης και αντικατάστασης που υποστηρίζει σειριοποιημένα δεδομένα (υπάρχουν αρκετά στον κατάλογο προσθέτων του wordpress.org). Χρησιμοποιήστε κι εκεί πρώτα τη δοκιμαστική λειτουργία και διαγράψτε το πρόσθετο στη συνέχεια.

Μην αντικαθιστάτε ποτέ κάτι όπως example.com χωρίς http:// ή https:// μπροστά: τότε επηρεάζετε και διευθύνσεις email και άλλα κείμενα. Ολόκληρη η διαδικασία, και για όσους δεν έχουν τερματικό, περιγράφεται στο άρθρο της γνωσιακής βάσης για την αναζήτηση και αντικατάσταση στη βάση δεδομένων του WordPress (δείτε Περαιτέρω ανάγνωση).

Στην πράξη: έτσι φαίνεται σε έναν πίνακα διαχείρισης

Ως παράδειγμα χρησιμοποιούμε το DirectAdmin. Άλλοι πίνακες διαχείρισης έχουν παρόμοιο διακόπτη για "πάντα https".

1. Ενεργοποιήστε στις ρυθμίσεις του domain την επιλογή Force SSL with https redirect (μάθημα 3.1).
2. Επιλέξτε στο domain αν το www θα οδηγεί στο domain χωρίς www ή αντίστροφα (στο DirectAdmin στις ρυθμίσεις του domain· διαφορετικά με μια ανακατεύθυνση μέσω Site Redirects ή .htaccess).
3. Ελέγξτε την αλυσίδα με την άσκηση παρακάτω ή με τα εργαλεία προγραμματιστή του browser σας (καρτέλα Δίκτυο, επιλογή "Διατήρηση αρχείου καταγραφής").

Σύνοψη

• Επιλέξτε μία κανονική διεύθυνση και στείλτε τις άλλες τρεις παραλλαγές εκεί με 301 (ή 308), σε ένα βήμα.
• Αφήστε μόνο ένα σημείο να ανακατευθύνει σε https· διαφορετικά δημιουργείται βρόχος.
• Μικτό περιεχόμενο είναι μια σελίδα https που φορτώνει στοιχεία μέσω http· η κονσόλα του browser δείχνει ποια.
• Τους παλιούς συνδέσμους στη βάση δεδομένων τους αντικαθιστάτε με wp search-replace ή με ένα πρόσθετο που κατανοεί τα σειριοποιημένα δεδομένα, ποτέ με ένα απλό SQL REPLACE.
• Πάντα πρώτα αντίγραφο ασφαλείας και πρώτα δοκιμαστική εκτέλεση (--dry-run)· αφήστε ανέγγιχτη τη στήλη guid και περιοριστείτε στους πίνακες του WordPress.

Κουίζ

Άσκηση

Άσκηση A3.2: Μία κύρια διεύθυνση και κανένα μικτό περιεχόμενο (mixed content). Συμπληρώστε το domain σας. Το πρόγραμμα ανοίγει τις τέσσερις παραλλαγές (http και https, με και χωρίς www) και ακολουθεί τις ανακατευθύνσεις. Σωστό είναι: και οι τέσσερις καταλήγουν στην ίδια διεύθυνση με https, με το πολύ μία ανακατεύθυνση ανά παραλλαγή και μόνο μόνιμους κωδικούς (301 ή 308). Στη συνέχεια το πρόγραμμα διαβάζει την HTML της αρχικής σελίδας και αναζητά scripts, stylesheets, εικόνες, iframes και γραμματοσειρές που φορτώνονται μέσω http://.

Περαιτέρω ανάγνωση

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

• Εγχειρίδιο DirectAdmin 6.4: Επισκέπτες πάντα προς https
• Εγχειρίδιο DirectAdmin 4.7: Site Redirects: ανακατεύθυνση ενός domain ή μιας σελίδας
• Αναζήτηση και αντικατάσταση στη βάση δεδομένων του WordPress
• Υποχρεωτική ανακατεύθυνση επισκεπτών σε https
• Δωρεάν μάθημα DNS 3.4: www, ανακατεύθυνση και τι δεν κάνει το DNS
• Μικτό περιεχόμενο (MDN, Αγγλικά): https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, Αγγλικά): https://developer.wordpress.org/cli/commands/search-replace/