Mixed Content with SSL, wordpress behind a reverse proxy

I ran into mixed content with SSL issues.
I’ve applied for Let’s encrypt SSL certificate for my test wordpress site behind a reverse proxy(articaproxy).

The same SSL certificate has been deployed in reverse proxy server and wordpress virtual host.

The reverse proxy http/https redirect works fine.

I forced the siteurl and home url to https in mysql database, to test https

While open my wordpress web site, and click show block content. chrome console prompt ‘This page is insecure (broken HTTPS).’

Chrome console also report that there are some stylesheet/script/image are not served over HTTPS

I’ve tried to install related plugins to fix this, but failed. So they are disabled.

The admin area of my wordpress can not be loaded, due to ERR_TOO_MANY_REDIRECTS

I would like to know how to fix the mixed content and too many redirects in admin logon page issues.

Suggestions are welcomed.

****************** Update ***********************

Hi~ I would like to provide more details about my test wordpress site settings.

Parts of my wp-config.php values related to WP_SITEURL, WP_HOME, HTTPS:

define('WP_SITEURL', 'https://'.$_SERVER['HTTP_HOST']);
define('WP_HOME', 'https://'.$_SERVER['HTTP_HOST']);
define('FORCE_SSL_ADMIN', true);

if ( isset( $_SERVER['HTTP_X_FORWARDED_PROTO'] ) && $_SERVER['HTTP_X_FORWARDED_PROTO'] == 'https')
$_SERVER['HTTPS']='on';

‘siteurl’ & ‘home’ values from field of wp_options in wordpress DB:

https://yuantafood.i-shopping.email
https://yuantafood.i-shopping.email

As commented above, I could only login wp-admin page with my internal IP address.
Try to login wp-admin page with external IP/FQDN can not be loaded, due to error: ERR_TOO_MANY_REDIRECTS.

With googled for many posts, force SSL with .htaccess seems worked for others to escape the mixed content issues.

I also tried with many methods to edit .htaccess, mainly 301 permanently redirect and 302 temporarily redirect.

values of .htaccess file in the wordpress folder(301)

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On

# RewriteBase /
# RewriteRule ^index\.php$ - [L]
# RewriteCond %{REQUEST_FILENAME} !-f
# RewriteCond %{REQUEST_FILENAME} !-d
# RewriteRule . /index.php [L]

RewriteCond %{SERVER_PORT} 80
RewriteRule ^(.*)$ https://yuantafood.i-shopping.email/$1 [R=301,L]

</IfModule>
# END WordPress

# Wordfence WAF
<IfModule mod_php5.c>
php_value auto_prepend_file '/var/www/wordpress/wordfence-waf.php'
</IfModule>
<Files ".user.ini">
<IfModule mod_authz_core.c>
Require all denied
</IfModule>
<IfModule !mod_authz_core.c>
Order deny,allow
Deny from all
</IfModule>
</Files>
# END Wordfence WAF

Both 301 & 302 redirect failed, and caused all site can not be loaded due to ERR_TOO_MANY_REDIRECTS.

Remove all of the force SSL plugins that you’re running, revert back to your default settings in the wp-config.php and .htaccess before applying forces to use HTTPS. This will remove all of the conflicts you are having and the redirect loops. After that, follow these steps:

1. Go and download Interconnect IT’s Database Search & Replace Script here
2. Unzip the file and drop the folder where your WordPress is installed (the root) and rename the folder to replace (screenshot)
3. Navigate to the new folder you created in your browser (ex: http://yuantafood.i-shopping.email/replace) and you will see the search/replace tool
4. In the “search for…” and “replace with…” fields:
   • Replace: http://yuantafood.i-shopping.email/ (HTTP, non-SSL)
   • With: https://yuantafood.i-shopping.email/ (HTTPS)

You can click the dry run button under actions to see what it will be replacing before you execute the script. Once you’re done be sure to remove the /replace/ folder.

Following the steps above should make sure all of your links are running on HTTPS. However, you can also use the Remove HTTP plugin to ensure that there is no more mixed content issues.