Select to view content in your preferred language

Excessive HTML sanitisation preventing using SVGs in Popups

191
0
09-12-2024 03:05 AM
Labels (2)
JonathanDawe3
Emerging Contributor

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:

  1. Specify SVG fill colors.
  2. Apply simple transformations, such as rotations, to elements using a transformation style property.
  3. 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? 

JonathanDawe_BAS_0-1726134757460.png

 

0 Kudos
0 Replies