In my website with SSL certified URL, I need to include http content for static contents - JS, CSS, Images etc.
E.g. the page at https://www.example.com will refer to http://subdomain.example.com/images/a.jpg.
Is there a way to include HTTP element within HTTPS page, avoiding any security alerts in the browser?
No. The security warnings are there for a reason and cannot be bypassed.
What if someone altered the JS en-route with a man-in-the-middle attack? They could add their own code and have full access to the DOM, making the SSL worthless.
To be secure, you need to load the entire page over HTTPS, not just the HTML document. If you are secure, then the warnings about being insecure will go away.
You don't need to define http:// when calling your static assets. You can use the protocol-relative url, basically you can do this :
<img src="//subdomain.abc.com/images/a.jpg" alt="">
It will get the image through the same protocol as the page you're on.
Paul Irish will explain that better than me on his blog
I don’t think you can bypass security alerts (on browsers that give them) if your https page includes http content. But check whether the references work with https as well (depends on the server of course). If they do, you can use URLs like //subdomain.example.com/images/a.jpg which means that the protocol (http or https) of the page itself will be used.
Related
I have two websites.
Both websites sit on the same hosting environment.
I have broad control over the hosting environment.
One website is a Drupal website and the other is a static (plain HTML website).
I try to iframe-embed one of the HTML webpages of the second, static website into the Drupal website, but I get:
iframe refused to connect
When checking the Drupal website from browser console, I get:
Refused to display 'https://example.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
I don't understand this error (shouldn't sameorigin be the correct directive to allow embedding?).
What security directive should I change, and where, to allow the iframe to be displayed?
I have already tried to put the following directive in .htaccess of the second, static website:
<IfModule mod_headers.c>
Header set X-Frame-Options "SAMEORIGIN"
</IfModule>
You should read up about origins (they're very important; they are the concept that underlies most web security boundaries). An origin has nothing to do with the physical, logical, or legal source of a web page; the browser does not, and cannot, know any of that. An origin is simply the tuple (ordered fixed-length collection) of Protocol, Hostname, Port. ("Hostname" here typically meaning the fully-qualified domain name, not just any part of it, but local-network sites often just use hostname.) You say you "have two sites", by which I assume you mean they have different domain names. If they have different domain names, they can't have the same origin, because all three parts of the tuple must match. Thus, specifying SAMEORIGIN on one of them will obviously not allow the other to frame it; they aren't the same origin! As far as anybody's browser knows, the parent page is an unrelated malicious site trying to violate the security constraints of the would-be guest page.
Possible solutions:
Remove the X-Frame-Options directive from the guest page. This will let anybody frame it, though, so make sure that's OK if you do it (if the second page is static and unauthenticated then of course it is; anybody could simply fake the embedding by serving the same static content so XFO is doing nothing for you).
Replace the X-Frame-Options header (on the guest page) with a Content-Security-Policy header that specifies a frame-ancestors directive allowing the parent site.
Move both pages to the same origin, either by copying the page to the other server/site, or adding a server-side fetch for that path which grabs it from the other server.
Use CORS to request the embeddable content across origins, and embed the response HTML in the parent page, possibly in an iframe's srcdoc. (Included only for completeness; this is almost certainly not the best approach here, as configuring CORS correctly is far harder than the other options.)
SEO wise, is it okay to use an protocol free URL like this?
<link rel="canonical" href="//example.com" />
I redirect all users to HTTPS anyway.
With protocol free I mean not using either http:// or https:// but // instead.
If the spec co-written by Google employees (https://www.rfc-editor.org/rfc/rfc6596) is correct, then yes, any relative reference is ok.
Yes you can - both the spec and Google will allow a uri as a canonical href.
This does present a risk that your page is reached via the wrong protocol - eg: http page is visited when you want https canonical url's. In this case the relative canonical value is interpreted as an http url.
However, if you have your 301 redirects correctly set up to go from http to https, you will not have an issue, and it may actually be preferable in some cases to use a relative canonical url.
Case in point, switching from an http site to https will lose you all your Facebook likes accumulated on your http url's. In this case you may want Facebook to still crawl your http site, whilst redirecting all other user agents to https.
Facebook will then reinstate your old http page likes on both your http and https pages, but not if your page's canonical url points to an absolute https url. In this instance a protocol relative canonical url - //www.mysite.com - is very useful.
Yes
href attribute on a canonical link is like all href attribute on <link>: it supports URIs. And URIs can be full URIs or relative URIs.
Moreover The Canonical Link Relation spec confirms that.
Then: of course you can use a relative URL like a protocol free one.
But don't
I will recommend anyway to always use full URLs : scheme, host, path...
Why ? Because canonical URL is made to prevent from wrong URL to be used by robots.
Then using a relative URL might let some wrong URLs used by bots contrary to a full URL which you can be certain it is the right one.
I believe you can't, according to this website.
Make them 100% specific. For various reasons, a ton of sites use protocol relative links, meaning they leave the http / https bit from their URLs. Don’t do this for your canonicals. You have a preference. Show it.
Also, I'd recommend the https, because Google is using it as a ranking signal.
I load some HTML into an iframe but when a file referenced is using http, not https, I get the following error:
[blocked] The page at {current_pagename} ran insecure content from {referenced_filename}
Is there any way to turn this off or any way to get around it?
The iframe has no src attribute and the contents are set using:
frame.open();
frame.write(html);
frame.close();
Note: While this solution may have worked in some browsers when it was written in 2014, it no longer works. Navigating or redirecting to an HTTP URL in an iframe embedded in an HTTPS page is not permitted by modern browsers, even if the frame started out with an HTTPS URL.
The best solution I created is to simply use google as the ssl proxy...
https://www.google.com/search?q=%http://yourhttpsite.com&btnI=Im+Feeling+Lucky
Tested and works in firefox.
Other Methods:
Use a Third party such as embed.ly (but it it really only good for well known http APIs).
Create your own redirect script on an https page you control (a simple javascript redirect on a relative linked page should do the trick. Something like: (you can use any langauge/method)
https://example.com That has a iframe linking to...
https://example.com/utilities/redirect.html Which has a simple js redirect script like...
document.location.href ="http://thenonsslsite.com";
Alternatively, you could add an RSS feed or write some reader/parser to read the http site and display it within your https site.
You could/should also recommend to the http site owner that they create an ssl connection. If for no other reason than it increases seo.
Unless you can get the http site owner to create an ssl certificate, the most secure and permanent solution would be to create an RSS feed grabing the content you need (presumably you are not actually 'doing' anything on the http site -that is to say not logging in to any system).
The real issue is that having http elements inside a https site represents a security issue. There are no completely kosher ways around this security risk so the above are just current work arounds.
Note, that you can disable this security measure in most browsers (yourself, not for others). Also note that these 'hacks' may become obsolete over time.
Based on generality of this question, I think, that you'll need to setup your own HTTPS proxy on some server online. Do the following steps:
Prepare your proxy server - install IIS, Apache
Get valid SSL certificate to avoid security errors (free from startssl.com for example)
Write a wrapper, which will download insecure content (how to below)
From your site/app get https://yourproxy.com/?page=http://insecurepage.com
If you simply download remote site content via file_get_contents or similiar, you can still have insecure links to content. You'll have to find them with regex and also replace. Images are hard to solve, but Ï found workaround here: http://foundationphp.com/tutorials/image_proxy.php
I know this is an old post, but another solution would be to use cURL, for example:
redirect.php:
<?php
if (isset($_GET['url'])) {
$url = $_GET['url'];
$ch = curl_init();
$timeout = 5;
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_CONNECTTIMEOUT, $timeout);
$data = curl_exec($ch);
curl_close($ch);
echo $data;
}
then in your iframe tag, something like:
<iframe src="/redirect.php?url=http://www.example.com/"></iframe>
This is just a MINIMAL example to illustrate the idea -- it doesn't sanitize the URL, nor would it prevent someone else using the redirect.php for their own purposes. Consider these things in the context of your own site.
The upside, though, is it's more flexible. For example, you could add some validation of the curl'd $data to make sure it's really what you want before displaying it -- for example, test to make sure it's not a 404, and have alternate content of your own ready if it is.
Plus -- I'm a little weary of relying on Javascript redirects for anything important.
Cheers!
add <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> in head
reference: http://thehackernews.com/2015/04/disable-mixed-content-warning.html
browser compatibility: http://caniuse.com/#feat=upgradeinsecurerequests
You will always get warnings of blocked content in most browsers when trying to display non secure content on an https page. This is tricky if you want to embed stuff from other sites that aren't behind ssl. You can turn off the warnings or remove the blocking in your own browser but for other visitors it's a problem.
One way to do it is to load the content server side and save the images and other things to your server and display them from https.
You can also try using a service like embed.ly and get the content through them. They have support for getting the content behind https.
Using Google as the SSL proxy is not working currently,
Why?
If you opened any page from google, you will find there is a x-frame-options field in the header.
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring
that their content is not embedded into other sites.
(Quote from MDN)
One of the solution
Below is my work around for this problem:
Upload the content to AWS S3, and it will create a https link for the resource.
Notice: set the permission to the html file for allowing everyone view it.
After that, we can using it as the src of iframe in the https websites.
You could try scraping whatever you need with PHP or another server side language, then put the iframe to the scraped content. Here's an example with PHP:
scrapedcontent.php:
<?php
$homepage = file_get_contents('http://www.example.com/');
echo $homepage;
?>
index.html:
<iframe src="scrapedcontent.php"></iframe>
Use your own HTTPS-to-HTTP reverse proxy.
If your use case is about a few, rarely changing URLs to embed into the iframe, you can simply set up a reverse proxy for this on your own server and configure it so that one https URL on your server maps to one http URL on the proxied server. Since a reverse proxy is fully serverside, the browser cannot discover that it is "only" talking to a proxy of the real website, and thus will not complain as the connection to the proxy uses SSL properly.
If for example you use Apache2 as your webserver, then see these instructions to create a reverse proxy.
Try to use protocol relative links.
Your link is http://example.com/script.js, use:
<script src="//example.com/script.js" type="text/javascript"></script>
In this way, you can leave the scheme free (do not indicate the protocol in the links) and trust that the browser uses the protocol of the embedded Web page. If your users visit the HTTP version of your Web page, the script will be loaded over http:// and if your users visit the HTTPS version of your Web site, the script will be loaded over https://.
Seen in: https://developer.mozilla.org/es/docs/Seguridad/MixedContent/arreglar_web_con_contenido_mixto
All you need to do is just use Google as a Proxy server.
https://www.google.ie/gwt/x?u=[YourHttpLink].
<iframe src="https://www.google.ie/gwt/x?u=[Your http link]"></iframe>
It worked for me.
Credits:- https://www.wikihow.com/Use-Google-As-a-Proxy
I did a search and could not find an answer on here to my question. What I am confused about is what URLs on an https page need to be https, as opposed to http.
I am making a series of pages my website that must be accessed over https. At the top of the pages is a menu. I accidentally included a style sheet into the page using http, instead of https, and all the browsers I tried gave me a warning about insecure content. But, I can leave the menu links at the top of the page http, and there's no problem.
So, am I correct in saying that things that are being loaded onto the page, such as style sheets and images, need to have https in the link, but that plain old href links can just have http in them?
Thanks for your advice.
Generally your secure pages such as purchase page, credit card etc processing pages are set to https or sometimes all pages such as websites for banks or other financial institutes or even login pages.
You can leave it to browser to deciper http or https part by using what is called protocol-relative URLS in which you simply do not specify either of http or https and still browser will be able to figure it out. An example:
//example.com
//google.com
Let's say your domain is foo.com, you would specify all URLs like:
//foo.com/page1.html
//foo.com/otherpage
So you simply leave the http or https part in your URLs.
To know more about protocol-relative URLS, see:
http://paulirish.com/2010/the-protocol-relative-url/
Yes, all links that are used to create the page itself (the HTML, the CSS, JavaScript, the images) need to be served over https. That means all URLs of that domain need to be served over https.
Links to other websites can be http just fine. You may want to check if those links can be visited over https as well because then the user will use a secure connection to visit those website as well.
Is there a reason we include the http / https protocol on the href attribute of links?
Would it be fine to just leave it off:
my site
The inclusion of the “http:” or “https:” part is partly just a matter of tradition, partly a matter of actually specifying the protocol. If it is defaulted, the protocol of the current page is used; e.g., //www.example.com becomes http://www.example.com or https://www.example.com depending on the URL of the referring page. If a web page is saved on a local disk and then opened from there, it has no protocol (just the file: pseudo-protocol), so URLs like //www.example.com won’t work; so here’s one reason for including the “http:” or “https:” part.
Omitting also the “//” part is a completely different issue altogether, turning the URL to a relative URL that will be interpreted as relative to the current base URL.
The reason why www.example.com works when typed or pasted on a browser’s address line is that relative URLs would not make sense there (there is no base URL to relate to), so browser vendors decided to imply the “http://” prefix there.
URLs in href are not restricted to only HTTP documents. They support all the protocols supported by browsers- ftp, mailto, file etc.
Also, you can preceed URL name with '#', to link to a html id internally in the page. You can give just the name or directory path, without a protocol, which will be taken as a relative URL.
My solution was to trick the browser with a redirect service, such as bit.ly and goo.gl (which will be discontinued soon), in addition to others.
When the browser realizes that the url of the shortcuts is https, it automatically releases the link image, the link is released and instead displays the http image, without showing the original link.
The annoying part is that, according to the access, it will display in the panel control of your redirector, thousands of "clicks", which is actually "display".
With this experience I'm going to look for a Wordpress plugin for redirection and create my own "redirects links". So I will have https // mysite.com /id → redirect to http link.