ArcGIS API for JavaScript

Using HTML with Popups in the ArcGIS API for JavaScript

As a Technical Support Specialist at Esri, I have already received a few questions concerning changes to popups in the ArcGIS API for JavaScript (JS API). As mentioned in the breaking changes section of the 4.14 release notes, an HTML sanitizer was added to handle some security concerns. In this blog post I will talk about why it was added and how it will affect your development moving forward.


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:

popup template 1

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.

popup template 2

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:

popup template 3

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.

About the author

Ben Elan

Developer Products Support Specialist

Inline Feedbacks
View all comments

Next Article

Map in a minute: Map an earthquake using ArcGIS Online and ArcGIS Living Atlas

Read this article