renderItem and styled pop-up in Angular 14

[necrolimb]

Hi,
The quill-mention upgrade from 3.x.x to 4.x.x solved a cross-site scripting vulnerability.

In the version 3.x.x, the 'renderItem' method allowed me to directly return an string with html styled like this:

        renderItem: (elem) => {
          ...
          return `
                      <img class="ql-mention-list-item-photo" src="${elem.imageLink}">
                      <div>${elem.value}</div>
                  `;

It's not safe, however, I want to keep styling the pop-up that shows a list of users to mention (show an avatar and name). This should be possible according to the documentation: "This function will need to return either a string possibly containing unsanitized user content, or a class implementing the Node interface which will be treated as a sanitized DOM node", but I cannot get it to work and I don't see any example of it working in Angular 14.

Is it not possible? Any idea?

Thanks

[csculley]

I'm not familiar with angular enough to be helpful unfortunately, but instead of returning the string, you can maybe write some JS like this:

const imgElement = document.createElement("img");
imgElement.classList += "ql-mention-list-item-photo";
imgElement.src = elem.imageLink;
const divElement = document.createElement("div");
divElement.innerText = elem.value;
return [imgElement, divElement];

This way, someone can't create an elem.imageLink or elem.value that could escape the string and start trying to execute code, but I'm not sure how to better plug those Node elements into angular :(

[csculley]

Oh I also forgot to mention, you can also look at the source code for quill-mention.com for an example of returning nodes instead of returning strings:

quill-mention/docs/index.html

Line 155 in f2801f2

renderItem: (data) => {