callstack / callstack/linaria

Verify Content Security Policy Compliance

Open
#298 0 comments 5 reactions 0 assignees View on GitHub
needs: investigation 🔎
Dominant language
TypeScript
Stars
12.4k
Forks
413
PR merge metrics
No merged PRs in 30d

Description

Linaria loads CSS from external files. This is a great thing for CSP compatibility with `style-src self`, although dynamic CSS with CSS variables has the potential to cause issues where it might require `unsafe-inline`. This should be avoided at all costs, because you would lose all the protection that could be possible.

I can image Linaria works one of two ways:
If elements are inserted with ``, it requires `unsafe-inline`
If elements are inserted with `` and variables are applied with `element.style.setProperty('--var', 'value');` (or similar), then it will **not** require `unsafe-inline`

If the former is true, then variables might need a default value that is set in the external stylesheet, to be replaced as soon as the element is inserted. If the person can't feasibly set a default value they should be forced to set an explicit `default: null` so most people can benefit from the CSP protections.

I'm not sure how Linaria works and I'm a little too busy to look into it, but I thought I'd make the issue so hopefully someone can look into it before the stable release.

Contributor guide

Open the contributing guide

Research direction

No files or tests are named. Start by tracing how Linaria applies dynamic CSS variables, then verify whether it uses inline style attributes or setProperty-style updates under a CSP with style-src self. Done means the CSP behavior is established and any required compatibility change is identified and covered by verification.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, react, typescript
Domain
frontend, security
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.