AngularJS: How to resolve "Attempting to use an unsafe value in a safe context"?

Question

When I tried to show my data as a text-html, it displayed in HTML format but when I refreshed the page, I am getting this error:

[$sce:unsafe] Attempting to use an unsafe value in a safe context.

Here is my AngularJS code:

data.attributes.task_name = $sce.trustAsHtml(data.attributes.task_name);

HTML

<span ng-bind-html="taskdata.attributes.task_name" data-html="true" title="{{reminder.attributes.message}}"></span>

Answer 1

From the Angular documentation:

The value provided for use in a specific context was not found to be safe/trusted for use.

AngularJS's Strict Contextual Escaping (SCE) mode (enabled by default), requires bindings in certain contexts to result in a value that is trusted as safe for use in such a context. (e.g. loading an AngularJS template from a URL requires that the URL is one considered safe for loading resources.)

This helps prevent XSS and other security issues. Read more at Strict Contextual Escaping (SCE)

You may want to include the ngSanitize module to use the automatic sanitizing.

---

You have to include ngSanitize:

Load it on index.html:

<script src="lib/angular/angular-sanitize.min.js"></script>

Inject it as a dependency in your app.js:

angular.module('myApp', ['...', 'ngSanitize']);