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.

rewrites resources? what do you mean? do you use some output filter? — Michael Tabolsky
@MichaelTabolsky yes, 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;. And the problem comes when nginx puts the links for those resources in the html, always with http. — Danny
mm, sorry then, never used these. but i suspect there has to be some url rewriting. also, you can try to omit the schema in urls. can't say if it works in any situation but I see src="//host.name/uri" pretty often — Michael Tabolsky

sligocki sligocki · Accepted Answer · 2014-02-05T22:51:18

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).

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

1 Answers