I'm working on a site that requires a login and includes embedded Youtube videos. Because of the login, I need to get SSL working, which it largely is. I'm hitting an unexpected problem with the Youtube embeds, though. It's easy enough to point at https://www.youtube.com, but Firefox still complains that there's unencrypted content on an encrypted page. According to Firebug, the only unencrypted load was from http://[stuff].youtube.com/videoplayback?[more stuff].
Now, it's perfectly understandable that Youtube doesn't want the overhead of encrypting their video streams, and I don't think that this poses an actual security vulnerability. I just need to keep the browser happy. (I know that that warning can be disabled, of course, but I can't do that on my users' machines.) There must be a way to do this, because https://www.youtube.com itself doesn't make this error pop up, even though it uses http: for the video streams, too.
I have not seen similar errors in other browsers, but I haven't looked very hard just yet.
If it matters, my development machine doesn't have a valid SSL certificate; I just added an exception.
If you are using <iframe> use <embed> or check other embedding code options that YouTube API provides.
I have a ssl secured website and this works for me in Firefox
<iframe id="player" src="https://www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
I don't have a solution, but a suggestion instead: Are you sure not having a valid SSL certificate couldn't have something to do with this? You wouldn't think so, but you never know. If you get one, and it still doesn't work, it's not something you wouldn't have had to do anyway. I went through the process of obtaining/installing and configuring SSL key(s) and certificates for my home server, and every little thing seems to have an impact on how SSL acts/reacts.
Also, have you tried accessing the site outside of the local network it's on? It sounds like you're on the same network as the server which is hosting the site (the one that has SSL installed), which can create problems itself because of NAT traversal (I believe, but correct me if I'm wrong - we're all here to learn). Sometimes with HTTPS, you can have a problem connecting to resources within the local network, that people on the internet would have no problem at all connecting to. Just my two cents.. and sorry for any incorrect info, if I provided any. Take this all with a grain of salt, but hopefully you'll find the answer to your problem. Things like this can be a pain in the rump.
There may not be anything you can do about this, also.. because Youtube seems to not provide content over HTTPS... which is out of your control. I know you don't contest the error you're being given, and just want a workaround, however.
BTW, I think their homepage is HTTPS enabled, just not their video content...so that's why embedding the homepage wouldn't produce the error.
EDIT: Also, I see someone else wrote to use embed instead of iframes, which I would also recommend. The browser treats iframes like another page, but the error your getting indicates the unsecure content is actually combined with the secure content, so everything should be fine with that... but you never know.
Try the page with the Firefox "inspector / network ananlysis" (shift-ctrl-I) to analyze what elements are requested. I guess it's some javascript INSIDE the that you don't have under your control. In any case you should be able to pinpoint the specific trigger with this tool.
Check wheter it makes a difference when switching your browser to HTML5 instead of Flash for the video or vice versa. YouTube recently changed the default protocol to HTML5.
Is it possible by your website design that you could try fetching the youtube videos by an http call instead of an https? I don't know the layout of your site, but if you're just wanting it to stop complaining, that should do it.
That said, youtube DOES have valid https certificates, but that's due to the google integration. Since you aren't google, you wouldn't read as the valid certificate holder when accessing youtube's content (that's the exact kind of thing SSL's are meant to guard against).
So, basically, if you can, just embed via http instead of https. YOUR site can still be https, just not the call to youtube.
Please remove http then u check..
for example
<iframe id="player" src="www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
just remove ( http or https ) with colon, it will work perfectly
example
<iframe id="player" src="//www.youtube.com/embed/XfI....Ctpo?enablejsapi=1&origin=https://yourdomain.com&showinfo=0&iv_load_policy=3&modestbranding=1&theme=light&color=white&rel=0" frameborder="0"></iframe>
A much simpler way to do this is to download the video itself and then link to it locally on your server e.g save it in the same directory as your page and then just link to it there.
Related
One day youtube stopped working on all browsers. It loads preview of the video and then loading infinite circle appears. Sometimes it shows the message: if playback doesn't begin shortly, try restarting your device. I cleared coockies, history etc. two times. I found something about the hosts file, but the original file contains the same exact thing the guide was recommending to replace. There similar problems with youtube, but i didn't find anything that could possibly solve the issue except the host file.
Whether the problem only occurs on the YouTube site? Try to play some online video from another site, such as Bing and Google.
If this issue only occurs on the YouTube site, perhaps the issue is related the YouTube site, you could check the YouTube help forum and contact with them.
If another site also has the same problem, perhaps the issue is related to your network or computer. Please check the network connection and check which version of OS and Browser version are you using? Then, try to Restart your browser, Restart your router, Restart your computer or Update your browser to the latest version.
Make sure you use propper audio device.
I have the problem, that my website acts different if I call it via the https protocol. To be more precise it looks like it handles the CSS in a different way.
What I want (and how it actually works via http) is kind of a navigation with different tabs. Here is an image of the navigation part:
http navigation
And here is an image of how it looks like when it's called via https:
https navigation
I have also created a fiddle with this part of my website although it does not proper work inside the fiddle. (maybe because the jsfiddle site is also via https protocol?)
Fiddle
However, please have a look at the current website to see the difference:
This is the website via http:
http website
and here how it looks like when it's called via https:
https website
You guys ever had a similar problem or any idea how to solve it?
I was the opinion that the protocol should not make a difference.
Take a look at your console.
You should see a lot of Mixed Content errors or warnings if you are using Chrome.
When a website is served over HTTPS, all its resources must be served over HTTPS too. When a resource is not loaded over HTTPS, the browser will block it because otherwise it defeats the whole purpose of using a HTTPS.
When one resource is blocked, the content from these resources won't get executed. Maybe that is the reason why your layout breaks because something is not being executed properly.
So try to change your resources into HTTPS protocol. If you are using APIs and those API does not provide HTTPS link, then you should look for another API.
In your case
This is the culprit.
http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,300italic,400italic,700italic
You can find it in head section.
Your font should be in Source Sans Pro but because it was blocked, Helvetica or Arial was used instead. Thus breaking the layout.
Change it to HTTPS and it should be fine.
I don't know much about HTTP requests, but I can tell you two things:
- The browser cascades and parses CSS in different ways. HTTPS requests are processed in different ways. Maybe check you cascade.
- That website looks nice
I have a site hosted on AWS S3, with CDN managed by Cloudflare. For most purposes the site works fine, but when I try to share it through the social media app WeChat, I get a warning (pictured below) and then the site doesn't render properly. This doesn't happen consistently, but when the warning appears, then the site fails to load properly.
My first line of thought was that the problems might be that the different settings of S3 compared to a more standard Apache server were triggering some security issue in WeChat, and that Cloudflare might fix the problem, but it doesn't seem to have made any difference.
Removing Google Analytics and all CDN-ified resources also doesn't seem to have made any difference.
Any thoughts or input on either weirdness in the WeChat browser's rendering rules or why S3 might be triggering a warning would be greatly appreciated. Running into a bit of a wall here.
tl;dr WeChat shows a warning for certain top-level domains. My site was on a .me tld, which triggered a warning. The page rendering incorrectly is based on the warning (not sure about why these two things are connected)
After messing around with https (security issues) and removing all CDN-ified assets (thought they might be blocking down rendering), and hosting the site in China vs outside of China, I finally stumbled upon this. Nothing else matters. Its just the tld that triggers the warning and causes the rendering problem.
I had the following iframe which renders the Video.In IE8, I am getting the security popup error.
<iframe src="https://fast.wistia.com/embed/iframe/223ewe311111112?videoWidth=310&videoHeight=120&controlsVisibleOnLoad=true&playerColor=1213221&plugin%5Bsocialbar%5D%5Bversion%5D=v1&plugin%5Bsocialbar%5D%5Bbuttons%5D=email-twitter-googlePlus-facebook&plugin%5Bsocialbar%5D%5Blogo%5D=true&plugin%5Bsocialbar%5D%5BtweetText%5D=May%20to%I%20New%Help%20You%20&plugin%5Bsocialbar%5D%5BbadgeUrl%5D=https%3A%2F%2Fwistia.com&plugin%5Bsocialbar%5D%5BbadgeImage%5D=https%3A%2F%2Fprime-cdn.wistia.com%2Fdeliveries%2Fe6e6be3fsdfsdfsdfsdf7e0a69.jpg%3Fimage_crop_resized%3D100x20" target="_blank" rel="nofollow" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="310" height="120"></iframe>
I came to know that they updated their IFRAME API on their framework.Will it be a cause for rendering the popup in IE8 only.Using HTTPWATCH plugin in IE8,I found that all resources are rendering HTTPS only.So, because of this iframe tag only it is rendering the popup.I put this iframe tag in seperate HTML page and opened it in IE8 browser.It is showing Security popup.
First, you better get that example embed code checked out! :) It doesn't look like the iframe src is valid (it leads to a 404 page), which made this a little difficult to test. There are also some weirdnesses like target="_blank" on the iframe, which I don't think is produced by Wistia.
Anyway, I stapled the options onto a different media's embed code and I think I figured out your issue. The domain for the logo in the socialbar is what's causing the security warning.
If you upload your logo in the SuperEmbed Builder then switch to an SSL (under Embed Type > Advanced Options), it will also switch the domain of the logo to one that has a security certificate. I'm guessing that you produced a non-SSL embed, then manually switched it from http: to https:. In many cases this doesn't matter, but it does in this one unfortunately.
My recommendation is to produce the embed code directly from the SuperEmbed Builder and switch SSL on there.
What's the nature of the error you're getting? "Unsafe JavaScript attempt to access frame with URL [URL redacted] from frame with URL [URL redacted]. Domains, protocols and ports must match."
If so, there are a number of threads here at StackOverflow that also mention this error. while annoying, is extremely unlikely to be detrimental to how your site works, it's simply a symptom of having unmatched domains, ports and protocols between the iframe and page its embedded on.
So yeah, as long as the content on the page appears to be fine, you can most likely ignore that particular error.
As an alternative, try the Wistia API embed style, which you can also use SSL with--should help you avoid seeing this.
Visiting my site in SSL and in Chrome (12.0) I get
Your connection to someWebsite is
encrypted with 256-bit encryption.
However, this page includes other
resources which are not secure. These
resources can be viewed by others
while in transit, and can be modified
by an attacker to change the behaviour
of the page.
The connection uses TLS 1.0.
The connection is encrypted using
AES-256_CBC, with SHA1 for message
authentication and DHE_RSA as the key
exchange mechanism.
The connection is compressed with
DEFLATE.
I searched with FireBug (NET tab) and Chrome Inspector and all resources are accessed via https. Where is the problem? *I cleared the cache already
What could be the problem?
Chrome will give this error if you've visited another https page on the same domain that had mixed content however this should not be the problem if you've tried clearing your cache.
You might want to try Ctrl-Shift-J for the JavaScript console, it should show the insecure content.
I have the same thing - and I read from the Google Chrome help site that elements on the site are not encrypted - like videos. I looked via Firefox - right click->View Page Info->Media tab and saw that every time I use a YouTube video in my video player I have plain http addresses like:
http://s.ytimg.com/yt/swfbin/watch_as3-vflrEm9Nq.swf and
http://img.youtube.com/vi/V6JgyNy59yA/1.jpg
I think these non https links are causing the security message site-wide. Thus, it appears using videos from 3rd party sites will always throw a security error in Google Chrome for https pages.
That's my answer - but I have no solution yet. I need to be able to share videos from youTube in our news section, but my online store section needs to use https without scary red letters and slashes through it for my clients.
Has anyone dealt with this effectively?
Thanks
Had the same problem on my Magento Site. Be sure to change all image and js links (even in .css) from http:// to simply //. Solved it for me.
I had the same issue, my problem was that some img tags had src to http instead of https, it does not matter even they link to other domain like <img src="http://otherdomain.com/image.jpg" /> it still shows that warning. As soon as I changed all internal and external img links to https the warning disappeared.
If you check the page and it seems to have no insecure content, check to make sure that something on the page is not submitting data to an insecure location.
Content should be submitted over HTTPS, not HTTP.