Rails app on heroku - reverse proxy to bluehost WordPress site (https to http) - Chrome/FF won't load assets. How to fix?

Question

I have a Rails 4.1 app running on heroku, and it uses a heroku SSL endpoint and has a valid SSL cert (config.force_SSL = true). SSL on the main site works well. I also have a Wordpress blog hosted at Bluehost, not using SSL. I'm using the rack-reverse-proxy gem to present the blog as my-app.com/blog.

The issue is that Chrome and Firefox both refuse to load assets from the blog because the blog is not secure. How do I address this?

Technical details

Let's say the Rails app is https://my-app.com .

And the Wordpress blog (on Bluehost) is at http://myappblog.com .

In my Wordpress Settings -> General, I have both the Wordpress address and Site address set to https://my-app.com/blog (although this problem also happens if Wordpress address is http://myappblog.com or https://myappblog.com ).

Rails routes.rb

get "/blog" => redirect("/blog/")
# I have also tried get "/blog" => redirect("/blog/"), constraints: {protocol: /http/}

config.ru

require ::File.expand_path('../config/environment',  __FILE__)
use Rack::ReverseProxy do
  reverse_proxy(/^\/blog(\/.*)$/,
  'http://myappblog.com$1',
    opts = {:preserve_host => true})
end

Console error in Chrome

[blocked] The page at ' https://my-app.com/blog/ ' was loaded over HTTPS, but ran insecure content from ' http://my-app.com/blog/wp-content/themes/independent-publisher/js/skip-link-focus-fix.js?ver=20130115 ': this content should also be loaded over HTTPS.

Answer 1

I had a similar problem. I mucked around with extra SSL certs and the Wordpress HTTPs plugin, but I could never get everything to play nicely with the rack-reverse-proxy gem.

In the end, I fixed it, with a caveat:

In your routes.rb make sure you explicitly set the full path URL to your blog site:

   #OLD get "/blog" => redirect("/blog/")
   get "/blog" => redirect("http://my-app.com/blog/")

I've also got "Wordpress Address" and "Site Address" set to http://my-app.com/blog .

Caveat :
With this setup, the missing content/css errors may continue if you're requiring SSL for the wp-admin area. Using define('FORCE_SSL_LOGIN', true); in your wp-config.php will let you secure the login at least, and if there's no CSS on that page, it's only affecting the people that need to log in to post to the site. To the general public, everything will look fine.

Answer 2

I eventually resolved this by getting an SSL certificate for the blog (myappblog.com) as well. Once the blog site and the app site were both secure, this wasn't a problem anymore.