How to show unsafe content in an iframe
Long story short, I am developing a google chrome extension, when I add a url starting with http://
to the original attribute iframe
, I get a message like:
[locked] https://www.facebook.com/ 'loaded HTTPS but insecure content from http://youtu.be/m0QxDjRdIq4 ': this content must also be loaded over HTTPS.
and I can't see content in the iframe! so how can i overcome this?
what i want to achieve is that: i hide the facebook add and instead i added iframe
instead, i detect when the mouse hovers over the link contained in the post, then i want to show the link content in the iframe.
What are my possible alternatives? I don't need to enable showing unsafe content in chrome because this is a chrome extension that I will post!
source to share
The security limitation seems to be strict, so we need a way to work around this.
What if you could load the page by other means besides <iframe>
and insert it into the page later? There are several ways to do this, ranging from the more practical and the less realistic.
-
You can use the Chrome
captureVisibleTab
API to take a screenshot of a website as an image, exactly what you need. It looks like you need a visible tab to use this API, but you can target any Chrome window, and you can create Chrome windows unfocused and hidden off the edge of the screen . -
If it
captureVisibleTab
provides problems in step 2, there is also anpageCapture
API to get the whole page as a single content object. -
You can also use a server to take screenshots. Serve a simple HTTPS app that uses PhantomJS to take a screenshot. The advantage of this approach is that your server is likely to be much faster when taking screenshots. The downside is that you have to pay for the server.
-
You can also use xhr in a background extension process (which is not limited by security restrictions) to get HTML. It won't fetch any resources, but it can be useful if you need a very fast if inaccurate screenshot. Just load the HTML, parse and discover links to stylesheets, load them, and inject those stylesheets into HTML as tags
<style>
. The resulting HTML code can be entered<iframe>
manually. You could even enter scripts and images this way, but it would be harder and less useful since you need a quick screenshot of what the page looks like.
I think using Chrome's built-in screenshot features is the best bet if only you can make the user experience good enough.
source to share
First and stupid way: change http
to link https
. But youtube and I think many other sites do not allow their content to be shown in an iframe. try and you getRefused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
The second and at least stupid way is to remove the protocol from the link, for example //youtu.be/m0QxDjRdIq4
, and get the protocol that is on this page. But the situation is similar to the previous one.
The third way is youtube only: you can generate an iframe with src
like //www.youtube.com/embed/m0QxDjRdIq4
and the user can see the video.
Fourth, not for all sites: using the site API is not the best solution, but as an option.
Fifth, but not possible (I think): try to get the page content with javascript and restore it as you need it.
Sixth, you need a powerful server: create a service on your server that will load pages and re-send them to users. One problem is the linear dependence of the query server capacity.
Seventh, I forgot that this is an extension: you can open the link in another tab / window, get its content, close the tab / window, and show the content in the tab you want.
Eigth way, the best one I think: use YAHOO yql like this:
$.getJSON("https://query.yahooapis.com/v1/public/yql?q=select"
+"* from html where url='youtube.com/watch?v=m0QxDjRdIq4'"
+"&format=json&diagnostics=true&callback=?"
, function (data, textStatus, jqxhr) {
// process data
}
}
source to share