0

I've just run into a scenario where a stylesheet was being blocked on a secure payment page.

The stylesheet was loaded like so:

<link href="/CSS/all.min.css?v=2" rel="stylesheet" type="text/css" />

I was getting an error in the chrome dev console:

Mixed Content: The page at https://www.example.com/secure/checkout.aspx was loaded over HTTPS, but requested an insecure stylesheet http://www.example.com/CSS/all.min.css?v=2. This request has been blocked; the content must be served over HTTPS.

I was under the impression that using relative paths (all.min.css is served locally) would ensure that the content gets served under the protocol of the requested page, in this case https, but that was obviously not happening.

I tried a few things to get the CSS working again such as using the full path to the file along with https which didn't work, and on a whim, I decided to remove the 'cache buster' query string ?v=2 and the CSS was served up fine.

That said, I have no idea why this worked, I was unaware that using a query string when referencing a file would prevent it from being loaded securely, could someone explain the reasons for this?

Edit*

You can verify this yourselves, here are the two links:

Notice the protocol switch in the second link?

Do you think this could have something to do with the SSL still using SHA1? An increased security measure imposed by the browser? I noticed that this doesn't happen in IE but in Chrome/FF, the resource is blocked.

  • Check out this link and see if its relevant to your case. I don't think the querystring should have anything to do with it. nedbatchelder.com/blog/200710/… – Andrew Hoffman Nov 26 '14 at 19:35
  • @DGibbs Can you send your code please? Or the URL of your code. – Lucas NN Nov 27 '14 at 4:14
  • @LucasNN I will edit in an example. – DGibbs Nov 27 '14 at 9:11
  • @AndrewHoffman That doesn't really explain much unfortunately, but thanks anyway. – DGibbs Nov 27 '14 at 9:11
2

It's a server configuration issue. No, I don't know why your server is configured to do this, since it's generally a bad idea.

Using my general-purpose HTTP diagnostic tool, wget, to retrieve https://www.w1office.com/CSS/all.min.css, I get:

Connecting to www.w1office.com|91.151.215.29|:443... connected.
HTTP request sent, awaiting response... 200 OK
Length: 41241 (40K) [text/css]

On the other hand, when I retrieve https://www.w1office.com/CSS/all.min.css?v=2, the result is:

Connecting to www.w1office.com|91.151.215.29|:443... connected.
HTTP request sent, awaiting response... 301 Moved Permanently
Location: http://www.w1office.com/CSS/all.min.css?v=2

When the query string is used, your server responds with a HTTP redirect to an insecure address.

  • Thanks for clearing this up, I'll look into the issue further. – DGibbs Nov 27 '14 at 9:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.