www, redirects and mixed content

Module 3: Address, https and users · Reading time: 9 minutes

Learning objective: After this lesson, you can choose one main address, redirect all variants there with a single redirect, and find and fix mixed content.

Key concepts: canonical address, 301 and 308, redirect chain, mixed content, search and replace in the database, serialised data

Four addresses, one website

Your website can be reached via four addresses:

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

This doesn't matter to a visitor, but to search engines these are four different addresses with the same content. Cookies (such as your login cookie) also apply per name: someone who logs in on www isn't logged in on the bare domain. That's why you choose one canonical address (the main address) and redirect the other three to it.

Which one you choose is a matter of taste (lesson 2.1). What matters is that the main address is the same everywhere: in the DNS, in the certificate, in Settings > General (lesson 3.1) and in the redirects.

Redirecting with a 301, in one step

A redirect is a response from the server: "this page is somewhere else". The browser then automatically goes to the new address. The code states what kind of redirect it is:

A permanent redirect tells search engines that the new address is the real one. With a temporary one, they keep remembering the old address.

Also watch out for the chain. Say your main address is https://example.com. Then you want:

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

Each variant reaches the main address in one step. What often happens:

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

This does work, but it costs an extra step (extra waiting time, especially on mobile) and an extra TLS handshake. Worse is a loop: the web server redirects to https, WordPress redirects back to http because the addresses in the settings are still set to http, and the browser reports "too many redirects". Then two settings are working against each other. Make sure only one party redirects to https (the web server or the panel), and that the addresses in WordPress are already set to the main address.

WordPress also redirects on its own: if someone requests https://www.example.com/contact/ while the website address is https://example.com, WordPress redirects to https://example.com/contact/. This only works if the request reaches WordPress, so the web server must also route the www name to this website.

Mixed content

Mixed content is an https page that loads elements via http://: an image, a stylesheet, a script, a font or an embedded video. The browser considers this unsafe, because those elements could be altered in transit.

• Scripts, stylesheets and iframes via http are blocked by browsers. Your website then looks broken or a feature doesn't work.
• Images, audio and video via http are automatically retried via https by modern browsers; if that fails, they're blocked. The padlock may then show a warning.

Where it comes from:

1. Old links in your content: a website that used to run on http has <img src="http://example.com/wp-content/uploads/..."> in thousands of posts. WordPress stores those links literally in the database.
2. Theme or plugin settings with a full address, for example a logo or background with http://.
3. External elements from another website that can only be reached via http. These need to be replaced or removed.
4. Addresses in Settings > General that are still set to http (lesson 3.1).

How to find it

Open the page, press F12 and look in the Console tab. The browser reports every instance of mixed content with the address of the element. Or search the page source (Ctrl+U) for src="http:// and href="http://. Plain text links to other websites (<a href="http://...">) don't count as mixed content; it's about things the page loads.

Search and replace, but properly

The solution for old links in your content is to replace every http://example.com in the database with https://example.com. The temptation is an SQL command like:

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

Don't do that. Many settings from themes, plugins and widgets are stored serialised. It looks like this:

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

The s:27 means: a text of 27 characters follows. After a plain replacement the text is 28 characters (an s was added), but it still says 27. PHP can then no longer read the value and the setting silently disappears: an empty menu, a missing logo, widgets that are gone.

Use a tool that updates those lengths:

• WP-CLI: check first, then do it.

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

With --dry-run you see how many replacements there would be per table, without changing anything.

• A search-and-replace plugin that supports serialised data (there are several in the plugin directory of wordpress.org). Remove the plugin afterwards.

Always make a backup first (lesson 8.1). Also never replace something like example.com without http:// in front of it: that would also affect email addresses and other text.

In practice: what it looks like in a panel

As an example we use DirectAdmin. Other panels have a similar switch for "always https".

1. In the domain settings, enable Force SSL with https redirect (lesson 3.1).
2. For the domain, choose whether www should go to the bare domain or the other way round (in DirectAdmin this is in the domain settings; otherwise with a redirect via Site Redirects or .htaccess).
3. Check the chain with the command below or with your browser's developer tools (Network tab, "Preserve log" checkbox).

Summary

• Choose one canonical address and let the other three variants redirect there with a 301 (or 308), in one step.
• Let only one party redirect to https; otherwise you get a loop.
• Mixed content is an https page that loads elements via http; the browser console shows which ones.
• Replace old links in the database with wp search-replace or a plugin that understands serialised data, never with a plain SQL REPLACE.
• Always back up first, and do a trial run first.

Quiz

Exercise

Exercise A3.2: One main address and no mixed content. Enter your domain. The program opens the four variants (http and https, with and without www) and follows the redirects. Good is: all four end up at the same address with https, with no more than one redirect per variant and only permanent codes (301 or 308). The program then reads the HTML of the homepage and looks for scripts, stylesheets, images, iframes and fonts that are loaded via http://.

Further reading

These articles describe the steps in WebOké's panels; in other panels they work similarly.

• DirectAdmin guide 6.4: Always redirect visitors to https
• DirectAdmin guide 4.7: Site Redirects: forwarding a domain or page
• Force redirect visitors to https
• Free DNS course 3.4: www, redirects, and what DNS doesn't do
• Mixed content (MDN, English): https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content
• wp search-replace (developer.wordpress.org, English): https://developer.wordpress.org/cli/commands/search-replace/