CODEWITHSUNDEEP
htmlcss
MrJoshFisher
MrJoshFisher

Reputation: 1123

Problems loading style sheets over https

I recently applied an SSL certificate to my domain, but I'm having problems with some of the styles when viewing my website on HTTP:// the styles are fine. But, when viewing it through HTTPS:// no styles are applied at all.

I found out what the problem was. I wasn't loading my third party styles through HTTPS. I switched to HTTPS, and all problems were solved.

Upvotes: 19

Views: 51163

Answers (2)

Kornel
Kornel

Reputation: 100110

You're probably using an http:// link to a stylesheet on an https:// website.

Secure websites are not allowed to mix protocols. Everything has to be embedded from a secure server. Browsers will ignore/block HTTP resources on HTTPS pages (with varying degree of strictness).

The reason for this blocking is that insecure HTTP resources like stylesheets and scripts could still be modified by an attacker and used to spoof/hijack secure parts of the site.

If the stylesheet is served from your server, then omit protocol+host part of the URL, i.e. instead of http://example.com/style.css use /style.css as the URL, so it'll work on both HTTP and HTTPS. You can also use protocol-relative URLs.

If you have to have one full URL, then use https://… URLs only.

Upvotes: 28

Explosion Pills
Explosion Pills

Reputation: 191739

If the requested URI is https, if you have resources on the page (images, stylesheets, JavaScript files et. al.) that are requested with the http scheme some browsers may block them because they are considered insecure. You can circumvent that per-browser, but you also have alternatives in your code:

  1. Use https to request everything, or at least match the schems.
  2. Use // to indicate the scheme. The browser will match the scheme with the request URI. For example: <link rel="stylesheet" type="text/css" href="//example.com/path/to.css">

Upvotes: 9

Related Questions