www, doorsturen en gemengde inhoud

Module 3: Adres, https en gebruikers · Leestijd: 9 minuten

Leerdoel: Na deze les kun je één hoofdadres kiezen, alle varianten met één doorsturing daarheen sturen en gemengde inhoud opsporen en oplossen.

Kernbegrippen: canoniek adres, 301 en 308, doorstuurketen, gemengde inhoud (mixed content), zoeken en vervangen in de database, geserialiseerde gegevens

Vier adressen, één site

Je site is via vier adressen te bereiken:

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

Voor een bezoeker maakt dat niet uit, maar voor zoekmachines zijn het vier verschillende adressen met dezelfde inhoud. Ook cookies (zoals je inlogcookie) gelden per naam: wie inlogt op www is niet ingelogd op de kale naam. Daarom kies je één canoniek adres (het hoofdadres) en stuur je de andere drie daarheen door.

Welk je kiest, is een smaakkwestie (les 2.1). Het gaat erom dat het hoofdadres overal hetzelfde is: in de DNS, in het certificaat, in Instellingen > Algemeen (les 3.1) en in de doorsturingen.

Doorsturen met een 301, in één stap

Een doorsturing is een antwoord van de server: "deze pagina staat ergens anders". De browser gaat dan vanzelf naar het nieuwe adres. De code zegt wat voor doorsturing het is:

Een permanente doorsturing vertelt zoekmachines dat het nieuwe adres het echte is. Bij een tijdelijke blijven ze het oude adres onthouden.

Let ook op de keten. Stel je hoofdadres is https://example.com. Dan wil je:

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

Elke variant komt in één stap op het hoofdadres. Wat vaak gebeurt:

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

Dat werkt wel, maar kost een extra stap (extra wachttijd, vooral op mobiel) en een extra TLS-handdruk. Erger is een rondje: de webserver stuurt naar https, WordPress stuurt terug naar http omdat de adressen in de instellingen nog op http staan, en de browser meldt "te veel omleidingen". Dan sturen twee instellingen tegen elkaar in. Zorg dat er maar één partij is die doorstuurt naar https (de webserver of het paneel), en dat de adressen in WordPress al op het hoofdadres staan.

WordPress stuurt zelf ook door: vraagt iemand https://www.example.com/contact/ terwijl het siteadres https://example.com is, dan stuurt WordPress door naar https://example.com/contact/. Dat werkt alleen als het verzoek bij WordPress aankomt, dus als de webserver de naam www ook bij deze site laat uitkomen.

Gemengde inhoud

Gemengde inhoud (mixed content) is een https-pagina die onderdelen laadt via http://: een afbeelding, een stylesheet, een script, een lettertype of een ingesloten video. De browser vindt dat onveilig, omdat die onderdelen onderweg veranderd kunnen worden.

• Scripts, stylesheets en iframes via http worden door browsers geblokkeerd. Je site ziet er dan kapot uit of een functie werkt niet.
• Afbeeldingen, audio en video via http proberen moderne browsers automatisch via https op te halen; lukt dat niet, dan worden ze geblokkeerd. Het slotje kan dan een waarschuwing tonen.

Waar het vandaan komt:

1. Oude links in je inhoud: een site die vroeger op http stond, heeft in duizenden berichten <img src="http://example.com/wp-content/uploads/...">. WordPress slaat die links letterlijk op in de database.
2. Thema- of plugininstellingen met een volledig adres, bijvoorbeeld een logo of achtergrond met http://.
3. Externe onderdelen van een andere site die alleen via http bereikbaar zijn. Die moet je vervangen of weghalen.
4. Adressen in Instellingen > Algemeen die nog op http staan (les 3.1).

Zo vind je het

Open de pagina, druk op F12 en kijk in het tabblad Console. De browser meldt elke gemengde inhoud met het adres van het onderdeel. Of zoek in de broncode van de pagina (Ctrl+U) naar src="http:// en href="http://. Links naar andere sites in gewone tekst (<a href="http://...">) geven geen gemengde inhoud; het gaat om dingen die de pagina laadt.

Zoeken en vervangen, maar dan goed

De oplossing voor oude links in je inhoud is alle http://example.com in de database vervangen door https://example.com. De verleiding is een SQL-opdracht als:

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

Doe dat niet. Veel instellingen van thema's, plugins en widgets zijn geserialiseerd opgeslagen. Dat ziet er zo uit:

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

De s:27 betekent: hier volgt een tekst van 27 tekens. Na een kale vervanging is de tekst 28 tekens (er kwam een s bij), maar staat er nog steeds 27. PHP kan de waarde dan niet meer lezen en de instelling valt stil weg: een leeg menu, een verdwenen logo, widgets die weg zijn.

Gebruik een hulpmiddel dat die lengtes bijwerkt:

• WP-CLI: eerst kijken, dan doen.

wp search-replace 'http://example.com' 'https://example.com' --all-tables --dry-run
wp search-replace 'http://example.com' 'https://example.com' --all-tables

Met --dry-run zie je hoeveel vervangingen er per tabel zouden zijn, zonder iets te wijzigen.

• Een zoek-en-vervangplugin die geserialiseerde gegevens ondersteunt (er zijn er meerdere in de pluginmap van wordpress.org). Verwijder de plugin daarna weer.

Maak altijd eerst een back-up (les 8.1). Vervang ook nooit iets als example.com zonder http:// ervoor: dan raak je ook e-mailadressen en andere teksten.

In de praktijk: zo ziet het eruit in een paneel

Als voorbeeld gebruiken we DirectAdmin. Andere panelen hebben een vergelijkbare schakelaar voor "altijd https".

1. Zet bij de domeininstellingen Forceer SSL met https omleiding aan (les 3.1).
2. Kies bij het domein of www naar de kale naam moet gaan of andersom (bij DirectAdmin in de domeininstellingen; anders met een doorsturing via Site Omleiden of .htaccess).
3. Controleer de keten met de opdracht hieronder of met de ontwikkelhulpmiddelen van je browser (tabblad Netwerk, vinkje "Logboek behouden").

Samenvatting

• Kies één canoniek adres en laat de andere drie varianten daar met een 301 (of 308) heen gaan, in één stap.
• Laat maar één partij naar https doorsturen; anders krijg je een rondje.
• Gemengde inhoud is een https-pagina die onderdelen via http laadt; de browserconsole laat zien welke.
• Oude links in de database vervang je met wp search-replace of een plugin die geserialiseerde gegevens begrijpt, nooit met een kale SQL-REPLACE.
• Altijd eerst een back-up, en eerst een proefronde.

Quiz

Opdracht

Opdracht A3.2: Eén hoofdadres en geen gemengde inhoud. Vul je domein in. Het programma opent de vier varianten (http en https, met en zonder www) en volgt de doorsturingen. Goed is: alle vier komen uit op hetzelfde adres met https, met hoogstens één doorsturing per variant en alleen permanente codes (301 of 308). Daarna leest het programma de HTML van de homepage en zoekt naar scripts, stylesheets, afbeeldingen, iframes en lettertypen die via http:// worden geladen.

Verder lezen

Deze artikelen beschrijven de stappen in de panelen van WebOké; in andere panelen werken ze vergelijkbaar.

• DirectAdmin handleiding 6.4: Bezoekers altijd naar https sturen
• DirectAdmin handleiding 4.7: Site Omleiden: een domein of pagina doorsturen
• Bezoekers verplicht doorsturen naar https
• Gratis DNS-cursus 3.4: www, doorsturen en wat DNS niet doet
• Gemengde inhoud (MDN, Engels): https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, Engels): https://developer.wordpress.org/cli/commands/search-replace/