Angular $http.get query returning html data doesn't display as normal html.. Instead it display as text in website ..

Question

Basically my problem is that when i fetch data using $http.get method of the AngularJS , the Json encoded data which is printed by the PHP doesnt render in the website instead it shows as plain text.. for ex when PHP prints <h3 class=\"someclass\">Hello World<\/div>" and also simultaneously i try to parse the JSON using JSON.parse but it gives me Syntax Error: Unexpected token o . Basically the received HTML markup is not rendered.. Its just as plain text.. See below:

The h3 tag that i rectangled in black doesn't render in the page. Even in the source you can see its not as a markup but as a plain text.

Answer 1

There is a pretty good answer on escaping/not escaping HTML in angular here: https://stackoverflow.com/a/19417443/402551

It is a security feature that text injected into the DOM is not parsed as HTML, which saves you against some XSS attacks and the like. You have to manually ensure that it is rendered, so you need to think about the security implications yourself. Please familiarize yourself with XSS mechanisms and sanitize your input, before you bypass the escaping.

In general, Angular is designed in a way that you do not render any HTML server-side, just supply your frontend with the data and render there. This way, you won't have most of these problems. Please review, whether you can change that in your project.

Answer 2

Use ng-bing-html to escape HTML content from the response,

While getting the response do as below,

$scope.temp_variable=$sce.trustAsHtml(response);

In your HTML display the value like this,

<div>
    <span ng-bind-html="temp_variable"></span>
</div>

Answer 3

To print an html data, Ned to include sanitize Module first http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-sanitize.js

Then create a filter

Rapp.filter('unsafe', function($sce) {
    return function(val) {
        return $sce.trustAsHtml(val);
    };
});

Then write the html as shown below

<span ng-bind-html="myWelcome | unsafe"></span>