Why sanitize HTML?
The main concern when allowing users to inject HTML into applications is Cross-Site Scripting (XSS) attacks. According to OWASP:
Cross-Site Scripting (XSS) attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user.
The HTML sanitizer used by the JS API does a good job of allowing some HTML, while removing potentially harmful code. For example, let’s say you define your Popup Template as:
This clearly contains HTML. There is a link, an image, and bold/italicized text. However, the above popup will work fine because there is nothing ‘dangerous’ that may run a malicious script. Check out this page for a list of supported HTML tags. In the recent release of 4.15, the rules for sanitizing HTML became less restrictive than the those in the list provided above.
The next code snippet contains a button with an onclick function.
This code will be sanitized because it can be potentially harmful depending on what the on-click function does.
What to do if your HTML is sanitized
The work-around is to use a function to modify the DOM node of the popup directly. This will get around the HTML sanitizer baked into the JS API. So, in order to add a button to your popup, you would define the template as:
The above will work for most people. Some of you may have noticed a slight change between the two previous code snippets. The template which modifies the DOM node of the popup does not contain the Arcade expressions. Here is a sample that demonstrates how to both access feature attributes and use HTML in your popup.