CSS Background images refuse to switch to HTTPS

[BizLab]

I'm getting the common "some content is unsecure" error from my SSL login page. After checking into it, i see that the CSS background images are loading under the HTTP protocol and not HTTPS even though they are relative links

 

/css/globals.css

 

I found some information talking about explicitly defining the link href to secure like so:

 

https://www.mysite.com/css/globals.css 

 

which doesn't work.

 

I can't figure out whats going on here, and i would like to remove this warning... any ideas?

Here is a link to the page - http://www.wiki-pet.com/login/index.php

 

Thanks!

[gizmola]

Seems like you figured out your issue.

[BizLab]

Not quite yet... The page still sends unsecure items, ive run out of ideas to fix it though

[gizmola]

Why are you specifying this: 

 

That should be a relative link: /css-v2/global.css

[BizLab]

The original file used the relative link  <link href="/css-v2/global.css" type="text/css" rel="stylesheet"> but this still allowed the CSS background images to load through HTTP, so i tried the suggestion to explicitly declare https:// on the CSS file (for this page only) to see if it worked, but the background images continue to load through HTTP. I didn't bother to change it back yet, because it didn't make a difference either way...

 

See the attached screenshot

 

[attachment deleted by admin]

[gizmola]

Don't have any absolute urls.  They all need to be relative.  For some reason a lot of things are getting 304'd. 

[BizLab]

I changed it back to relative to re-test, and i am still receiving the same error.. here is (what i think) is the problem area:

 

ul.jd_menu{
background: url(../images/site-core-images/naviBG.jpg) top left repeat-x; 
background-color: #666;
height: 25px;	
}
ul.jd_menu_vertical {height: auto;}
ul.jd_menu ul {
height: auto;	
background: url(../images/site-core-images/navi-drop-down-bg.png) repeat top left;
}

 

All of the images included using the background: url(); seem to transfer over HTTP regardless...

[BizLab]

The problem was happening in my .htaccess file. i had a rule that re-directed user connections from HTTPS to HTTP anytime they were not visiting a page that needed to be encrypted... and completely overlooked the 301 redirects on the linked files! Once i removed the 301, the background images were all requested through HTTPS.

 

Unfortunately for me, i still see the "some content is unsecure" error but i don't see anything else on the page that could be causing this.. all links are relative.

 

back to the drawing board on this one

 

Thanks for the help gizmola!

[BizLab]

More progress for anyone that reads this post :

 

If you are using SSL selectively on a site (eg: only the login, sign up pages) you can transition the user in and out of HTTPS using .htaccess like

 

#Re-write all URLs to www.
RewriteCond %{SERVER_PORT} 80
RewriteCond %{HTTP_HOST} !^www\.wiki-pet.com$ [NC]
RewriteRule ^(.*)$ http://www.wiki-pet.com/$1 [R=301,L]

#Re-write all links back to unsecured for the main site
RewriteCond %{SERVER_PORT} 443
RewriteCond %{REQUEST_URI} !^/join/ 
RewriteCond %{REQUEST_URI} !^/css/ 
RewriteRule ^(.*)$ http://www.wiki-pet.com/$1 [R=301,L]

 

and then in the individual directory that you wish to be secured:

 

RewriteEngine On
RewriteCond %{SERVER_PORT} 80 
RewriteCond %{REQUEST_URI} join 
RewriteRule ^(.*)$ https://www.wiki-pet.com/join/$1 [R,L]

 

this forces HTTPS when entering the "join" directory under port 80 (HTTP) BUT will also allow your CSS directory to send you HTTPS requests WHILE not absolutely requiring all CSS requests to be served under the HTTPS protocol. They should only be served through HTTPS in the event that they were requested in HTTPS

 

 

(still seeing the "unsecure content" error though)

[gizmola]

#Re-write all links back to unsecured for the main site
RewriteCond %{SERVER_PORT} 443
RewriteCond %{REQUEST_URI} !^/join/ 
RewriteCond %{REQUEST_URI} !^/css/ 
RewriteRule ^(.*)$ http://www.wiki-pet.com/$1 [R=301,L]

 

This is your problem.  You are rewriting everything that is not in /join or /css to redirect via a 301 back to http://

 

For example you have /ads.  I would suggest that you just comment out that entire section for now until you've got your secure page working properly.  Then if you really want to redirect like that you need to include every directory where any asset that could be called under https needs to be included in the list of exclusions:

 

RewriteCond %{REQUEST_URI} !^/ads/ 
RewriteCond %{REQUEST_URI} !^/js-v2/
etc. 

 

 

[BizLab]

i totally agree, but the sample of data i provided was only for example purposes, my actual .htaccess has each directory listed. I tried removing the re-directs all together but still had no luck... if only there were a tool that actually showed what the browser was looking at that wasn't secured. I can't find anything that does that in firebug. If the browser recognizes it and throws the error, it must be visible somewhere! dare to dream lol

[gizmola]

Something is wrong because the site is still generating a 301 for https://www.wiki-pet.com/ads/login/test-ad-1.1.jpg

[BizLab]

DUDE, seriously??? How did you find that?

 

THAT WAS IT! The last unsecured item!!

 

Thanks!