我写了一个 Mozilla Firefox Addon ，它让我评论网站：当我打开一个网站并点击某个地方时，该插件会在这个位置创建一个<div>框，我可以在这里输入评论文字。稍后，当我再次打开网站时，插件会自动将我之前创建的评论框放在之前的位置。 （类似于许多PDF阅读器中的注释功能等）
这会导致安全问题：网站可以使用事件监听器来监听新<div>元素的创建并阅读其内容，以便阅读我的私人评论。
如何解决此安全问题？基本上，我想要一个Firefox插件将私人内容放在网站上，而网站则无法通过JavaScript访问此内容。 （除非我想要它。）
我可以听听听众并在网站附上后立即将其分离 - 但这听起来像是一个可靠的解决方案。
是否存在一个安全概念，以使我的插件分别对DOM更改拥有权限来控制对某些元素的访问？ 或者，是否可以实现某种覆盖，这不是网站DOM的实际部分，但只能由插件访问？
其他插件也应该出现类似的安全问题。他们是如何解决的？
答案 0 :(得分：3)
如果您在文档中注入DOM，文档将始终能够操作它，您无法真正做很多事情。你可以：
1）不要直接在文档中注入您的评论，但只是占位符是评论的第一个单词，或评论的图像版本（您可以使用canvas生成），将完整的内容保留在JavaScript附加组件范围内，无法从页面访问：当您单击进行编辑或添加时，可以打开panel并在那里进行编辑。
2）注入一个iframe，如果你的页面在另一个域中远程访问应该不是问题，那么父文档就无法访问iframe;但是反之亦然：您需要将内容脚本附加到iframe以便与您的附加代码进行通信，然后您可以使用附加代码来发送和接收来自iframe和父文档的消息。
如果您使用本地resource://文档，我担心您需要一个糟糕的解决方法，并且您需要使用sandbox策略来避免父文档可以与iframe本身进行通信。请在此处查看我的回复：Firefox Addon SDK: Loading addon file into iframe
3）使用CSS：您可以通过页面模式中的contentStyle和contentStyleFile将CSS应用于文档。以这种方式附加的CSS无法由文档本身进行检查，您可以使用content将文本添加到页面，而无需实际添加可以检查的DOM。所以，你的风格可能是：
span#comment-12::after{
content: 'Hello World';
}
您添加的DOM可能是：
<div><span id='comment-12'></span></div>
如果页面试图检查跨度的内容，它将获得一个空文本节点;并且因为从页面本身无法检查以这种方式添加的样式表，所以它们不能通过样式来获取文本。
不确定是否有替代方案，这些都是我想到的解决方案。
答案 1 :(得分：2)
执行类似操作的加载项实现了白名单/黑名单功能的某种组合，其中加载项用户指定了他们希望操作发生在哪些站点，或者他们不< / em>希望它发生在。作为附加作者，您可以创建它，也许提供合理的默认配置。 Adblock Plus也做类似的事情。
答案 2 :(得分：2)
创建iframe并将所有事件绑定到新DOM。通过为网站提供不同的域名，您将阻止他们收听事件和更改。
答案 3 :(得分：1)
插件可以使用devtools使用的anonymous content API来创建节点高亮显示器叠加层。
虽然匿名内容的operations supported相当有限，但对于您的用例可能已经足够或可能不足。