0

Before marking this question as duplicate, let me say that I have searched for hours but could not find any proper solution.

I have an web app built with AngularJS, using REST API. The JSON data received have encoded (utf-8) HTML special characters like &lt; for <, &#39; for ' etc.

A few problems I am facing are:

1) Even though my HTML pages are saved in 'UTF-8' encoding and also has the ContentType mentioned as:

<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

All the encoded special characters that are hard-coded in the body of the HTML file are shown correctly, but they are not resolved properly when I use AngularJS to view them on the page. Meaning, if the JSON data contains &lt;, AngularJS would show it as &lt; instead of <.

2) I searched SO to find that I could use ngSanitize along with ng-bind-html to solve this problem. From Rendering special characters in placeholder of input text box I found that AngularJS does not need ng-bind-html if the values are encoded in UTF-16 using the \u character sequence. And this actually works, except that my data is encoded in a different manner.

3) Finally, to show the special characters properly inside <input /> tags using ng-model, I could not find a proper solution, and ended up processing each and every input tag value using Unescape HTML entities in Javascript?.

While both the solutions does work the way I want it to, but it is a very cumbersome process to use these methods in every input field of all the forms in my web app and almost everywhere, where AngularJS gives an output. Plus, both the solutions are a matter of great debate everywhere on SO since they are somehow or the other vulnerable to XSS attacks.

My question is, is there a "best practice" that can be followed such that AngularJS behaves properly with utf-8 encoded HTML special characters, without having to use ng-bind-html in almost every other line of my html files and processing every value of every input field before binding them to ng-model?

It kind of becomes spaghetti code to maintain and feels like an improper hack once the web app is considerably big, which mine is.

If it is of any use, I use the OWASP java Encode.forHtml(rawUserInput) method to encode my user inputs.

Thank you, in advance.

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Sajib Acharya
  • 1,666
  • 5
  • 29
  • 54
  • 2
    Your question isn't really very clear; Firstly, why do you have HTML encoded strings in your **data**? This implies that you are either saving HTML into your database (which is generally a bad idea) or you are trying to control the way that your variables are being parsed from the server (probably equally bad). Angular shouldn't have to care about UTF-8, because only the *templates* should have HTML code in them, not the *data*. – Claies Aug 06 '17 at 23:53
  • If, on the other hand, your server is just encoding strings that you plan on consuming in angular, then don't do that encoding. It's not necessary. – Claies Aug 06 '17 at 23:57
  • @Claies, encoding is necessary when I am saving user input data into my database that I may show later. I am not saving HTML into database, but user data is always untrusted and should always be encoded, isn't it? The forms I have in my app, the users may input characters like **<** or **'** from time to time. And I should encode them, shouldn't I? – Sajib Acharya Aug 07 '17 at 00:12
  • 1
    Angular automatically encodes data sent through `$http`, and data received in JSON shouldn't be encoded from the server.... – Claies Aug 07 '17 at 00:15
  • If AngularJS gets a data like "we're here!", it should show it ias "we're here!". – Sajib Acharya Aug 07 '17 at 00:16
  • @Claies, I did not know that, thank you so much for the information. So, should just save the incoming data without further encoding it in the backend? – Sajib Acharya Aug 07 '17 at 00:18
  • that kind of data shouldn't be saved in the database, nor should it be sent from the server to angular in that way. The purpose of encoding user data is to protect your server when the user data can be inserted **directly into the database command parser**, which will never happen by angular, and almost never happens anymore with most server backend frameworks. – Claies Aug 07 '17 at 00:18
  • also, if you wish to modify the way that angular transforms data, you can override the default parsers to do your own encoding or decoding: https://docs.angularjs.org/api/ng/service/$http#overriding-the-default-transformations-per-request. – Claies Aug 07 '17 at 00:21
  • Help me with one thing, I seem to be unable to understand what you mean by "that kind of data shouldn't be saved in the database". Right now, my app works like, an user fills a form, which is sent to the server, the server encodes the data, then uses prepared statements to save to database. When some user requests that data, it is fetched from database and returned as JSON for Angular to parse and show. That is where angular is not viewing the encoded special characters properly. What am I doing wrong here? Do advice me. Thanks. – Sajib Acharya Aug 07 '17 at 00:27

0 Answers0