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] 'loaded HTTPS but insecure content from ': 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

2 answers

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

    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 an pageCapture

    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.



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 //

, 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 //

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:

          +"* from html where url=''"  
  , function (data, textStatus, jqxhr) {  
    // process data  


Demo at jsFiddle



All Articles