[question] How do I ignore XSS errors on custom JSX components?

[coindegen]

Prerequisites

• I have written a descriptive issue title
• I have searched existing issues to ensure the bug has not already been reported

Versions

"@kitajs/ts-html-plugin": "^1.3.4",

Description

Hi there,

first off, love the project. Has been absolutely flawless so far.

I read the following in your docs (https://kitajs.github.io/ts-html-plugin/#special-cases) :

Ternary and binary operations are evaluated in both sides separately and will throw errors if any of the sides is not safe, even their condition never gets hit at runtime.

I'm finding the XSS plugin exceedingly aggressive, finding errors where there shouldn't be. I'm hoping you can suggest some workarounds. Consider the following code:

<div class="body">
              {collection.website && (
                <Badge externalUrl={collection.website} symbol="website" />
              )}
              {collection.twitter && (
                <Badge externalUrl={collection.twitter} symbol="x" />
              )}
              {collection.discord && (
                <Badge externalUrl={collection.discord} symbol="discord" />
              )}
</div>

Each of these gets flagged as xss-prone content as in the screenshot (whether I use short-circuiting above or switch to ? : syntax makes no difference.) This doesn't feel like the intention behind the plugin at all.

I tried escaping the content like this:

              {collection.website && (
                <Badge
                  externalUrl={Html.escapeHtml(collection.website)}
                  symbol="website"
                />
              )}

But it's still flagged as xss prone.

I don't want to pass the safe attribute to the enclosing <div>, because <Badge /> is a custom component comprising more JSX.

a) Is there a way to mark a component as "safe", like a string primitive?
b) Wouldn't it be more sensible to skip XSS warnings for custom JSX components? Maybe I'm missing something but I only care about that warning on standard HTML tags like <div>, <span>, <p>, etc...

Thanks very much.

Steps to Reproduce

use above code snippet

Expected Behavior

No response

[arthurfiorette]

https://github.com/kitajs/html/tree/master/packages/ts-html-plugin#handling-warnings

[arthurfiorette]

But I'm pretty sure this is related to #146

[JacopoPatroclo]

@arthurfiorette I can take a look into this

[arthurfiorette]

Sure, go for it :)