Ensure escaping during SSR

Script injection

Expected behavior: CSS rendered serverside needs HTML escaping by default because of script injection attack.

Describe the bug:

There is a known security issue with rendering CSS serverside and interpolating user content into it. It's the same issue that plagues all backend frameworks forever. React is very explicit about it by providing only one way to render unescaped HTML using dangerouslySetInnerHTML

In JSS this is also possible since any enduser's value can be used and if devs (JSS users) don't escape the attacker can do this:

{
  root: {
    backgroundColor: "#FFF;}</style><script>alert(document.cookie)</script>"
  }
}

In the case of JSS this is only possible with SSR, because the techniques we use on the client style.textContent and sheet.insertRule don't evaluate HTML.

Codesandbox link: https://codesandbox.io/s/elated-jepsen-qox0m

Versions (please complete the following information):

• jss: any
• Browser any
• OS any

Solution:

When we call registry.toString() we can escape closing tags example implementation I don't know if we need to escape anything else except of the closing </style tag, since this is the only way I can think of how an attacker can inject script. Let me know if there is any other way.

• Important consideration is that if we go for generic html escaping is that we would escape stuff that's inside of content property or urls of backgrounds, which will result in undesired effects.
• Another cosnideration is we need to make sure all kinds of characters are converted (unicode etc.)

CSS injection attack

There is another attack vector with CSS injection, which is discussed here.

The problem is well described by @jamesknelson https://frontarm.com/james-k-nelson/how-can-i-use-css-in-js-securely/

TLDR if attacker is able to inject custom CSS, they can capture key strokes and send requests using background images more about it here

Same issue at styled components