Kevin Powell - Community•4d ago

What are the dangers of allowing a user to specify a stylesheet?

I've got a NFT site & I'm considering allowing users to specify custom page styles as an element of the NFT's metadata. The style will be an emotionesque CSS-in-JS encoding like:

const color = 'blue'
const style = {
  padding: '32px',
  backgroundColor: 'hotpink',
  fontSize: '24px',
  borderRadius: '4px',
  '&:hover': { color },
}

const color = 'blue'
const style = {
  padding: '32px',
  backgroundColor: 'hotpink',
  fontSize: '24px',
  borderRadius: '4px',
  '&:hover': { color },
}

What are the security considerations here? I can easily disallow @import directives.

3 Replies

b1mind•4d ago

why not just use custom props 🤔

ChooKing•4d ago

Background images can be set in CSS, so it's possible to insert spam or porn. It's also possible to replace content on the page, which could be the basis for a scam.

dysbulic 🐙•4d ago

Doing custom props requires me to structure the page and figure out all the ways a user might want to alter the appearance. Say they want a border radius of 5% on the header & 2rem on the body elements. With CSS they can do that pretty readily (if I use a coherent semantic markup), if I'm defining all the props, I'll need separate ones for each different location. For me to create a structure that matches the natural expressiveness of CSS is pretty much impossible.

Gaming

Programming

What are the dangers of allowing a user to specify a stylesheet?