palantir/blueprint

[table] ResizeSensor injects raw HTML which violates Content Security Policy

Open

#5702 opened on Oct 28, 2022

View on GitHub
 (2 comments) (3 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P2Package: tableType: enhancementhelp wanted

Description

Environment

  • Package version(s):
    "@blueprintjs/table": "^4.7.5",
  • Operating System:
    • Running inside a Docker container with below version
    • on WSL with Ubuntu 20.04.5 LTS distribution
    • on Windows 10 Pro build 19044.2130
Linux version 5.10.102.1-microsoft-standard-WSL2 (oe-user@oe-host) (x86_64-msft-linux-gcc (GCC) 9.3.0, GNU ld (GNU Binutils) 2.34.0.20200220) #1 SMP Wed Mar 2 00:30:59 UTC 2022
  • Browser name and version:
    • Microsoft Edge Version 106.0.1370.52
    • Google Chrome Version 106.0.5249.119

Description

We are serving our React app with Blueprint through a CloudFront distribution on AWS. I'm attempting to add security headers to our distributions, including a content-security-policy. These do not allow inline styling to execute. When testing a distribution that makes use of the Table or Table2 components, we see the following errors:

image

Line 38 in resizeSensor.ts is here: https://github.com/palantir/blueprint/blob/71240e006babfda1e80d2429c84692b04c0d473b/packages/table/src/interactions/resizeSensor.ts#L38

And the RESIZE_SENSOR_HTML definition here: https://github.com/palantir/blueprint/blob/71240e006babfda1e80d2429c84692b04c0d473b/packages/table/src/interactions/resizeSensor.ts#L88-L91

As you can see this method is attempting to apply some inline styling which is clashing with the content security policy. There's no way for me to allow this styling to go through the CSP unless I apply the unsafe-inline keyword, which will defeat the security purposes of the CSP. (I've attempted to allow the SHA hashes, but the errors persist.)

Steps to reproduce

  1. Host a client configured to add a content-security-policy on all response headers.
  2. Doesn't matter too much what the CSP contains, default-src 'self' should be sufficient to see the behavior.
  3. Add a Table or Table2 component to the client.
  4. Visit the client in browser.

Possible solution

The RESIZE_SENSOR_HTML method applies 4 instances of inline styling. This should be refactored so that these styles are no longer applied inline, so they won't be filtered by default from a typical CSP.

Contributor guide