HTMX attributes are stripped from HTML nodes

[ouvreboite]

Description

I'm trying to use HTMX with mermaid charts. A naive usage would be to use the HTMX attributes in the nodes directly.

<pre class="mermaid">
  graph TD
    NodeA(<a href="NodeA.html" hx-get="NodeA.html">NodeA</a>) -->NodeB
</pre>

Sadly, the hx-get attributes (and others custom HTMX attributes) are somehow stripped and not present in the resulting foreignObject

<foreignObject width="27.125" height="24">
    <div  xmlns="...">
    <span class="nodeLabel ">
        <p>
            <a href="NodeA.html">NodeA</a> <!-- ⬅️ the hx-get attribute is missing -->
        </p>
    </span>
    </div>
</foreignObject>

I have set the security level to loose

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
    mermaid.initialize({
        securityLevel: 'loose',
    });
</script>

Steps to reproduce

Fiddle with minimal example: https://jsfiddle.net/ejw1978d/1/

Screenshots

No response

Code Sample

<pre class="mermaid">
  graph TD
    NodeA(<a href="NodeA.html" hx-get="NodeA.html">NodeA</a>) -->NodeB
</pre>

Setup

• Mermaid version: https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs
• Browser and Version: Chrome 129.0.6668.90

Suggested Solutions

No response

Additional Context

No response

[sidharthv96]

We use DOMPurify for the sanitization, which might be removing the attributes.

[julosaure]

Is it possible not to sanitize while rendering?

[sidharthv96]

I don't think it's possible now, but we could add a new security level (none ?), which skips DOMPurify.

[mattdean-digicatapult]

As an alternative to a security level none would you consider exposing some of the configuration parameters for DOMPurify? That way the user can configure which attributes should be allowed through