views:

2635

answers:

8

I have a page that is viewed secured with 'https' in the URL, that also contains youtube urls to play video from youtube. Since the youtube URL contains 'http' with no 's' IE is giving an a warning dialog of "This page contains both secure and non-secure Items."

Is there a way I can workaround this in Javascript? Maybe after the page loads generate the youtube player HTML with a function? The url will still have to begin with 'http://'

EDIT: Thanks everyone for the input so far! I know this sounds impossible. I'd be happy if there was some conditional comment or something so I can tell IE to suppress this dialog box. It confuses our customer since most of the world is in IE, FF has much better behavior in that it tells you if you click the broken lock, but not an annoying popoup. This is like a new version of "your program has performed an illegal operation." (user hides from police) I am embedding youtube video onto the page where the src is from youtube. I am using their player, as it is hosted by them. No way out of this that I see.

I guess my fix is to only apply HTTPS to the very sensitive pages (password change, login) and come out of it in all others so youtube videos don't give this popup. I am in PHP and am worried the SESSION will get clobbered if I do this but I guess it is the only way around and will wait to tackle that bear monday.

+2  A: 

If there was a way around it would be a security flaw in IE and Microsoft would patch it, so I don't think you're going to get away with mixed content and no warning.

The only alternative is to host the FLVs yourself. There are a number of good SWF based FLV players available.

Iain M Norman
+4  A: 

One thing I've done to work around this problem is to create a page on my SSL site that proxies in the 3rd party resource. That way the client only sees SSL URLs.

For example, you flash player could point to the URL "https://YourSite.com/proxy.aspx?URL=http://www.youtube.com/video.swf". When "proxy.aspx" is called, it would make a new web request to the URL in the query string and return the data to the client.

If you do this you need to validate the proxied URL or use some kind ID so that the URL can not be changed since you are convincing the browser that this content is trusted.

David
Hey David, could you share your proxy.aspx url so I can route some of my browsing through your provider? ;-)
Dscoduc
I don't think he's going to reply! :p
Wayne Khan
My proxy page is on an intranet so you wouldn't be able to use it. It's simple to create your own with .Net, though. Just use the System.Net.WebClient and call DownloadString with a URL specified on the QueryString.
David
A: 

Your problem occurs become the main page is grabbed using Https whilst one or more included files ( images, javascript, css etc ) is fetched using http. Fix the http url to be https.

mP
Whats wrong with my answer - it correct.
mP
Your answer is being voted down because the question makes clear that he is aware of this being the cause of the security warning, and that the answer you are suggesting is not an acceptable solution to his problem.
Robert J. Walker
+1  A: 

Having insecure links on a secure web page is an issue that has little workaround. One option is to exclude specific content on your page when a user connects via https. In this way a non-secure page load would display the content and a secure page load would not display the content:

<% if (!Request.IsSecureConnection){ %>
    <div>You can't see this if the page is secure<div>
<%} %>

I have used this method with much success... Hope this helps.

Dscoduc
A: 

Using Javascript to replace the URL does not work. IE7 intercepts the content, and thereafter, the warning.

I tried using (jQuery) $(function() { }); it sortof works. You can click yes/no to the dialog, the content will load nonetheless.

Wayne Khan
+1  A: 

I've worked around this problem on all browsers using the following:

1) Create a thumbnail image of the start of the video with the "Play image" tag on the snapshot and host the image on your own https server. Embed the thumbnail where you want the video to be.

2) When the user clicks on the image invoke a Javascript onclick handler to create a new window with the href of the http embedded youtube video.

function onImgClickHandler() {
  //Link to embedded Viddler or Youtube video
  var win = window.open("http://www.viddler.com/player/###/", "My Video",
    'height=500,width=800,resizable=yes,scrollbars=yes');
  win.focus();
}

3) The video will now appear in a popup of the main page.

I usually use videos as tutorials for my site, so having the video in a popup browser window works well because it can be viewed alongside the main content and lets the user follow along with the site. The browsers do not even give a redirect warning that you are invoking an http popup from an https site, so your users will not see any "scary" non-secure item warnings on any browsers.

Hope this helps, I have an example of the above on the landing page of my site: https://drchrono.com/

UPDATE: I made the image preview by taking a screenshot of the playing video.

MikeN
Thanks for the good answer. Unfortunately the customer doesn't like popup windows on their site, so I told the designer we either need to use popups or have people deal with the warning message from the browser. Just curious, how do you make thumbnails of a youtube video?
tkotitan
+1  A: 

Similar to the approach outlined using ASP.NET to create a proxy, you can do the same with a SWF, as outlined at http://omgwtfinternet.blogspot.com/2009/05/052209-embedding-youtube-videos-on.html

A: 

Here's a quick way to embed youtube videos on ssl secure pages without any errors:

http://www.adammershon.com/how-to-embed-a-youtube-video-on-a-secure-page/

Adam