My Blog on all different subjects

HTML Trick: How to link image from another site that will work when your user is in HTTP or HTTPS mode

Sep 8

Written by: Travis Whidden
9/8/2007 10:35 AM

I have been involved with web design for many years. Even with 15 years under my belt, I still am amazed when I find something I didn't know. I am not saying I know everything, its just those things that you wish you knew about years and years ago that really get your excitement up.

The other day, I was looking at the HackerSafe code that my company (http://www.amhosting.com) has on its website. I saw the way they put in an image tag and I was like, "what the heck.. they have a bug in their code". Before I went crazy, I decided to look at my live production code and noticed that the way they linked the image was the same in their code they were trying to give me.

So you know what I am talking about... this is what they put in the code:

src="//images.scanalert.com/meter/www.amhosting.com/12.gif"

Notice how src="// part for it. That is where the magic happens

This is why its important. This image is located on my company website: (Secure SSL Mode)

https://www.amhosting.com/MyAccount/UpdateBillingContactInformation/tabid/746/Default.aspx

and the same image code is located on a non https page: (No SSL)

http://www.amhosting.com/Home/tabid/293/Default.aspx

The browser actually knows based on what state your page is on what to call to the remote server. If you didn't have your code like this, it would throw a security error to the end user asking them if they want to show insecure images. Not only does that break credibility, but it also is very annoying between page clicks.

I know this is a very "small" finding, but it is very useful when building ecommerce sites that link to outside content. I hope you are as excited as I am with this very small find.

Trackback Print

Location: Blogs

Travis Whiddens Blog

Software Development

Tags:

4 comments so far...

Re: HTML Trick: How to link image from another site that will work when your user is in HTTP or HTTPS mode

so your saying pretty much - instead of putting

OR

I can just put this throughout and it will auto determine http or https

Right ?

Does this work on all browsers ? IE6, IE7, FF, Opera, Mobile Devices ? I tried to google on it but I can't find anything bro.

By Arthur on 9/18/2007 9:50 AM

Re: HTML Trick: How to link image from another site that will work when your user is in HTTP or HTTPS mode

Yes, that is what should happen. I have tested in IE and FF, and it works great.

By Travis on 9/18/2007 1:02 PM

Re: HTML Trick: How to link image from another site that will work when your user is in HTTP or HTTPS mode

I'm going to have to give this a try. My only concern is that my images are on domain.com/images and my SSL cert is for the subdomain secure.domain.com. I have a symbolic link for secure.domain.com/images that points to the proper folder... curious how this would work.

By Arthur on 9/18/2007 1:06 PM

Re: HTML Trick: How to link image from another site that will work when your user is in HTTP or HTTPS mode

Nope - does not work with the SSL cert pointing to a subdomain, it would have to be to the root domain.

By Arthur on 9/18/2007 2:04 PM

Your name:
Title:
Comment:

Security Code Enter the code shown above in the box below
Add Comment Cancel