Использование iframe для отображения внедренного контента

Question

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

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

Мое единственное беспокойство заключается в том, что в некоторых крайних случаях может быть несколько iframe, скажем, от 50 до 100.

Это число фреймов вызовет проблему в современных браузерах?

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

EDIT Мы уже используем ajax для загрузки контента, мы неоднократно пытались «санировать» контент, но всегда есть что-то, чего мы не допускали, например, неправильно сформированный html, элементы управления вводом, даже части наших собственных экранов приложений в основном все, что кто-то может вставить в электронное письмо.

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

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

Альтернатива - продолжать пытаться бороться с дезинфекцией контента.

Answer 1

Есть несколько вещей, которые необходимо учитывать:

• iframe создание и рендеринг выполняется намного медленнее, чем любой другой элемент DOM (по крайней мере, обычные элементы). Попробуйте этот код:

console.time('iframe');

for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement('iframe'));
}
console.timeEnd('iframe'); //iframe: ~ 700ms

console.time('div');

for (let i = 0; i < 100; i++) {
  document.body.appendChild(document.createElement('div'));
}
console.timeEnd('div'); //div: ~ 1ms

• Конечно, у iframes есть свой собственный контент, когда мы загружаем страницу, содержащую 100 фреймов, это все равно, что загружать сумму этих 101 страниц в контенте (кроме общего контента, который кэшируется браузером).

• В любом случае, наиболее важной проблемой является Межсайтовый скриптинг . По умолчанию, если вы не делегируете ничего со свойством sanbox, iframes следуют Same Policy Policy , но если вы загружаете контент с того же сервера, эта политика ослабляется. Например, iframe может перезагрузить верхний фрейм. Таким образом, вы должны быть слишком внимательны к тому, что вы выполняете в этих фреймах. Конечно, есть способы смягчить эту проблему, один из них использует Content-Security-Policy заголовки.

В заключение я бы использовал ajax вместо Iframes, потому что он быстрее и безопаснее. Но если вы находите это невозможным, позаботьтесь об этом.