7

Is it a good idea to store HTML in Firebase (AngularFire)?

I have a website where I am creating an admin site where users can make HTML elements. I want people to save these elements and the order and the content within the elements. So I thought it would be much easier to just store the whole HTML as a string and load it in when they return. Bad idea?

Here is what I have (simplification):

$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")
        }
    })
}

And in my HTML I retrieve want to display it like this using Angular, (yeah I know now how to render HTML in Angular thanks to the comments :)

<div class="well col-md-12">
{{sync[3].state}}
</div>
scniro
  • 16,844
  • 8
  • 62
  • 106
Michelangelo
  • 5,888
  • 5
  • 31
  • 50
  • possible duplicate of [How to render html with angular templates](http://stackoverflow.com/questions/15754515/how-to-render-html-with-angular-templates) – Frank van Puffelen May 09 '15 at 14:39
  • I feel that this might be a case of [the XY problem](http://mywiki.wooledge.org/XyProblem). Perhaps try telling us what you are actually trying to achieve by storing HTML in Firebase? –  May 09 '15 at 15:45
  • @FrankvanPuffelen Yeah ok I got it, thanks. But is it bad in terms of safety to store HTML in firebase? – Michelangelo May 09 '15 at 17:48
  • @Marein No this is bascially what I am trying to do. I want to create an admin site where people can create html elements and store them. These elements differ highly from each other and have dynamic content plus they are not in a set order. So it seemed easier to me to just store the whole html as a string and when they returned I jsut load in the HTML and they can modify/continue from there – Michelangelo May 09 '15 at 17:54
  • @FrankvanPuffelen Hi Frank you seem from the Firebase team. In the answers someone suggested using Firepad to store HTML. Does this bring the same safety problems mentioned in the other answers, XXS issues for example? – Michelangelo May 10 '15 at 11:08
  • Firepad uses CodeMirror, which restricts XSS. – Kato May 11 '15 at 19:14
  • @Kato Ok cool thanks for the answer, I will definitely take a good look at Firepad! – Michelangelo May 11 '15 at 19:15

3 Answers3

5

Storing stringified HTML in firebase is no worse than storing it in a different datastore. You'll want to consider XSS issues, including things like what if they define <style>body{display:none}</style> in their html.

Are you creating a real full fleshed content creation system? If so, it's sometimes hard to get away from user defined HTML, usually from CKeditor, tinymce, etc. However, if the items that they're building are all similar, you should consider how you can store/restore them in a better data format. Most of the time there is a better way to save and restore user defined content that storing straight HTML.

Dylan Watt
  • 3,357
  • 12
  • 16
  • Thnx. This is the answer I was looking for. I will consider doing it different. It seems like a lot more work though. Items differ heavily also... – Michelangelo May 09 '15 at 19:06
  • Writing a fully fleshed out content creation system is one of the hardest web development tasks. Dealing with rich text alone is a nightmare. As a side note, sticking user generated content in an `iframe` is one of the few good times to use an them, it buys you a lot in terms of sandboxing. Once web components are fully implemented, they'll also be a good solution for this. – Dylan Watt May 09 '15 at 19:10
4

I'd suggest checking out Firepad.

  • Firepad is a drop-in "Open source collaborative code and text editing" experience for Firebase apps.
  • "Firepad can use either the CodeMirror editor or the Ace editor to render documents."
  • Easily allows for a rich text-editor experience that seamlessly stores/syncs the content in a Firebase instance.

As the documentation describes, this is how you initialize 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>

It's perfectly fine to store HTML in Firebase.

Koding.com, Nitrous.io, and more use Firepad for their collaborative code editor products.

sbolel
  • 3,486
  • 28
  • 45
  • Hey this is pretty coll stuff. But is this really safe. Seeing the other answers they don't recommend it. What does Firepad do to make it safe? – Michelangelo May 09 '15 at 23:02
  • Hello Mikey. That's a great question, and I don't know the answer. I would figure the same concerns brought up in Dylan's answer would apply. Maybe someone from the Firebase team could chime in, in the context of Firepad - @FrankvanPuffelen?. I personally never ran into any problems, and I just wanted to bring up Firepad from an ease of use perspective. – sbolel May 09 '15 at 23:15
  • 2
    Since Firebase uses CodeMirror or AceEditor to display the HTML, the answer is that Firebase does very little to secure this, but the UX tools utilized to a great deal of XSS security. – Kato May 11 '15 at 19:14
-1
  1. I think it's very bad idea to store html in firebase, store only pain text
  2. How to render html with angular templates
Community
  • 1
  • 1
Suleiman
  • 1,003
  • 2
  • 15
  • 29