How to use CloudFlare "Flexible SSL" with Nginx PageSpeed filters

Question

I just started using CloudFlare "Flexible SSL", this allows the user to have SSL when connecting to my server (via CloudFlare of course).

Here's how the request goes:

Visitor <-- SSL --> CloudFlare <-- non-SSL --> My Server (Nginx w/pagespeed)

The problem comes when Nginx rewrites my resources (css, js, jpegs, etc), nginx always receives an http request from CloudFlare, so obviously Nginx returns the resources as http (in the html) and when the user tries to load them they get an ugly icon on their browsers alerting of insecure content, or not loading at all insecure content breaking the page completely.

These are the filters I'm currently using: pagespeed EnableFilters move_css_above_scripts,move_css_to_head,rewrite_style_attributes,combine_javascript,insert_image_dimensions,collapse_whitespace,sprite_images,ins‌​ert_dns_prefetch;

So how can I make nginx pagespeed to return the resources as https? and how as non-https when the request is http?

Thanks.

Answer 1

As long as CloudFlare sends the standard X-Forwarded-Proto header, you can fix this by simply enabling RespectXForwardedProto:

    pagespeed RespectXForwardedProto on;

If that doesn't work, that probably means that CloudFlare is not sending proper X-Forwarded-Proto headers. If so, you can try enabling PreserveUrlRelativity:

    pagespeed PreserveUrlRelativity on;

Which will rewrite URLs, but leave them as relative URLs (so that they work with both HTTP and HTTPS).