Виджет - Iframe против JavaScript

Я искал ответ на тот же вопрос и нашел эту интересную статью:

http://prettyprint.me/prettyprint.me/2009/05/30/widgets-iframe-vs-inline/

Виджеты — это небольшие веб-приложения, которые можно легко добавить на любую веб-страницу. Их иногда называют гаджетами, и они широко используются на все большем количестве веб-страниц, блогов, социальных сайтах и персонализированных домашних страницах, таких как iGoogle, my Yahoo, netvibes и др. В этом блоге я использую несколько виджетов, например, счетчик RSS справа, который показывает, сколько пользователей подписано на этот блог (не переживайте, их будет больше, это новый блог 😉 ). Виджеты замечательны тем, что они представляют собой небольшие повторно используемые функциональные элементы, которые даже неподготовленные пользователи могут использовать для обогащения своего сайта.

Я написал несколько таких виджетов на протяжении времени как «обычные» виджеты, которые могут быть встроены на любой сайт, так и гаджеты для iGoogle, которые более структурированы, а также виджеты для WordPress, Typepad и Blogger, поэтому я рад поделиться своим опытом.

В качестве автора виджетов для виджетов, работающих на стороне клиента (простого встраиваемого HTML-кода), у вас есть выбор: писать ваш виджет внутри iframe или просто инлайн на странице, делая его частью DOM-хостинг-страницы. Остальная часть поста обсуждает плюсы и минусы обоих методов.

Как это технически реализуется? Как использовать iframe или как реализовать инлайн-виджет?

Iframe несколько проще в реализации. Следующий пример отображает простой iframe-виджет: <iframe src="http://my-great-widget.com/widget" width="100" height="100" frameborder="0"></iframe>

frameborder='0' используется, чтобы убедиться, что iframe не имеет рамки, и поэтому выглядит более естественно на странице. http://my-great-widget.com/widget отвечает за предоставление контента виджета в виде полной HTML-страницы.

Инлайн-гаджеты могут выглядеть так:

function createMyWidgetHtml() {  
  return "Привет, мир виджетов"; 
}
document.getElementById('myWidget').innerHTML = createMyWidgetHtml();

Как вы можете видеть, функция createMyWidgetHtml() отвечает за создание фактического контента виджета и не обязательно должна взаимодействовать с сервером для этого. В примере с iframe сервер необходим. В примере с инлайном сервер не обязателен, хотя при необходимости можно получить данные с сервера, что является довольно распространенным случаем: виджеты обычно вызывают серверный код. Используя инлайн-метод, серверный код вызывается с помощью JavaScript по запросу.

Итак, подводя итоги, в случае с iframe мы просто вставляем HTML-код iframe и указываем источник iframe на серверное местоположение, которое фактически предоставляет контент виджета. В случае с инлайном мы создаем контент локально с помощью JavaScript. Конечно, вы можете комбинировать использование iframe с JavaScript, а также использование инлайн-метода с серверными вызовами, никаких ограничений нет, но пути начинают различаться.

Так в чем же суть? В чем различие? Существует несколько важных отличий, и здесь начинается интересная часть поста.

Безопасность. Виджеты iFrame более безопасны.

Какие риски могут возникнуть из-за гаджетов, и кто на самом деле подвергается риску? Пользователь сайта и репутация сайта находятся в опасности.

При использовании инлайн-гаджетов браузер считает, что источник кода гаджета исходит от хостинг-сайта. Допустим, вы просматриваете ваше любимое почтовое приложение http://my-wonderful-email.com, и это почтовое приложение установило виджет, который отображает часы с http://great-clock-widgets.com/. Если этот виджет реализован как инлайн-виджет, браузер считает, что код виджета появился на my-wonderful-email.com, а не на great-clock-widgets.com, и поэтому предоставит коду виджета доступ к файлам cookie, принадлежащим my-wonderful-email.com, и злой автор виджета сможет украсть вашу почту. Важно понимать, что браузеры не заботятся о том, где размещен JavaScript-файл; пока код работает в том же фрейме, браузер считает, что весь код исходит из домена этого фрейма. Таким образом, вы как пользователь пострадаете от потери контроля над вашей учетной записью электронной почты, а my-wonderful-email пострадает от ухудшения своей репутации.

