Firefox SSL and JQuery UI

Question

I'm experiencing an odd problem where my page's SSL breaks in firefox if I incorporate a JQUERY UI Dialog box.

Works fine in I.E. 8 and Chrome.

I read about an issue introduced by CSS base64 image encoding breaking the SSL but I've tried removing the style sheet completely and the problem still occurs.

Has anyone run into this? If not can you suggest a good way to progress in hunting the cause down? I'm currently cutting code out and retrying but it's painfully slow (easier if it was a static element).

The call that breaks the SSL is...

<script type="text/javascript" charset="utf-8">

jQuery(document).ready(function() {

    $( "#dialog" ).dialog();

});

</script>

So as soon as the dialog box ID is ripped out and moved to the end of the document the problem occurs.

Answer 1

I think what's going on here is that the jquery-ui-1.8.2.custom.css file is referencing images that are redirecting to the non-SSL 404 page.

Answer 2

I know you'll get a "mixed content warning" if you have any JavaScript files being served from non-https locations. Try using absolute paths to see if that's the issue. If it is, you can either a) stick with the absolute paths or b) use relative paths.

Answer 3

I had similar problem and I found a wordaround to the "non secure items" alert in IE8+. The alert occurs if you are creating dynamic content with jQuery using wrap() or append() functions, and if this content contains CSS with relative paths to images, or any other external elements.

Exemple :

$('#mynode').wrap('<div style="background:url(/path/to/image.gif);"></div>');

This will display a security alert even if the image is downloaded on the same HTTPS secure connection.

How to fix it :

• Use full absolute URL : background:url('https://www.domain.com/path/to/image.gif');

• Or use CSS class :

< style > .myclass {background:url(/path/to/image.gif);} < /style >

$('#mynode').wrap('< div class=myclass >< /div >');