AngularJS WordPress Theme: Display Post Content with ngBindHtml

This is the second post of a series about building WordPress themes with AngularJS and WP REST API (WP API).

In the last screenshot of my previous post Using AngularJS And JSON API In Your WordPress Theme, you might be wondering why the post content displayed with the HTML tag, which looks like this:

This is not a bug, I left it intentionally to extend the series to another topic: ngBindHTML directive.

The name of ngBindHTML directive indicates that it is for binding HTML to the view. I bet you must be eager to try it by update the content.html to:

If so, you’ll be disappointed that not only the post content disappears, but also there comes an error to you console: From the error log the almighty AngularJS told us that the HTML we bound to the div might be “unsafe”. It’s very lucky to have AngularJS to get our back. It even provides an module called ngSanitize to sanitize the data in our code.

When use ngBindHtml, ensure that $sanitize is available

Use ngBindHtml with ngSanitize module is the best practice when binding raw HTML to an element. Let’s keep updating our project files.

1. Download the ngSanitize module

Use bower install angular-sanitize to download the scripts, or get the files from GitHub repo.

2. Enqueue the scripts in functions.php

• Line 15-19: register the script
• Line 24: add angularjs-sanitize to the script dependencies.

3. Update our scripts

• Line 1: add ngSanitize to the module dependencies.

Now we get the content displayed as usual in the single post view. You can get the complete theme files from the project repository on GitHub.

Bypass sanitization for values you know are safe

When I said use ngSanitize module is the best practice to bind raw HTML to an element, you must be wondering if there are other ways to do so? The answer is yes of course, and here comes the trustAsHTML method from $sce service (documentation).

Please note you can only use trustAsHTML without ngSanitize module when you are 1000% sure the values are safe. In other words, you should NEVER do that.  

1. Create a custom filter in the scripts.js

• Line 1: I remove the ngSanitize to show that we can use trustAsHTML without it. But the best practice is you should always add this module when use ng-bind-html directive.
• Line 5-9: the custom filter. We create a filter called toTrusted, and when we pass text to it, it will interpret the text as HTML rather than escaped it.

2. Pass post content through filter

• Line 2: post.content | toTrusted: the left side of the pipe |, is the value to evaluate; the right side of the pipe, is the filter we’d like to use, which is toTrusted in this case.

You’ll get the same result as the previous screenshot, our post content will be parsed as HTML rather than escaped text. Get complete theme files using trustAsHtml to filter post content on this branch of my repo.

---

When work with values input by users, security is the top priority we should keep in mind. As developers come from WordPress world, we are all familiar with the importance of escaping all the things and the built-in functions to sanitize and validate user inputs in WordPress.

In AngularJS, master the $sce service would be a good start to building a secure client app. The sample chapter of the ng-book might be helpful for you. Enjoy the reading and I’ll be here if you need any assistance about this tutorial.