HTTPS with iFrame that is also HTTPS - http

OK i am not sure if what i am trying to do is even possible.
We have a page that is HTTPS, and it has a fancybox that opens an iFrame that is also HTTPS. But the iframe wont load.
Now if i take the originating page and remove the HTTPS from the URL and load the fancy box the iframe that is HTTPS will now load.
So my question is can HTTPS page load a HTTPS iframe? If it is possible do you need special code to do so?
Also worth noting that if i remove the fancy box from the equation i get the same results.

Related

HTTP link from HTTPS website

If I move a website to https so that it loads all resources (css, js, images, ...) via https, the browser will not pop any warning (I hope).
However, what if the content of my site is partially created by another users who may have already added links, e.g. <a href=http://anothersite.com>", that target websites without https. In such case, will the browser warn about mixed content?
And what about images, e.g. <img src=http://anothersite.com/img.jpg>"?
Thanks!
A link will not trigger mixed-content:
The content of that link is not displayed on your page, it doesn't modify the appearance or the functionalities of your page, so no reason to display a mixed-content warning.
(But if a secure version of that website is available, it's better to link directly to it, to avoid an insecure redirect)
But http images included in your https pages will trigger mixed-content warnings
What you cant do to prevent it partially, it using HSTS and https://www.w3.org/TR/upgrade-insecure-requests/

How to use http:// in https:// using iframe?

my website is ssl-enabled secure containg https://
Now i want to add a website link in my webpage using iframe which is in http://
How can i use it, Here problem is with http:// not working in https:// using iframe.
PLease give a solution
Thanks.
You can't, in many modern browsers because it is a major security issue. There's a workaround though, you can proxy the content via HTTPS. You have to create a something on HTTPS that fetches the unsecured content for you and passes it over TLS to the end user in the iframe. This, however, is not as trivial as it looks. Just fetching the content might not be enough, because the user might want/need to POST something back. And it's not just the content, but the headers too if you need to support cookies. And when the content you served over your proxy solution loads stuff via HTTP you end up with a mixed content warning.

Website is not loading properly with HTTPS

I want to apply HTTPS on some selected pages of my website.
I tried doing that using .htaccess file but after that my site is not getting loaded properly. After HTTPS, my site is looking like it does not have CSS. Please help.
The problem here will be because of the way browsers block traffic from non-secure domains.
When you use the full URL for your content e.g. images, css, scripts. if you transfer to a secure domain e.g. https:// then anything using a http:// prefix will not be allowed as it will not have been transferred securely.
So, what you need to do here is to use relative paths when including your content. So instead of using http://www.domain.com/cssfile.css you would instead use /cssfile.css. So if your site IS using http:// then the content will be transferred using that protocol, but when you switch to the login page for instance which uses https:// the content will still get delivered, but instead using the secure protocol.

Wordpress - Chrome not loading ajax googleapis securely -

Wordpress site in Chrome (not Firefox) is blocking jquery loading - console shows error in our recently secured (full site) over SSL.
"The page was loaded over HTTPS, but displayed insecure content from 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js': this content should also be loaded over HTTPS."
When I view it in Firefox, this same call is indeed HTTPS.
I see the call to this URL in the head section of the page source, but haven't located where this call is coming from in the code so I can change it to HTTPS. Getting generated... But where? I can't locate it.
Our WordPress Address (URL) and the Site Address (URL) are both HTTPS - all else works except for this jquery call.
I have read similar issues on this forum but don't know clear way to fix it within Wordpress or force the HTTPS... or even find what's calling it - at the limits of my knowledge about this... Thanks for any help here
Use //ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js to load the javascript, instead of adding the http or https protocol in front of the url. Modern browsers know to prepend the proper protocol when non is supplied.
That being said, since you are using WordPress, you should have one of the latest versions of jQueryUI already in the installation. You simply need to wp_enqueue_script() the ones you need. For instance, if you need draggable and sortable, you would use wp_enqueue_script('jquery-ui-draggable'); and wp_enqueue_script('jquery-ui-sortable'); respectively. WordPress is kept pretty up to date on these APIs, so offloading jQueryUI to googleapis is probably not the best of ideas, because you could incur a page load time hit by adding another domain for a browser to lookup.

Images uploaded in wordpress have http rather that https in URL

When the chrome the developer tool on some of my web pages I get this warning
"The page at https://www.improvementskills.org/wordpress/whats-going-on-2/ displayed insecure content from http://abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png.
www.improvementskills.org/wordpress/whats-going-on-2/:1"
I'm guessing this is because the image urls have http rather https. Whenever I upload new images in wordpress it gives it http as well. How do I go about fixing this? Thanks!
Update: The technique in my comment below is now an anti-pattern! Always use https. http://www.paulirish.com/2010/the-protocol-relative-url/
If you can edit your website's img tags, then remove "http:" from the src.
Bad
http://abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png
Good
//abim3.improvementskills.org/wordpress/wp-content/uploads/2013/08/run_chart2.png
This way, the browser will call the image with https when needed, and http otherwise.

Resources