I have a simple peice of jQuery code that submits a form and hides/shows some on screen information. It works fine when tested, until loaded via https:// upon which it breaks in IE7. It appears to break totally, with none of the script having any effect. I also get the IE warning that "some elements are insecure".
Does anyone have any experience of this happening? Or even better, a solution! I have to load the page via https as its a credit card payment page.
If you serve a page via https:// then every resource link should also use https://. Look out for
<script type="text/javascript" src="http://.../jquery.js"></script>
If the client used HTTPS to request the page, then the page should link to all media (images, scripts, stylesheets) via HTTPS.
If the client used HTTP to request the page, then you should send this HTML fragment within your response:
<head>
<script
type="text/javascript"
src="http://my.domain.com/app/media/jquery.js"
></script>
</head>
If the client used HTTPS to request the page, then you should send this HTML fragment within your response:
<head>
<script
type="text/javascript"
src="https://my.domain.com/app/media/jquery.js"
></script>
</head>
The difference is that, when the client requests the page with HTTPS, the server sends back a link to the jquery script that starts with https://.
The three previous answers all mention the problem of a secured "https" page trying to include scripts or other resources (stylesheets, images, etc) from an "http" path...
I would like to add to these, and note that if you have a situation where the same pages could be loaded via either http or https, then you can create "protocol-less" URLs---the protocol will be assumed to be the same as the current page. Note this is only needed for accessing resources on different domains (and will only work if those different domains support both http and https), because obviously if you're accessing resources on the same domain, you don't need to start with http:// at all...
For example, each of these three resources would assume either http or https depending on how the current page was accessed:
<script src="//www.example.com/whatever.js" type="text/javascript"></script>
<img src="//www.example.com/someimage.png" alt="whatever" />
<link href="//www.example.com/styles.css" rel="stylesheet" />
Good luck!
-Mike
Thank you for all your input. The problem was eventually tracked down to an image mentioned in Thickbox.js.
Because that had a http:// (not https://) url it was causing the error message. The security message that pops up has a yes or no to loading insecure content, and clicking yes was telling the browser to stop loading any jQuery at all.
A tricky one indeed so I thought I would answer myself in the hope it might help someone else with the same problem.