Mixed content error in WordPress

Symptoms

After loading a website, the "Loading mixed (insecure) display content" error appears in the browser console.

The mixed content error can be seen in the developer tools of your browser.

Causes

The mixed content error occurs when a web page is loaded over HTTPS protocol, but some of its elements are loaded over HTTP protocol:

• The site settings or content use absolute URLs with the HTTP protocol instead of HTTPS, for example due to file import.
• Some of the plugins or themes contain links to resources that use HTTP.
• The site page is cached.
• External libraries or fonts are used that are loaded over HTTP.

Solution

It is necessary to find and adjust all links that directly indicate the use of the HTTP protocol.

For example, a link <img src="http://your.website/image.png"> must be replaced with a link <img src="https://your.website/image.png">.

There can be a considerable amount of mixed content, which can be difficult to detect manually. In this case, it is best to install a special "ssl-insecure-content-fixer" plugin. In the WordPress settings, in the section "Insecure SSL content" - "HTTPS detection" select the option HTTP_X_FORWARDED_PROTO.