Excessive HTML sanitisation preventing using SVGs in Popups

JonathanDawe3 — Thu, 12 Sep 2024 10:05:49 GMT

I am trying to create a popup to provide information about assets, but I am facing significant limitations with SVGs and the CSS available on the ArcGIS platform inside of popups.

I understand that ArcGIS performs internal HTML sanitization (e.g. via @esri/arcgis-html-sanitize) to protect against XSS attacks, but I am surprised by the extent of these restrictions. For example, it is currently not possible to:

Specify SVG fill colors.
Apply simple transformations, such as rotations, to elements using a transformation style property.
Use many types of SVG elements. For instance, circles and other elements are stripped of all their attributes and are rendered useless.

I created a simple popup design in Figma that requires an SVG rotated to the correct orientation based on a heading attribute from a feature. To achieve this simple requirement, I have found it impossible to use an SVG. Instead, I am forced to use an image hosted by a provider like Cloudinary, which allows for server-side rotation of the image via a property in the url (details here)

Is there a simpler way to achieve this effect? Does the XSS sanitation need to be so severe as to render the use of core html syntax unusable?

topic Excessive HTML sanitisation preventing using SVGs in Popups in ArcGIS Online Questions

Excessive HTML sanitisation preventing using SVGs in Popups