Javascript to rewrite "HTTPS" to "HTTP", or Fix HTTPS Progressive Loading

@jamesbcox1980Jan 07.2009

I’m having some trouble with my web pages taking a few seconds to load in Internet Explorer, because it will not Interlace encrypted images or load encrypted HTML progressively. I have to have the HTTPS on my images on some pages that don’t necessarily have to be encrypted, because they can go either way. If I don’t, the page returns a message saying that there are both secured and unsecured items on the page.

Anyway…

I need to find a way to check whether or not the current URL is HTTP or HTTPS and write all the image tags, CSS links, and JS links on the page to match. This way, the page won’t load unnecessarily slow.

The pages are written in ASP, so I can use that as well.

I need to have a script that works in the Header or Footer in the page. We have so much content, it would be a ridiculously mundane to plug a script into each tag. Or… I need to find a way to force IE to load the page progressively the way that Firefox does. This is very important, since 75% (as reported by Google Analytics) of our users are IE users. Why I don’t know, but that’s a fact. They 50% or IE users have been abandoning their cart at checkout, while only 5% of other browser users have been doing so. We found out that IE users were getting a message at checkout that the site wasn’t secure, so we’re trying to fix that.

Maybe I’m way off on this. Maybe it’s more simple than I’m thinking. I tried using relative URLs, but that was causing some major problems. Also, alot of the content is coming from an S3 Amazon account off-site, so that is another reason that won’t work. Any ideas?

Thanks in advance!

to post a comment

JavaScript

9 Comments(s) _↴

@TheTeenScripterJan 08.2009 — #instead of using absolute paths (including http://blahblah/blah.gif) in each src tag, use a relative path instead (../blah/blah.jpg or /blah.gif), the browser should automatically use the same http:// or https:// in the file it's looking for as the page that is loading is using

@jamesbcox1980authorJan 08.2009 — #As I said before, I tried using relative urls. Anything that links to an image located on my site [I]does[/I] have a relative url, but since half my images are located on my S3 account, I can't use a relative path there. For example, the images are located at s3.amazonaws.com, which is not my root. We were having to pay way too much for going over our bandwidth, so we moved a lot of it to S3. (Here is the web page for S3, if you want to know what it is.)

Any other ideas?

@TheTeenScripterJan 08.2009 — #To do this with javascript, the pages' contents must be stored in a variable and gone over with javascript before it gets written to the page, which would make the page completely fail if javascript was turned off.. If done with javascript otherwise, the items would be loaded anyways before javascript would get a chance to change them... Trying to think of a way it could be done otherwise, but can't come up with anything.. I know enough javascript to get it done if there was a way, but it seems you may have to hardcode the paths by hand, per page.. Probably would have to use server-side code to output the absolute paths, and get javascript to tell the server if it is using either HTTP or HTTPS....

@jamesbcox1980authorJan 08.2009 — #You're right, javascript won't write anything until the page is already there, so I'll need to do something serverside. What about a mod-rewrite? I tried using 301 redirects via Volusion's CP, but that only worked with relative URLs and I couldn't specify the protocol.

@jamesbcox1980authorJan 08.2009 — #Nevermind, I got it.

I wrote an ASP file that redirected from a folder on my site.

[CODE]<&#37;
 
 DIM strEncType, strPrefix, strS3, strPath, strUrl
 strPrefix = "http://"
 strS3 = "s3.amazonaws.com/content.closeoutcctv.com/"
 strPath = Request.querystring("P")
 strEncType = Request.ServerVariables("HTTPS")
 
 if strEncType = "on" Then
 strPrefix = "https://"
 End If
 
 strUrl = strPrefix & strS3 & strPath
 Response.Redirect(strUrl)
 %>[/CODE]

Then I referenced my images like this:

[CODE]<img src="/s3/?P=images/assets/dummy.png" border="0" alt="dummy camera" />[/CODE]

This redirects the browser to pull the image from the S3 account, but uses a relative path, so you get the header as well. Then it checks for the header and inserts it into the redirect string. My only problem now is that this code isn't case sensitive, so any folders or files with capital letters aren't getting the redirect correct.

@TheTeenScripterJan 08.2009 — #my abilities with visual basic (or rather vbscript) are limited... i'm sort of leaning towards keeping all of your files in lowercase...

@jamesbcox1980authorJan 08.2009 — #That would be fine, if I did not have so many files and folders that were created before I got here with upper and lower cases...

@TheTeenScripterJan 08.2009 — #I think there is a program on the internet that would allow you to change the names of a bunch of different files at the same time (or you could create a program like that using JavaScript with HTML Applications [.hta]), and you can probably generate a script to change the case of the references in your files, if you are advanced enough with your programming language...

@FixSSLFeb 09.2011 — #I need to find a way to check whether or not the current URL is HTTP or HTTPS and write all the image tags, CSS links, and JS links on the page to match. This way, the page won't load unnecessarily slow.[/QUOTE]

What you are looking for here isn't a script, it's a better way of referencing your URL's on your page.

What you want are called Protocol-Relative Hyperlinks, where you leave out the protocol (the http/https part) and just put the leading double-slash and the domain/path.

Instead of
[CODE] <img src='[B]http://[/B]domain.com/file.jpg' />[/CODE]
or
[CODE] <img src='[B]https://[/B]domain.com/file.jpg' />[/CODE]
use
[CODE] <img src='[B]//[/B]domain.com/file.jpg' />[/CODE]

This will make the browser get the page in either HTTP or HTTPS, depending on the type of page you are currently viewing. It will choose whatever protocol is used on the current page and use that to get the file.

Obviously, you would have a problem if you referenced a file that isn't available over HTTPS from an HTTPS page. To create an HTTPS link to the file if it is only published on an HTTP site, you can use FixSSL like this:

[CODE] <img src='[B]https://fixssl.com/[/B]domain.com/file.jpg' />[/CODE]

For more SSL troubleshooting information, see https://fixssl.com/troubleshooting.php#protocol-relative-hyperlinks and the references at the bottom of the page.

Cheers,

- Brian

Also in #JavaScript _↴

[RESOLVED] Close mailto tab unknown pseudo-class or pseudo-element 'visible'clearing img src with js

Success!

Help @jamesbcox1980 spread the word by sharing this article on Twitter...

Tweet This

Javascript to rewrite "HTTPS" to "HTTP", or Fix HTTPS Progressive Loading

9 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Javascript to rewrite "HTTPS" to "HTTP", or Fix HTTPS Progressive Loading

9 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

9 Comments(s) _↴

Also in #JavaScript _↴