От объекта к iframe - другие технологии внедрения

Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

К настоящему моменту вы уже должны уметь прикреплять вложения на свои веб-страницы, включая изображения, видео и аудио. На этом этапе мы хотели бы сделать шаг в сторону, рассматривая некоторые элементы, которые позволяют встраивать в ваши веб-страницы самые разнообразные типы контента: <iframe>, <embed> и <object>. <iframe> предназначены для встраивания других веб-страниц, а два других позволяют встраивать PDF-файлы, SVG и даже Flash - устаревшую технологию, но которую вы все равно иногда увидите.

Предпосылки: Базовая компьютерная грамотность, базовое программное обеспечение, базовые знания работы с файлами, знакомство с основами HTML (как описано в разделе «Начало работы с HTML») и предыдущими статьями в этом модуле.
Задача: Узнать, как встраивать элементы в веб-страницы, используя <object>, <embed> и <iframe>, например, флеш-ролики и другие веб-страницы 

Краткая история внедрения

Давным-давно в Интернете было популярно использовать фреймы для создания веб-сайтов - небольших частей веб-сайта, хранящихся на отдельных страницах HTML. Они были встроены в главный документ, называемый набором фреймов, который позволял вам указать область на экране, которую заполнял каждый фрейм, а не столбец и строку таблицы. Они были популярны в середине и конце 90-х годов, и были доказательством того, что разделение веб-страницы на более мелкие куски, лучше сказывается на скорости загрузки, особенно это заметно, когда сетевые соединения были медленными. Однако у них было много проблем, которые намного перевешивали любые положительные моменты, когда скорость сети становилась больше. Поэтому вы больше не увидите, чтобы их использовали.

Спустя некоторое время (конец 90-х, начало 2000-х годов) технологии плагинов стали очень популярными, такие как Java-апплеты и Flash - это позволило веб-разработчикам встраивать богатый контент в веб-страницы, такие как видео и анимации, которые просто не были доступны только через HTML. Внедрение этих технологий было достигнуто с помощью таких элементов, как <object> и менее используемого <embed>, и они были очень полезны в то время. С тех пор они вышли из моды из-за многих проблем, включая доступность, безопасность, размер файла и многое другое; в наши дни большинство мобильных устройств больше не поддерживают такие плагины, и поддержка на компьютерах так же уменьшается.

Наконец, появился элемент <iframe> (наряду с другими способами встраивания контента, например <canvas>, <video> и т. Д. ) Это обеспечивает способ встраивания целого веб-документа внутри другого, как если бы это был <img> или другой такой элемент и используется сегодня регулярно.

Урок истории закончен, давайте двигаться дальше и посмотрим, как использовать некоторые из них.

Активное обучение: использование классического внедрения

В этой статье мы собираемся перейти прямо в раздел активного обучения, чтобы сразу дать вам реальное представление о том, для чего используются технологии внедрения. Нам очень хорошо знаком Youtube, но многие люди не знают о некоторых, доступных для него, средствах совместного доступа. Давайте посмотрим, как Youtube позволяет нам встраивать видео на любую страницу, которая нам нравится, используя <iframe>.

  1. Сначала перейдите на Youtube и найдите понравившееся вам видео.
  2. Ниже видео вы найдете кнопку «Поделиться» - нажмите, чтобы отобразить параметры совместного доступа.
  3. Выберите кнопку «Вставить», и вам будет предоставлен код <iframe> - скопируйте его.
  4. Вставьте его в поле ввода ниже и посмотрите на результат в Output.

Дополнительно вы также можете попробовать внедрить карту Google, следующим образом:

  1. Перейдите в Карты Google и найдите подходящую вам карту.
  2. Нажмите «Меню» (три горизонтальные линии) в верхнем левом углу пользовательского интерфейса.
  3. Выберите параметр Ссылка/код.
  4. Выберите параметр Встраивание карт, который даст вам код <iframe> - скопируйте его.
  5. Вставьте его в поле ввода ниже и посмотрите, что результат в Output.

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

Подробно об Iframes

Итак, это было легко и весело, не так ли? Элементы <iframe> предназначены для размещения других веб-документов в текущем документе. Это отлично подходит для включения стороннего контента на ваш сайт, который, возможно, не имеет прямого контроля и не хочет реализовывать вашу собственную версию - например, видео от поставщиков онлайн-видео, системы комментариев, такие как Disqus, карты из Интернета поставщиков карт, рекламных баннеров и т. д. Живые редактируемые примеры, которые вы использовали в этом курсе, реализованы с помощью <iframe> s.

