Angular.js: feature request: escapeHtml filter

[happygiraffe]

I've some plain text I want to insert in a pre-block. I can't see an obvious way of escaping the HTML in order to do so. I'd have expected something like:

<pre>{{ text | escapeHtml }}</pre>

Or am I missing something obvious?

[pkozlowski-opensource]

@happygiraffe Won't the http://docs.angularjs.org/api/ng.directive:ngBindHtmlUnsafe do the trick for you?

[pkozlowski-opensource]

@happygiraffe so, coming back with a bit more info as I'm not fully clear on what the role of the escapeHtml should be. I've put together a short jsFiddle illustrating how you can use current AngularJS to display escaped and non-escaped HTML: http://jsfiddle.net/TVaES/

Could you please elaborate on what should be the exact behavior of the proposed escapeHtml filter?

[happygiraffe]

ng-bind-html-unsafe doesn't work, as it interprets tags.

I'm sorry I wasn't sufficiently clear in my original request. I'm attempting to take some text, pipe it through the "linky" filter and insert into a <pre> tag. However, I want any angle brackets in the original to be escaped before I do so.

<pre>{{ text | linky }}</pre>

Will insert the links generated by linky verbatim, rather than turning them into links.

<pre ng-bind-html="text | linky"></pre>

Will do the right thing, but attempts to parse text as HTML, which it isn't. It's just plain old text that might happen to contain angle brackets.

<pre ng-bind-html-unsafe="text | linky"></pre>

Will cause any angle brackets in text to be interpreted as tags by the browser. This is OK, as they'll probably be ignored. But really, it means that I'm subject to XSS vulnerabilities (I'm display log data from arbitrary applications). What I really want (and ended up with in my app) is:

module.filter('escapeHTML', function(text) {
  if (text) {
    return text.
        replace(/&/g, '&').
        replace(/</g, '&lt;').
        replace(/>/g, '&gt;');
  }
  return '';
});

And in the template:

<pre ng-bind-html-unsafe="text | escapeHtml | linky"></pre>

I have seen a variant of this in the angular code base already, in the doc generation.

[scaret]

I've the same request

[scomma]

:+1:. The all-or-nothing ng-bind-html is too restrictive.

[mlegenhausen]

+1

[alanhogan]

Please note that both single and double quotes must be escaped when constructing an effective, safe, reliable HTML escape function.

This is because both single and double quotes are valid to use in surrounding attribute values; if the "safe" string is echoed within an attribute value, and includes a literal, raw quote, then suddenly you have a situation where an attacker can define arbitrary attributes. I need not tell you this is game over in terms of XSS!

[alanhogan]

module.filter('escapeHTML', function(text) {
  if (text) {
    return text.
        replace(/&/g, '&').
        replace(/</g, '&lt;').
        replace(/>/g, '&gt;').
        replace(/'/g, '&#39;').
        replace(/"/g, '&quot;');
  }
  return '';
});

[vendethiel]

Note that ``` is also a sometimes working parameter delimiter

Edit : rephrased "valid"

[alanhogan]

@Nami-Doc It’s actually not, but good point. Only Internet Explorer up through version 9 accepts backticks as delimiters. It is a valid concern to escape it just in case, however.

[alanhogan]

See: http://jsfiddle.net/alanhogan/yw9aE/

[btford]

As part of our effort to clean out old issues, this issue is being automatically closed since it has been inactivite for over two months.

Please try the newest versions of Angular (1.0.8 and 1.2.0-rc.1), and if the issue persists, comment below so we can discuss it.

Thanks!

[slavafomin]

Hello!

I've found this issue with Google and it's still seems actual to me.

Does AngularJS expose some methods of escaping HTML text now? Or do I need to implement it myself?

Please consider my use case.

Thank you!

[riffraff]

this also seems like a valid concern to me. Is there a way to use $sce for this purpose maybe?

[kevinrenskers]

I have the same issue. I'd like the escape the html myself and then run other filters on top of that (linky, for example).

[lancecaraccioli]

My use case would also benefit by an explicit escapeHtml filter. In my case I have user input "userInput" which should first be escaped and then have it's new line characters replaced by break tags.

<span ng-bind-html="userInput | escapeHtml | nl2br"></span>

I have not been able to determine a native angularjs way to do this and therefore requires a custom filter 'escapeHtml'. Certainly this would be a welcome addition and benefit from the specialized security knowledge contained within the community.

[SimonBirrell]

+1. This seems like a really obvious feature. It would be especially useful in converting accented characters to their correct HTML representation.

[rodyhaddad]

$sanitize should escape your html

[Deepwalker]

$sanitize does not escape html.

[Kegsay]

+1 for escapeHtml; I'm surprised there isn't one.

[ljwagerfield]

+1

[jscheel]

I believe ng-bind will automatically escape html

[hohl]

+1

@jscheel please read the question again, I'm sure the creator of the issue is aware of that. But in case of combined usage with linkify and similar using ng-bind is not possible.

EDIT: Just tried it, but it looks like linkify already escapes HTML. However that wouldn't be what I would expect from this filter. Separating them would be a better choice.

[studentIvan]

:+1: really need this. For example: for angular emoji http://coraza.github.io/angular-emoji-popup/
In that case I want to escape output html but display smileys

[Saddham]

I too have the same request.

[nisargap]

same