Если бы те же самые часы были реализованы в iframe, и источник iframe отличался бы от источника страницы (что является обычным случаем, например, источник страницы - my-wonderful-email.com, а источник гаджета - great-clock-widgets.com), тогда браузер не позволил бы виджету часов получить доступ к файловым cookie страницы и не разрешил бы доступ к любой другой части хостинг-документа, включая DOM хост-страницы. Это гораздо более безопасно. На самом деле, персонализированные домашние страницы, такие как iGoogle, даже не допускают инлайн-гаджеты, разрешены только гаджеты на основе iframe (инлайн-гаджеты допускаются только в редких случаях, только после тщательной проверки командой iGoogle на предмет наличия злонамеренных действий).

Подводя итог, виджеты на основе iframe гораздо более безопасны. Однако у них также гораздо более ограниченные функциональные возможности. Далее мы рассмотрим, что вы теряете в функциональности.

Внешний вид. В битве за внешний вид инлайн-гаджеты (обычно**) побеждают. Приятное в них заключается в том, что они могут выглядеть как часть страницы. Они могут наследовать CSS-стили от страницы, включая шрифты, цвета, размер текста и т. д. Iframes, с другой стороны, должны определять свои CSS-стили с нуля, поэтому им довольно сложно гармонично вписываться в страницу.

Но что еще более важно, так это то, что iframe должны объявлять, каков будет их размер. При добавлении iframe на страницу вы должны указать свойства ширины и высоты, и если этого не сделать, браузер будет использовать некоторые настройки по умолчанию. Если ваш виджет — это часы, это достаточно просто, поскольку вы точно знаете, какого размера хотите, но в многих случаях заранее не известно, сколько места займет ваш виджет. Например, если вы создаете виджет, который отображает список, и не знаете, сколько элементов будет в списке или какова будет ширина каждого элемента. Обычно в HTML это не является большой проблемой, поскольку HTML – это декларативно-ориентированный язык, и вам просто нужно сообщить браузеру, что вы хотите отобразить, и браузер сам найдет разумное раскладку для этого. Однако с iframe это не так; в случае с iframe браузеры требуют, чтобы вы точно указали, каков размер iframe, и он не определит его самостоятельно. Это серьезная проблема для авторов виджетов, которые хотят использовать iframe – если вы требуете слишком много пространства, на странице останутся пустоты, а если размер будет слишком мал, на странице появятся полосы прокрутки.

По внешнему виду инлайн-подход побеждает. Но обратите внимание, что это действительно зависит от вашего приложения для виджета. Если все, что вы хотите сделать, это часы, вы можете вполне обойтись и с iframe.

Серверная сторона против клиентской стороны. Iframe требует, чтобы вы указали URL-адрес, поэтому при реализации виджета с использованием iframe у вас должен быть серверный код. Это может быть как ограничение, так и головная боль для кого-то (владение сервером, доменным именем и т. д., работа с нагрузкой, оплата сетевых счетов и т. д.), но для других это на самом деле является преимуществом iframe, поскольку это позволяет вам полностью писать ваши виджеты на серверных технологиях. Итак, вы можете писать много кода, а на самом деле почти весь с использованием ваших любимых серверных технологий, будь то ASP.NET, Django, Ruby on Rails, JSP, Struts, Perl или другие динозавры. Когда вы реализуете инлайн-гаджет, вы все больше и больше практикуете свои навыки JavaScript.

Какой же алгоритм принятия решений? Авторы виджетов: если виджет можно реализовать в виде iframe, предпочитайте iframe только для обеспечения безопасности и доверия пользователей. Если виджет требует инлайнового решения (и среда это позволяет, например, не iGoogle и подобные), используйте инлайн, но не злоупотребляйте доверием пользователей!

