使用Apache VirtualHost的Wordpress网站上的混合内容错误

Question

I got Mixed Content errors on wordpress site, after I set up automatic redirection from http to https on apache.

Mixed Content: The page at 'https://example.example.com/' was loaded over HTTPS, but requested an insecure stylesheet http://example.example.com/wp-content/uploads/elementor/css/post-2612.css?ver=1481615259'. This request has been blocked; the content must be served over HTTPS

I want to know if the problem with my htaccess / virtualhost or maybe with the code, css, etc..

My htaccess code looks like this:

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

My VirtualHost looks like this:

<VirtualHost *:80>
    RewriteEngine On
    RewriteCond %{HTTPS} off
    RewriteRule ^/(.*) https://%{HTTP_HOST}/$1 [NC,R=301,L]
    ServerName example.example.com
    ServerAdmin hostmaster@example.com
    DocumentRoot /mnt/data/html1
    ErrorLog /mnt/data/html1/example.example.com_error.log
    CustomLog /mnt/data/html1/example.example.com_access_log combined env=!dontlog
</VirtualHost>

<VirtualHost _default_:443>
    SSLEngine on
    RewriteEngine On
    RewriteCond %{HTTPS} on
    SSLCertificateFile    /etc/httpd/sites-available/crt.crt
    SSLCertificateKeyFile /etc/httpd/sites-available/pem.pem
    ServerName example.example.com
    DocumentRoot /mnt/data/html1
    ErrorLog /mnt/data/html1/example.example.com_error.log
    CustomLog /mnt/data/html1/example.example.com_access_log combined env=!dontlog
</VirtualHost>

<Directory "/mnt/data/html1">
    AuthType Basic
    AuthName "Restricted Content"
    AuthUserFile /mnt/data/html1/.htpasswd
    Require valid-user
    Options Indexes FollowSymLinks
    AllowOverride All
    Order allow,deny
    Allow from all
</Directory>

Answer 1

Tracking down and solving all mixed content issues can be annoying. Here's an excellent guide from google to methodically go through it. https://developers.google.com/web/fundamentals/security/prevent-mixed-content/fixing-mixed-content

personally i have been using cloudflare's auto rewrite system at DNS level, which is completely turnkey and an excellent trick for the lazy.

Although chrome should identify the difference between content loaded via 3rd party (let's say you have JS vendor lib which is pulling in assets from somewhere, I understand this sometimes contributes to the warning, reviewing your network tab in browser will identify which outbound links are triggering the problem.