Есть несколько серьезных Проблем безопасности при использовании <iframe>, которые мы обсудим ниже, но это не значит, что вы не должны использовать их на своих сайтах - они просто требует некоторых знаний и тщательного мышления. Давайте рассмотрим код немного подробнее. Скажем, вы хотите включить глоссарий MDN на одну из своих веб-страниц - вы можете попробовать что-то вроде этого:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

Этот пример включает основы, необходимые для использования <iframe>:

allowfullscreen
Если установлено, <iframe> может быть помещен в полноэкранный режим с использованием полноэкранного API (что несколько выходит за рамки этой статьи).
frameborder
Если установлено значение 1, это указывает браузеру нарисовать границу между этим фреймом и другими фреймами, что является поведением по умолчанию. 0 удаляет границу. Использование этого на самом деле не рекомендуется, так как тот же эффект можно улучшить, используя border: none; в CSS.
src
Этот атрибут, как и <video> / <img>, содержит путь, указывающий на URL-адрес внедряемого документа.
width and height
Эти атрибуты определяют ширину и высоту, в которой вы хотите использовать iframe.
Резервный контент
Точно так же, как и другие подобные элементы, такие как <video>, вы можете включить резервный контент между тегами открытия и закрытия <iframe> </ iframe>, которые появятся, если браузер не поддерживает < IFRAME>. В этом случае мы включили ссылку на страницу. Вряд ли вы столкнетесь с любым браузером, который не поддерживает <iframe> в наше время.
sandbox
Этот атрибут, который работает в более современных браузерах, чем остальные функции <iframe> (например, IE 10 и выше). Он запрашивает повышенные настройки безопасности; об этом мы расскажем в следующем разделе.

Примечание: Чтобы повысить скорость загрузки, рекомендуется установить атрибут src iframe с помощью JavaScript после того, как основное содержимое будет загруженно. Это ускорит вашу страницу и уменьшит время загрузки официальной страницы (важный показатель SEO.)

Проблемы безопасности

Выше мы упомянули о проблемах безопасности - давайте рассмотрим это чуть подробнее. Мы не ожидаем, что вы полностью поймете все это содержимое с первого раза; мы просто хотим сообщить вам об этой проблеме и предоставить ссылку, чтобы вы могли вернуться к ней, став более опытными и когда начинаете рассматривать использование iframe в своих экспериментах и работе. Кроме того, нет необходимости бояться и не использовать <iframe> - вам просто нужно быть осторожным. Читаем дальше...

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

Clickjacking - это один из видов обычной атаки iframe, когда хакеры внедряют невидимый iframe в ваш документ (или внедряют ваш документ на свой собственный вредоносный веб-сайт) и используют его для захвата взаимодействия пользователей. Это обычный способ ввести пользователей в заблуждение или украсть конфиденциальные данные.

Быстрый пример - попробуйте загрузить предыдущий пример, который мы показали выше, в ваш браузер - вы можете найти его в прямом эфире на Github (см. Также исходный код). На самом деле вы ничего не увидите на странице, и если вы посмотрите на Консоль в инструментах разработчика браузера, вы увидите сообщение, объясняющее вам, почему. В Firefox вы получите сообщение «Отказано в доступе», с помощью X-Frame-Options, https://developer.mozilla.org/en-US/docs/Glossary, не разрешает кадрирование. Это связано с тем, что разработчики, которые построили MDN, включили параметр на сервере, который обслуживает страницы веб-сайта, запрещая им внедряться внутри <iframe> (см. Настройка директивы CSP ниже). В этом есть смысл - целой странице MDN на самом деле нет имеет смысла встраиваться в другие страницы, конечно, если вы не хотите сделать что-то вроде встраивания их на свой сайт и выставлять их как свои собственные или пытаться украсть данные с помощью clickjacking, что очень плохо. Плюс, если все начнут это делать, вся дополнительная пропускная способность начнет стоить Mozilla больших денег.

Используйте только при необходимости

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

