在 Firebase (AngularFire) 中存储 HTML，好主意还是坏主意？答案

【问题标题】：Storing HTML in Firebase (AngularFire), good idea or bad?在 Firebase (AngularFire) 中存储 HTML，好主意还是坏主意？
【发布时间】：2015-07-20 08:18:56
【问题描述】：

在 Firebase (AngularFire) 中存储 HTML 是个好主意吗？

我有一个网站，我正在创建一个管理网站，用户可以在其中制作 HTML 元素。我希望人们保存这些元素以及元素中的顺序和内容。所以我认为将整个 HTML 存储为字符串并在它们返回时加载它会容易得多。坏主意？

这是我所拥有的（简化）：

$scope.save = function() {
    var refState = new Firebase("https://<name>.firebaseio.com/users/" + currentAuth.uid + "/state");
    var html = "<div>hello</div>";
    refState.set({
        "state": html
    }, function(error) {
        if (error) {
            console.log("not been saved")
        }
    })
}

在我检索的 HTML 中，我想使用 Angular 像这样显示它，（是的，由于 cmets，我现在知道如何在 Angular 中呈现 HTML :)

<div class="well col-md-12">
{{sync[3].state}}
</div>

【问题讨论】：

How to render html with angular templates 的可能重复项
我觉得这可能是the XY problem的情况。或许可以尝试告诉我们您通过在 Firebase 中存储 HTML 实际想要实现的目标？
@FrankvanPuffelen 是的，我明白了，谢谢。但是将 HTML 存储在 firebase 中是否不安全？
@Marein 不，这基本上是我想要做的。我想创建一个管理站点，人们可以在其中创建 html 元素并存储它们。这些元素彼此高度不同，并且具有动态内容，而且它们不是按固定顺序排列的。因此，将整个 html 存储为字符串对我来说似乎更容易，当它们返回时，我只需加载 HTML，它们就可以从那里修改/继续
@FrankvanPuffelen 嗨，弗兰克，您似乎来自 Firebase 团队。在有人建议使用 Firepad 存储 HTML 的答案中。这是否会带来其他答案中提到的相同安全问题，例如 XXS 问题？

标签： javascript html angularjs firebase angularfire

【解决方案1】：

在 firebase 中存储字符串化的 HTML 并不比将其存储在不同的数据存储中更糟糕。您需要考虑 XSS 问题，包括如果他们在 html 中定义 <style>body{display:none}</style> 会怎样。

您是否正在创建一个真正完整的内容创建系统？如果是这样，有时很难摆脱用户定义的 HTML，通常来自 CKeditor、tinymce 等。但是，如果他们正在构建的项目都相似，您应该考虑如何在更好的数据中存储/恢复它们格式。大多数时候，有一种更好的方法来保存和恢复用户定义的内容，而不是直接存储 HTML。

【讨论】：

谢谢。这是我一直在寻找的答案。我会考虑做不同的。不过，这似乎还有很多工作。项目也有很大差异......
编写一个完整的内容创建系统是最难的 Web 开发任务之一。单独处理富文本是一场噩梦。作为旁注，将用户生成的内容粘贴到iframe 是少数几个使用它们的好时机之一，它在沙盒方面为您带来了很多好处。一旦 Web 组件完全实现，它们也将是一个很好的解决方案。

【解决方案2】：

我建议查看 Firepad。

Firepad 是一种适用于 Firebase 应用的嵌入式“开源协作代码和文本编辑”体验。
“Firepad 可以使用 CodeMirror 编辑器或 Ace 编辑器来呈现文档。”
轻松实现富文本编辑器体验，在 Firebase 实例中无缝存储/同步内容。

正如documentation 所描述的，这就是初始化 Firepad 的方式：

<div id="firepad"></div>
<script>
  var firepadRef = new Firebase('<FIREBASE URL>');
  var codeMirror = CodeMirror(document.getElementById('firepad'), { lineWrapping: true });
  var firepad = Firepad.fromCodeMirror(firepadRef, codeMirror,
      { richTextShortcuts: true, richTextToolbar: true, defaultText: 'Hello, World!' });
</script>

在 Firebase 中存储 HTML 非常好。

Koding.com、Nitrous.io 等将 Firepad 用于他们的协作代码编辑器产品。

【讨论】：

嘿，这真是个不错的东西。但这真的安全吗。看到其他答案，他们不推荐它。 Firepad 如何确保安全？
你好，米奇。这是一个很好的问题，我不知道答案。我认为 Dylan 的回答中提出的相同问题也适用。也许 Firebase 团队的某个人可以在 Firepad 的上下文中加入 - @FrankvanPuffelen？。我个人从未遇到任何问题，我只是想从易用性的角度提出 Firepad。
由于 Firebase 使用 CodeMirror 或 AceEditor 来显示 HTML，答案是 Firebase 在保护这一点上做的很少，但 UX 工具利用了大量的 XSS 安全性。

【解决方案3】：

我认为将html存储在firebase中是非常糟糕的主意，只存储痛苦文本
How to render html with angular templates

【讨论】：

你能详细说明为什么将 HTML 存储在 firebase 中是不好的吗？安全问题？