1

I have two different elements, one is a content-editable DIV as a directive where you can enter some HTML such as img tags and it will render automatically on keypress.

Secondly I have a textarea which is bound to an ng-model and there I also want users to be able type HTML mainly img tags so it renders automatically however, I can't figure out if this is possible, if users type tag then it saved as is.

What is the best solution to achieve what I want on the textarea? Do I have to make a directie or is there a more simple solution where I can leverage the ng-model variable that it is bound to.

Final question, are there any security implications I need to be worried about so I handle input safely? I.e. I do not want people to put script tags in there, just img tags, links and maybe some formatting HTML. I use $santize service for the directive doing $sanitize(htmlContent) before rendering.

iQ.
  • 3,811
  • 6
  • 38
  • 57
  • Seems pretty hard to escape all HTML except a few ... – yunandtidus Oct 29 '14 at 14:09
  • at the very least script tags anyway, I think $sanitize is apparently suppose to do that, allowing only html and links, but first is it possible to do this with ng-model to render the HTML using the two binding it uses? – iQ. Oct 29 '14 at 14:12

1 Answers1

1

May you should use Strict Contextual Escaping

Doing something like : 

<textarea ng-model="content"></textarea>
<div ng-bind-html="getSafe()"></div>

In your controller :

$scope.getSafe = function(){
    return $sce.trustAsHtml($scope.content);
}
yunandtidus
  • 3,847
  • 3
  • 29
  • 42
  • That means the textarea won't show the rendered HTMl as you type but has to be shown on a separately binded div tag. – iQ. Oct 29 '14 at 14:49