42 replies

icon swap | InnerHTML security risks

Hey, if you had a button with an icon in it, let’s say it’s a theme toggle, and your icon switches from a sun to a moon when you click, the way I’d imagine doing that is by setting the button’s

innerHTML

innerHTML

to a different svg. I’ve heard this poses security risks though since users can manipulate the data in there. What would a better alternative be for swapping out content like that?

Using

adjacentHTML

adjacentHTML

doesn’t seem like it would fit the use case since this adds the content but doesn’t replace it. I know you could then remove the other icon but I feel you could do the whole thing in one swoop without doing that? I may be wrong. I believe there was a method called

.replaceWith

.replaceWith

or something along those lines but I’d assume you would put html in there too so I’d imagine there’s security risks with that as well, and I can’t imagine using a template for something small like this is worth it? Please correct me if I’m wrong with any of this.

I’d appreciate any insight, thanks in advance.

KP-C

Kevin Powell - Community•17mo ago•

42 replies

snxxwyy

icon swap | InnerHTML security risks

Hey, if you had a button with an icon in it, let’s say it’s a theme toggle, and your icon switches from a sun to a moon when you click, the way I’d imagine doing that is by setting the button’s

innerHTML

innerHTML

to a different svg. I’ve heard this poses security risks though since users can manipulate the data in there. What would a better alternative be for swapping out content like that?

Using

adjacentHTML

adjacentHTML

.replaceWith

.replaceWith

icon swap | InnerHTML security risks

Similar Threads

icon swap | InnerHTML security risks

Similar Threads

Similar Threads

Similar Threads