cssinjs / cssinjs/jss

Ensure escaping during SSR

Open
#1,265 3 comments 3 reactions 0 assignees View on GitHub
bug complexity:high help wanted important
Dominant language
JavaScript
Stars
7.1k
Forks
386
PR merge metrics
No merged PRs in 30d

Description

## 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:

```js
{
root: {
backgroundColor: "#FFF;}alert(document.cookie)"
}
}
```

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](https://github.com/parshap/html-escape/blob/master/index.js) I don't know if we need to escape anything else except of the closing `

Contributor guide

Open the contributing guide

Research direction

Start at registry.toString() and reproduce the server-side rendering case from the linked CodeSandbox. Determine how closing style tags are serialized, while preserving content values and background URLs; done means injected markup cannot escape the style element without breaking legitimate CSS.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, security
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.