Установщики виджетов: при установке виджета в свой блог вы не увидите ленточку «безопасно для пользователей» на виджетах. Как вы можете узнать, безопасен ли виджет или нет? Я могу предложить два альтернативных варианта: 1) доверяйте поставщику 2) читайте код. Либо вы доверяете поставщику виджета и устанавливаете его, либо уделяете время чтению его кода и самостоятельно определяете, стоит ли ему доверять. Реальность такова, что большинство владельцев сайтов не утруждают себя чтением кода или даже не осознают рисков, которым они подвергают своих пользователей, и поэтому поставщики виджетов доверяются безоговорочно. В большинстве случаев это не является проблемой, поскольку блоги, как правило, не хранят личную информацию о своих читателях. Я подозреваю, что ситуация начнет меняться, как только произойдут несколько нашумевших взломов (и надеюсь, что этого никогда не произойдет).

Пользователи: пользователи остаются в неведении. Так же как на виджетах, установленных владельцами сайтов, нет ленточек «безопасно для пользователей», на сайтах также нет ленточек «безопасно для использования», и пользователи в основном остаются в неведении и не имеют понятия, даже если у них есть технические навыки, содержат ли сайты, которые они используют, виджеты, являются ли виджеты инлайн или нет и являются ли они злонамеренными. Хотя теоретически подготовленный разработчик может предварительно проверить код до его выполнения в своем браузере и не потерять свою учетную запись электронной почты хакеру, это непрактично, и не следует ожидать, что пользователи массово будут это делать. На мой взгляд, это неприятная ситуация, и я просто надеюсь, что злоумышленники не найдут способ воспользоваться этим и не погубят чудесную культурную экосистему виджетов в интернете.

Удачного виджетинга, друзья!

• Некоторые блоги имеют несколько иную структуру для виджетов, и иногда они могут иметь как виджеты, так и

Почему бы не сделать и то, и другое?

Я предпочитаю предложить сторонним сайтам скрипт следующего вида:

<script type="text/javascript" src="urlToYourScript"></script>

Файл на вашем сервере может выглядеть так:

document.writeln('<iframe src="pathToYourWidget" 
name="MagicIframe" width="300" height="600" align="left" scrolling="no" 
marginheight="0" marginwidth="0" frameborder="0"></iframe>');

Обновление:

Одно из недостатков использования iframe, который указывает на URL на вашем сервере, заключается в том, что при нажатии на ссылку, ведущую на ваш сервер, вы не генерируете «настоящий» обратный поток, что может повлиять на SEO.

Я уверен, что многие разработчики и владельцы сайтов оценят решение на JavaScript, которое можно стилизовать по своему вкусу, вместо использования iframe. Если бы мне нужно было включить компонент от третьей стороны, я предпочел бы делать это через JavaScript, так как это даст мне больше контроля.

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

Еще одно замечание: убедитесь, что у вас есть SSL-сертификат для домена, на котором вы размещаете этот компонент, и правильно укажите инструкцию подключения в зависимости от того, обслуживается ли страница по SSL. Если у ваших клиентов есть причина использовать SSL, они обязательно это оценят, так как Firefox и другие браузеры будут жаловаться, если страница содержит смесь защищенного и незащищенного контента.

Хорошо знать, что это не будет развернуто на сайте социальной сети... это всего лишь оставляет остальную часть веба 😉

Что будет наиболее полезно, зависит от вашего виджета. IFrames и JavaScript в целом служат разным целям и могут быть смешаны (т.е. JavaScript внутри iframe или JavaScript, создающий iframe).

• IFrames могут испытывать проблемы с размерами; если требуется, чтобы он точно соответствовал странице, вы уверены, что он отображается одинаково во всех браузерах, данные не выходят за пределы контейнера и т.д.?
• IFrames просты. Они могут быть простой, статической HTML-страницей.
• Используя IFrames, вы открываете ваш виджет довольно явно.
• Но, с другой стороны, почему бы вашему стороннему сайту просто не включить HTML по указанному URL? HTML затем можно расширить добавлением JavaScript, когда/если это необходимо.
• Чистый JavaScript позволяет достичь большей гибкости, но ценой некоторой сложности.

Основное преимущество iframe: вся CSS и JS кодировка изолированы от основной страницы, поэтому ваш существующий CSS будет работать без проблем. (Если вам нужно, чтобы основной сайт стилизовал ваш контент для лучшей интеграции, это, конечно, является недостатком.)

Основной недостаток iframe: у них фиксированная ширина и высота, и если ваш контент превышает эти размеры, появятся полосы прокрутки.