render HTML from mySQL to display on a page Angular and JavaScript

Question

I am using Angular for front end, and node for back end. I am getting the data from a mySql db, where I have manually stored it in text format but with HTML tags on it ie:

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

The data is currently in JSON format ie:

{
  "data": [
    {
      "id": 1,
      "sort_order": 0,
      "content_type": "main_message",
      "heading": "Welcome to our site ",
      "content": "<ul>
                      <li>item1</li>
                      <li>item2</li>
                      <li>item3</li>
                  </ul>",
      "page_name": "home",
      "author_id": "abhatti",
      "date_created": "2017-03-13T15:12:00.000Z",
      "date_modified": "2017-03-13T15:12:00.000Z",
      "modified_by": "abhatti"
    },
    {
      "id": 2,
      "sort_order": 0,
      "content_type": "main_body_content",
      "heading": "Announcements",
      "content": "",
      "page_name": "home",
      "author_id": "Robert",
      "date_created": "2016-12-31T17:00:00.000Z",
      "date_modified": "2017-03-11T07:08:00.000Z",
      "modified_by": "Danny"
    }, 

when I put the data in the table , I want the table to show the data in HTML format , but it shows in raw format with all the HTML tags visible on the page like this

<ul>
   <li>item1</li>
   <li>item2</li>
   <li>item3</li>
</ul>

but I want something like this

• item1
• item2
• item3

How can I convert the data properly so it is read by the browser as HTML? Right now it is put in as a string.

Answer 1

By default AngularJS (1.2+) will interpolate HTML as text. This function is built into AngularJS to avoid XSS concerns, however there are times (such as in your case here) where you may actually want to render HTML in your template instead of displaying it as text.

To do so, take a look at AngularJS' $sce library. In your controller you can specify that you want to trust the data you retrieved from MySQL as HTML:

$scope.explicitlyTrustedHtml = $sce.trustAsHtml('<div><span>Hello World!</span></div>');

In your template be sure to bind using ng-bind-html :

<div ng-controller="MyController as myCtrl">
    <div ng-bind-html="myCtrl.explicitlyTrustedHtml"></div>
</div>

If you absolutely need to, you can disable $sce for the entire application, however this is highly discouraged for security purposes. To do so inject $sceProvider , add the following line to your main module's configuration block:

$sceProvider.enabled(false);

Although the $sce library is helpful, my advice would be to find a better way to restructure your data in MySQL so that you're not asking it for HTML. If you're only ever reading the data -- you might be okay from a security perspective. However, if you're allowing users to POST HTML snippets from your AngularJS application and are persisting these snippets in MySQL, you're asking for XSS attacks.