This blog article will illustrate how the sanitizer service works in Open Event Frontend, which allows the frontend to sanitize or clean any piece of text which can cause potential vulnerabilities in the application. To quote the official ember guides:
“An Ember.Service is a long-lived Ember object that can be made available in different parts of your application.”
Thus the chief advantage the service offers is, that the service once injected in the application can be called at any place in the templates without an explicit import.
For instance, in the route `coc`, the templates make use of the servcie as
| {{sanitize model.codeOfConduct}} |
The core of the sanitizer service is comprised of npm sanitize-html module. The sanitize-html is a powerful module which offers an extensive set of features and customisations to deal with cleaning of html embedded text. The service efficiently exposes these features to the app, and wraps its features in various functions to offer several methods which can be used to handle html text.
| export default Service.extend({
sanitize: null, options: { }, purify(string) { strip(string) { |
The options parameter of the service allows properties like allowedTags and and allowedAttributes which remove the specified tags and attributes from the text respectively. The transformTags property replaces the specified left hand side tags to the corresponding right hand side tags.
These are the generic requirements of the app and hence are exposed via tha purify method of the service. The purify method returns the sanitized string based on the configuration in the options parameter. Alternatively the strip method does not make use of the options parameter and rather passes a custom set of options with empty values for allowedTags and allowedAttributes. This method is used to completely remove any html tags or attributes from the text.
The service can be used outside of the templates in a controller or a component.
For instance the css helper uses the service to clean any text of html tags passed as a css property. The CSS helper is defined as follows.
| export default Helper.extend({ sanitizer: service(), compute(params, hash) { }); |
Resources
- Ember Services: https://guides.emberjs.com/v2.1.0/applications/services/
- Sanitize-HTML docs: https://www.npmjs.com/package/sanitize-html