javascript - Firefox Addon 可以在不让网站访问更改的情况下操作 DOM

Question

我编写了一个 Mozilla Firefox 插件，它可以让我评论网站:当我打开网站并单击某处时，该插件会创建一个 <div>在此位置的框中，我可以在其中输入评论文本。稍后，当我再次打开该网站时，该插件会自动将我之前创建的评论框放在之前的位置。 (类似于很多PDF阅读器中的评论功能等)

这会导致安全问题:网站可以使用事件监听器来监听新 <div> 的创建。元素并读取其内容，允许其读取我的私有(private)评论。

如何解决这个安全问题？基本上，我想要一个 Firefox 插件将私有(private)内容放入网站中，而该网站不应该能够通过 JavaScript 访问此内容。 。 (除非我愿意。)

我可以听取听众的意见，并在网站附加它们后立即将它们分离 - 但这听起来确实是一个可靠的解决方案。

是否有一个安全概念，以便使我的插件能够分别更改 DOM 的权限，以控制对某些元素的访问？或者，是否可以实现某种覆盖，它不是网站 DOM 的实际部分，而只能通过插件访问？

其他插件也应该出现类似的安全问题。他们是如何解决的？

Answer 1

如果您将 DOM 注入(inject)到文档中，文档将始终能够操作它，您对此无能为力。您可以:

1) 不要直接在文档中注入(inject)评论，而只是一个占位符，其中有评论的第一个单词，或者评论的图像版本(您可以使用 canvas 生成它) >)，将完整的内容保留在 JavaScript 插件范围内，无法从页面访问:当您单击编辑或添加时，您可以打开一个面板并在那里进行编辑。

2)注入(inject)一个iframe，如果你的页面远程在另一个域中应该不是问题，父文档无法访问iframe；反之亦然:您需要将内容脚本附加到 iframe 以便与您的附加代码对话，然后您可以使用附加代码从 iframe 和父文档发送和接收消息。如果您使用本地 resource:// 文档，恐怕您需要一个糟糕的解决方法，并且您需要使用 sandbox 策略来避免父文档可以与 iframe 本身进行通信。请参阅我的回复:Firefox Addon SDK: Loading addon file into iframe

3) 使用 CSS:您可以通过 page-mods 中的 contentStyle 和 contentStyleFile 将 CSS 应用到文档。以这种方式附加的 CSS 无法由文档本身检查，您可以使用 content 将文本添加到页面，而无需实际添加可以检查的 DOM。因此，您的风格可以是:

  span#comment-12::after{
    content: 'Hello World';
  }

您添加的 DOM 可能位于:

  <div><span id='comment-12'></span></div>

如果页面尝试检查span的内容，它将得到一个空文本节点；并且因为从页面本身无法检查以这种方式添加的样式表，所以他们无法通过样式规则来获取文本。

不确定是否有替代方案，这些是我想到的解决方案。