Question

我有一个Web应用程序，该应用程序必须在某些位置显示HTML内容，这些HTML内容源自外部来源（例如电子邮件），或者已粘贴到最终存储在数据库中的其他应用程序中，即我几乎无法控制html的内容包含。

尝试了不同的选项后，确保所注入的html不会与应用程序发生冲突的最佳方法是将其注入到iframe中。

我的一个担心是，在某些极端情况下，可能会有多个iframe let表示50到100。

那么数量的iframe是否会导致现代浏览器出现问题？

就内容量而言，这不是问题，因为所有内容都将以一种或另一种方式出现在页面中，这只是一个问题，即iframe是否太重而可能使用太多资源而无法数量如此之多。

编辑我们已经在使用ajax加载内容，我们已经反复尝试过“清理”内容，但是似乎总是存在某些我们不允许的内容，例如格式错误的html，输入控件，甚至基本上是我们自己的应用程序屏幕的一部分某人可以嵌入到电子邮件中的任何内容。

使用iframe，我们可以隔离自己文档中的内容，而不必担心它会导致应用程序其余部分出现问题。

需要多个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

iframe本身具有其内容，当我们加载包含100个iframe的页面时，就像加载内容中那101个页面的总和（共享内容除外，该内容由浏览器缓存）。
无论哪种方式，最重要的问题是Cross-site Scripting。默认情况下，如果您不使用sanbox属性进行任何委派，则iframe会遵循Same Origin Policy，但是如果您要从同一服务器加载内容，则会放宽该策略。例如，iframe可以重新加载顶部框架。因此，您在这些iframe中要执行的操作必须格外小心。当然，有多种方法可以缓解此问题，其中一种是使用Content-Security-Policy标头。

结论是，我将使用Ajax代替iframe，因为它更快，更安全。但是，如果发现不可能，请注意这些要点。

使用iframe显示注入的内容

1 个答案: