URL paths in optimized CSS sometimes are https instead of http

Question

The expanded URLs inside my optimized CSS files are sometimes getting generated with https instead of http. This appears to happen randomly. Doing a cache clear, recreates the optimized CSS and usually the URLS are correctly expanded using http.

The source CSS files have relative paths in them, for example:

@font-face {
  font-family: "my-custom";
  src: url("../fonts/my-custom/my-custom_47f454dc1e054575ab6c2a63cbc17e46.eot");

In the optimized CSS this gets expanded to a full URL:

@font-face
{ font-family: "my-custom"; font-style: normal; font-weight: normal; src: url("http://i.cdn.my.com/drp/.../assets/fonts/my-custom/my-custom_47f454dc1e054575ab6c2a63cbc17e46.eot?#iefix") format("embedded-opentype"), 

Then, seemly randonly it will be:

@font-face
{ font-family: "my-custom"; font-style: normal; font-weight: normal; src: url("https://i.cdn.my.com/drp/.../assets/fonts/my-custom/my-custom_47f454dc1e054575ab6c2a63cbc17e46.eot?#iefix") format("embedded-opentype"),

I have CDN enabled on the site, so that might be a factor. But again why is the behavior seemingly random?

Any suggestions on where to start looking in settings, hooks that affect CSS optimization behavior, known bugs with CSS optimization, etc. would be appreciated.

Answer 1

I don't think the behaviour is random.

These files are regenerated periodically, and the regeneration is mainly going to be triggered by visits to pages. I would guess that the urls in the CSS files get http when the page that triggered the regeneration has http, and https when the page that triggered the regeneration has https.

Prepending the URLs in CSS with the full protocol and domain is not a stock Drupal behaviour, so something in your setup is doing it–probably whatever module you're using to set up the CDN. You don't mention which module you're using for this, so it's difficult to say. I would begin by looking in the module settings.

It's also possible that your CDN service itself rewrites the urls in CSS files. Cloudflare, for example doesn't do this, but does have configurable options that rewrite certain files (such as, e.g., minifying css, js, or html).

Answer 2

The Advanced CSS/JS Aggregation module should sort out the http/https issue inside your css files, as long as $GLOBALS['is_https'] is set correctly; that variable is set inside of drupal_settings_initialize() so it should work. Give it a try.

If it's not working after using AdvAgg try adding this to your settings.php file

// Set https to on if it should be.
if ( (isset($_SERVER["HTTPS"]) && strtolower($_SERVER["HTTPS"]) === "on")
  || (isset($_SERVER["HTTP_X_FORWARDED_PROTO"]) && strtolower($_SERVER["HTTP_X_FORWARDED_PROTO"]) === "https")
  || (isset($_SERVER["HTTP_HTTPS"]) && strtolower($_SERVER["HTTP_HTTPS"]) === "on")
  ) {
  $_SERVER["HTTPS"] = "on";
}