Как показать небезопасное содержание в IFRAME

Question

Короче говоря, я разрабатываю расширение Chrome Google, когда я добавить любой URL, начиная с http:// с атрибутом источника к iframe, я получаю такое сообщение:

[ заблокирован] Страница на 'https://www.facebook.com/' была загружена за HTTPS, но небезопасный контент с 'http://youtu.be/m0QxDjRdIq4': этот контент также должен быть загружен через HTTPS.

и я не вижу содержание в iframe! так как я могу это преодолеть?

Что я хочу достичь, так это то, что: я скрываю добавление facebook, и вместо этого я добавил iframe, я обнаруживаю, когда мышь наводится на ссылку, содержащуюся в сообщении, тогда я хочу показать содержимое ссылки в iframe.

Каковы мои возможные альтернативы? Мне не нужно включать показ небезопасного контента в chrome, потому что это расширение chrome, которое я опубликую!

Answer 1

Похоже, что ограничение безопасности строгое, поэтому нам нужен способ обойти это.

Что делать, если вы могли загрузить страницу, используя другие средства, кроме и вставить ее на страницу позже? Существует несколько способов сделать это, от более практичного до менее реалистичного.

1. Вы можете использовать Chrome captureVisibleTab API для создания скриншот веб-сайта в качестве изображения, именно то, что вам нужно. Похоже, вам нужна видимая вкладка для использования этого API, но вы можете указать любое окно Chrome в качестве цели, и вы можете создавать окна Chrome unfocused and hidden behind the edge of the screen.

2. Если captureVisibleTab предоставляет проблемы на шаге 2, существует также pageCapture API, чтобы получить целую страницу как единый объект контента.

3. Вы также можете использовать сервер для создания скриншотов. Подавайте простое приложение через HTTPS, которое использует PhantomJS для создания скриншота. Преимущество такого подхода заключается в том, что ваш сервер, скорее всего, будет намного быстрее при создании скриншотов. Недостатком является то, что вам нужно заплатить за сервер.

4. Вы также можете использовать xhr в своем фоновом процессе расширения (который не ограничен ограничениями безопасности), чтобы получить HTML. Это не принесет никаких ресурсов, но это может быть полезно, если вам нужен очень быстрый, если неточный снимок экрана. Просто загружайте HTML, разбирайте и обнаруживайте ссылки на таблицы стилей, загружайте их и вводите эти таблицы стилей в HTML как теги <style>. Полученный HTML-код может быть введен в вручную. Вы могли бы даже вводить сценарии и изображения таким образом, но это было бы сложнее и менее полезно, так как вам нужен быстрый снимок экрана о том, как выглядит страница.

Я думаю, что использование встроенных функций Chrome для скриншотов - лучшая ставка, если только вы можете сделать работу пользователя достаточно хорошей.

Answer 2

Первый и глупый путь: изменить http в ссылке на https. Но youtube и я думаю, что многие другие сайты не позволяют показывать их содержимое в iframe.попробуйте, и вы получите Refused to display 'link' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

Второй и по крайней мере глупый способ: удалить протокол из ссылки, например //youtu.be/m0QxDjRdIq4, и вы получите протокол, который на этой странице. Но ситуация похожа на предыдущую.

Третий способ только для youtube: вы можете генерировать iframe с src, как //www.youtube.com/embed/m0QxDjRdIq4, и пользователь может просмотреть видео.

В-четвертых, не для всех сайтов: используйте API-интерфейс сайта - не лучшее решение, но как опция.

В-пятых, но невозможно (я думаю): попытайтесь получить содержимое страницы с помощью javascript и восстановите ее так, как вам нужно.

Шестой путь: нужен мощный сервер: создайте службу на своем сервере, которая будет загружать страницы и отправлять их пользователям. Одна проблема - мощность запросов сервера линейной зависимости.

Седьмой путь, я забыл, что это расширение: вы можете открыть ссылку в другой вкладке/окне, получить ее содержимое, закрыть вкладку/окно и показать содержимое на вкладке, которая вам нужна.

ВОСЬМОЙ путь, лучший, я думаю: использовать YAHOO YQL как это:

$.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