javascript - 什么是更好的？使用 iframe 或类似 jquery 的东西在外部网站加载 html 文件

Question

我希望我的客户在我的 Web 应用程序上创建他们自己的 HTML，然后将我的代码复制并粘贴到他们的网站，以在具有自定义大小的位置显示结果，并在他们想要的页面中显示其他选项。我的 Web 应用程序的输出 HTML 包含 HTML 标记和 JavaScript 代码(例如是使用 JavaScript 创建的 Web 图表)。

我找到了两种方法。一个使用 iframe，两个使用 jquery .load()。

什么更好更安全？还有其他办法吗？

Answer 1

iframe 更好 - 如果您运行的是 Javascript，那么该脚本不应在与您用户站点相同的上下文中执行:您在这里要求的是用户不应获得的信任级别需要加入，并且您的代码都很好地放在沙箱中，因此您不必担心父文档的样式和脚本。

作为一名前端网络开发人员和网站管理员，我经常自己决定在 iframe 中对第三方代码进行沙盒处理。以下是我这样做的一些原因:

• 脚本会处理文档的 DOM。有一次第三方小部件自行为 IE 引入了错误和性能密集型 PNG 修复黑客，涉及我们网站上 img 标签和 CSS 中使用的每个 PNG。
• 许多脚本会覆盖全局 onload 事件，抢走其他脚本的初始化触发器。
• 读取本地 session 信息并将其发送回自己的存储库。
• 加载任意数量的资源并执行 CPU 密集型进程，中断并降低我网站的核心体验。

以上都是第三方短视或恶意的例子，你可能会像上面那样看待自己，但关键是作为你服务的用户之一，我不应该去赌一把。如果我将您的代码放在 iframe 中，我知道它可以愉快地做自己的事情，而不会影响我的网站或其用户。我还可以选择将加载和执行延迟到我选择的时刻(通过在选择的时刻动态加载 iframe)。

从您的便利性而非用户的便利性来论证这一点:

• 您不必担心与 XSS 相关的任何信任问题。您可以诚实地告诉您的用户，他们不会因为运行您的工具而让自己陷入任何不必要的担忧之中。
• 您不必付出额外的努力来规避 CSS 和 JS 对用户网站的影响。