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?