Помимо безопасности, вы также должны знать об интеллектуальной собственности. Большинство контента под защитой авторских прав, даже тот, что вы никак не могли ожидать (например, большинство картинок на Wikimedia Commons). Никогда не выводите контент на свою страницу, если он вам не принадлежит или если нет письменного, однозначного разрешения от правообладателя. Штрафы на нарушения авторсих прав строгие. И снова, вы никогда не можете быть слишком осторожным.

Если контент лицензирован, вы должны соблюдать условия лицензии. Например, контент на MDN лицензирован на licensed under CC-BY-SA. Это означает, что вы должны относится к нам с уважением, когда цитируете наш контент, даже если внесли в него существенные изменения.

Используйте HTTPS

HTTPS это зашифрованная версия HTTP. Вы должны обслуживать свои веб-сайты, используя HTTPS, всегда, когда это возможно :

  1. HTTPS уменьшает вероятность того, что удаленный контент был изменен в пути;
  2. HTTPS запрещает доступ внедренного контента к контенту в вашем исходном документе и наоборот.

Использование HTTPS требует сертификат безопасности, чтом может обходиться в копеечку (хотя есть Let's Encrypt что облегчает задачу) — если вы не можете его получить, вы можете обслуживать свой родительский документ с помощью HTTP. Однако из-за второго преимущества HTTPS, независимо от стоимости, вы никогда не должны внедрять сторонний контент с HTTP. (В лучшем случае ваш веб-браузер даст страшное предупреждение.) Все уважаемые компании, которые делают контент доступным для внедрения через <iframe>, будут доступны через HTTPS - посмотрите URL-адреса внутри <iframe> src например, при встраивании содержимого из Карт Google или Youtube.

Примечание: Github pages позволяют предоставлять контент через HTTPS по умолчанию, поэтому это полезно для размещения контента. Если вы используете другой хостинг и не уверены, спросите хостинг-провайдера про это.

Всегда используйте атрибут sandbox

Вы хотите дать хакерам как можно меньше возможностей, чтобы делать плохие вещи на вашем веб-сайте, поэтому вы должны позволять копипастить встроенный контент только с разрешений, необходимых для выполнения этого действия. Конечно, это относится и к вашему собственному контенту. Контейнер для кода, в котором он может использоваться надлежащим образом - или для тестирования - но не может нанести вред остальной части кодовой базы (случайной или злонамеренной), называется sandbox.

Unsandboxed контент может сделать слишком много (выполнение JavaScript, отправка форм, всплывающие окна и т. д.). По умолчанию вы должны наложить все доступные ограничения, используя атрибут sandbox без параметров, как показано в нашем предыдущем примере.

Если это абсолютно необходимо, вы можете добавлять разрешения один за другим (внутри sandbox="" атрибуты) — смотри sandbox ссылка для всех доступных опций. Важно отметить, что вы никогда не должны добавлять атрибуты allow-scripts и allow-same-origin в свой sandbox атрибут вместе— в таком случае, встроенный контент может обходить политику безопасности, которая запрещает сайтам выполнять скрипты, и использовать JavaScript для отключения "песочницы" sandbox .

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

Настройка директив CSP

CSP означает политику безопасности контента и обеспечивает набор заголовков HTTP (метаданные, отправленные вместе с вашими веб-страницами, когда они обслуживаются с веб-сервера) предназначенных для улучшения безопасности вашего HTML-документа. Когда дело доходит до обеспечения безопасности <iframe>s, вы можете настроить сервер для отправки соответствующего X-Frame-Options  заголовка. Это может помешать другим веб-сайтам встраивать ваш контент на их веб-страницы (что позволило бы использовать clickjacking и множество других атак), что и было сделано разработчиками MDN, как мы видели ранее..

Примечание: Вы можете прочитать пост Фредерика Брауна On the X-Frame-Options Security Header для более детальной информации по теме. Очевидно, что это далеко не полное разъяснение в этой статье.

Элементы <embed> and <object>

Элементы <embed> и <object>  служат другой функции от iframe - эти элементы являются инструментами общего назначения для встраивания нескольких типов внешнего контента, включая плагиновые технологии, такие как Java Applets и Flash, PDF (которые могут отображаться в браузере с плагином PDF) и даже такой контент как контент как видео, SVG и изображения!

Примечание. Плагин - это программное обеспечение, обеспечивающее доступ к контенту, который браузер не может читать изначально.

Тем не менее, вы вряд ли будете использовать эти элементы очень много - апплеты не использовались годами, Flash больше не очень популярен из-за ряда причин (см. Случай с плагинами, ниже), PDF-файлы, как правило, лучше открывать по ссылке, а другой контент, такой как изображения и видео, обрабатывают элементы намного проще этих. Плагины и эти методы внедрения действительно являются унаследованной технологией, и мы в основном упоминаем их, если вы сталкиваетесь с ними в определенных обстоятельствах, таких как интрасети или корпоративные проекты.

Если вам нужно внедрить контент плагина, ниже исчерпывающая информация, которая вам понадобится:

  <embed> <object>
URL of the embedded content src data
accurate media type of the embedded content type type
height and width (in CSS pixels) of the box controlled by the plugin height
width
height
width
names and values, to feed the plugin as parameters ad hoc attributes with those names and values single-tag <param> elements, contained within <object>
independent HTML content as fallback for an unavailable resource not supported (<noembed> is obsolete) contained within <object>, after <param> elements

Note: <object> requires a data attribute, a type attribute, or both. If you use both, you may also use the typemustmatch attribute (only implemented in Firefox, as of this writing). typemustmatch keeps the embedded file from running unless the type attribute provides the correct media type. typemustmatch can therefore confer significant security benefits when you're embedding content from a different origin (it can keep attackers from running arbitrary scripts through the plugin).

Here's an example that uses the <embed> element to embed a Flash movie (see this live on Github, and check the source code too):

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

Pretty horrible, isn't it. The HTML generated by the Adobe Flash tool tended to be even worse, using an <object> element with an <embed> element embedded in it, to cover all bases (check out an example.) Flash was even used successfully as fallback content for HTML5 video, for a time, but this is increasingly being seen as not necessary.

Now let's look at an <object> example that embeds a PDF into a page (see the live example and the source code):

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="mypdf.pdf">download the PDF file.</a></p>
</object>

PDFs were a necessary stepping stone between paper and digital, but they pose many accessibility challenges and can be hard to read on small screens. They do still tend to be popular in some circles, but it is much better to link to them so they can be downloaded or read on a separate page, rather than embedding them in a webpage.

Дело против плагинов

Когда-то плагины были незаменимы в Интернете. Помните дни, когда вам приходилось устанавливать Adobe Flash Player только для просмотра онлайн-фильма? И тогда у вас постоянно возникали раздражающие предупреждения об обновлении Flash Player и вашей Java Runtime Environment. С тех пор веб-технологии стали намного более надежными, и эти дни закончились. Для большинства приложений пришло время прекратить доставку контента, который зависит от плагинов, и вместо этого использовать веб-технологии.

  • Расширьте свою досягаемость для всех. У каждого есть браузер, но плагины используются все реже, особенно среди мобильных пользователей. Поскольку Web в значительной степени можно использовать без плагинов, люди предпочли бы просто перейти на сайты твоих конкурентов, чем установить плагин.
  • Give yourself a break from the extra accessibility headaches that come with Flash and other plugins.
  • Stay clear of additional security hazards. Adobe Flash is notoriously insecure, even after countless patches. In 2015, Alex Stamos, chief security officer of Facebook, even requested that Adobe discontinue Flash.

Итак, что нужно делать? Если вам нужна интерактивность, HTML и JavaScript могут легко выполнить задание для вас без необходимости использования апплетов Java или устаревшей технологии ActiveX / BHO. Вместо того, чтобы полагаться на Adobe Flash, вы можете использовать видео HTML5 для своих медиа-потребностей, SVG для векторной графики и Canvas для сложных изображений и анимаций. Питер Элст уже писал несколько лет назад, что Adobe Flash редко является подходящим инструментом для работы, за исключением специализированных игр и бизнес-приложений. Что касается ActiveX, браузер Microsoft Edge больше не поддерживает его.

Заключение

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


Существует много других технологий, которые включают в себя внедрение внешнего контента, помимо тех, которые мы обсуждали здесь. Мы видели некоторые из ранних статей, например <video>, <audio> и <img>, но есть и другие, например <canvas> для 2D-и 3D-графики, сгенерированной JavaScript, и <svg> для встраивания векторной графики. Мы рассмотрим SVG в следующей статье модуля.

 

In this module

 

Метки документа и участники

Внесли вклад в эту страницу: jswisher, SoMuchEffort, Roman216
Обновлялась последний раз: jswisher,