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:
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
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.
ngBindHtml, ensure that $sanitize is available
ngSanitize module is the best practice when binding raw HTML to an element. Let’s keep updating our project files.
1. Download the
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-sanitizeto the script dependencies.
3. Update our scripts
- Line 1: add
ngSanitizeto 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
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
ngSanitizeto show that we can use
trustAsHTMLwithout it. But the best practice is you should always add this module when use
- 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
toTrustedin 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.
I’m a senior web developer helping clients build their websites to grow businesses. Currently I’m based in Taipei, Taiwan.
I write things about WordPress, AngularJS and life. Whenever you’d like to find someone to talk about these topics, just get in touch!