CODEWITHSUNDEEP
javascriptjqueryiframegoogle-chrome-extension
Karam Najjar
Karam Najjar

Reputation: 528

How to show insecure content in iframe

In short , I'm developing a google chrome extension , when I add any url starting with http:// to source attribute to an iframe, I get a message like :

[blocked] The page at 'https://www.facebook.com/' was loaded over HTTPS, but ran insecure content from 'http://youtu.be/m0QxDjRdIq4': this content should also be loaded over HTTPS.

and I don't see the content in the iframe ! so how can I overcome this ?

what I want to achieve is that : I hide facebook adds , and in its place I added an iframe instead, I detect when the mouse is hovering over a link contained in a post, then I want to show the link's content in an iframe.

What are my possible alternatives? I don't need to enable showing insecure content in chrome because it is a chrome extension that I will publish!

Upvotes: 3

Views: 1864

Answers (2)

ostapische
ostapische

Reputation: 1592

First and stupid way: change http in link on https. But youtube and I think many other sites don't allow to show their content in iframes. try it and you get Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Second and at least stupid way: remove protocol from link, like //youtu.be/m0QxDjRdIq4 and you get protocol, that on this page. But a situation similar to the previous.

Third way for youtube only: you can generate iframe with src like //www.youtube.com/embed/m0QxDjRdIq4 and user can see the video.

Fourth way, not for all sites: use site API's - not a best solution, but like a option.

Fifth way, but impossible (I think): try to get page's content with javascript and regenerate it in way, that you need.

Sixth way, needs powerfull server: create an service on your server, which will download pages and resend it to users. One problem - linear dependence server's power of requests.

Seventh way, I forgot that it's extension: you can open link in another tab/window, get it content, close tab/window and show content in tab that you need.

Eigth way, the best, 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  
  }  
}

Demo on jsFiddle

Upvotes: 2

Denis
Denis

Reputation: 5271

It seems that the security limit is strict, so we need a way to work around that.

What if you could load the page using other means than an <iframe> and insert it into the page afterwards? There are multiple ways to do that, ranging from more practical to less realistic.

  1. You can use the Chrome captureVisibleTab API to generate a screenshot of a website as an image, exactly what you need. It sounds like you need a visible tab to use this API, but you can actually specify any Chrome window as a target and you can create Chrome windows unfocused and hidden behind the edge of the screen.

  2. If captureVisibleTab provides trouble in step 2, there is also pageCapture API to get an entire page as a single content object.

  3. You can also use a server to create screenshots. Serve a simple application over HTTPS that uses PhantomJS to create a screenshot. An advantage of this approach is your server is likely to be much faster at screenshot generation. The disadvantage is you need to pay for the server.

  4. You could also use xhr in your extension background process (which is not limited by the security limitation) to get the HTML. This wouldn't get any resources, but that could be a beneficial thing if you want a very quick if inaccurate screenshot. Just load HTML, parse and detect links to stylesheets, download them and inject those stylesheets into the HTML as <style> tags. The resulting HTML can be injected to the <iframe> manually. You could even inject scripts and images this way, but that would be harder and less useful, since you need a quick screenshot of how the page looks like.

I think using built-in Chrome functionality for screenshots is the best bet, if only you can make the user experience good enough.

Upvotes: 2

Related Questions