HTML decode needs to be added for Selection Info

[RenoSun]

Hi Jackie,

It will be nice if the selection information can be HTML decoded.

Just an suggestion, or would you please tell me where can I modified the codes to achieve that?

Thanks!

[jumpinjackie]

You can either plug a custom selectedFeatureRenderer to your selection panel props, or modify the default one from this:

<td>{prop.Value}</td>

to this

<td dangerouslySetInnerHTML={{ __html: prop.Value }}></td>

However, you should only do this if you know that your selection data comes from a trusted source.

The reason React called this dangerouslySetInnerHTML is because you are opening this component to potential cross-site scripting attacks. If prop.Value has <script> blocks inside that you do not control, your browser will happily execute it.

If you prefer a solution from me. I could put this behind a boolean flag (setting to true means you understand the risks), or I could run the content through an XSS sanitizer like DOM purify first.

[RenoSun]

I think running the content through an XSS sanitizer like DOM purify first. Then, still build a Boolean flag to allow user to choose if they would like to sanitize HTML, and decode the sanitized HTML.

[jumpinjackie]

As of ba66d5a, you can opt-in to decoded HTML content in the Selection Panel by specifying the following viewer mount options:

selectionSettings: {
    allowHtmlValues: true,
    cleanHtml: function(value) {
        //TODO: Call some HTML sanitization function (eg. DOMPurify.sanitize()) and return the sanitized content
    }
}

I've made the decision to just provide the means to allow HTML content and provide a hook to plug in a content sanitizer like DOMPurify, rather than wear the cost of bundling in a copy of DOMPurify

[jumpinjackie]

To verify this works, here's what I did to test.

I made an extended feature class with an Image computed property that is a dynamically constructed HTML image tag

Made sure the layer referencing this extended feature class has this computed property set.

Under normal settings, the computed property would look like this:

But when you apply the settings (allowHtmlValues = true) as per my previous post, it will then become like this:

[jumpinjackie]

The decision of whether to sanitize HTML content I will leave up to the user with the settings and hooks provided.