Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[fix] Enable built-in transitions without 'style-src: unsafe-inline' CSP directive. #6662 #1

Merged
merged 10 commits into from
Sep 27, 2021

Conversation

DrCBeatz
Copy link
Owner

Currently, Svelte's built-in transitions do not work when using a strict Content Security Policy (CSP)
unless the style-src 'unsafe-inline' directive is present, which is a security vulnerability in production. This happens because Svelte appends an empty CSS stylesheet to the DOM at the start of the 1st transition. This is in effect inline css, which a strict CSP won't allow without style-src 'unsafe-inline'.

A simple solution is to add a blank external stylesheet (e.g. in the same location as 'global.css') to be used for the starting transition. This PR checks for presence of an external CSS stylesheet with the title 'svelte-stylesheet' and which contains no CSS rules (i.e. a blank stylesheet). If the 'svelte-stylesheet' is not present, everything works the same as before (this also means that transitions will not work under a strict CSP without style-src 'unsafe-inline').

To implement, add the following to the Svelte project's 'index.html' file: <link rel="stylesheet" title="svelte-stylesheet" href="svelte-stylesheet.css">. Then add the blank css file specified in the href attribute (the name of the file is not important, as long as the origin is permitted in the CSP, e.g. in the same folder/location as 'global.css').

Fixes #6662.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • Prefix your PR title with [feat], [fix], [chore], or [docs].
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

**Test plan: (completed - e2e test) make Svelte test project featuring the 7 built-in transitions (fade, blur, fly, slide, scale, draw, and crossfade) and demonstrate they will work under a strict CSP with the changes in this PR and fail with the current version, using Mocha and Puppeteer. To run these tests run the following command in terminal npm run test -- -g svelte-styles-csp. To see the transitions in Chromium, set the headless_browser constant to true in 'tests/svelte-styles-csp/index.ts'.

(note I attempted to write a unit test for the function get_svelte_style_sheet_index() using Mocha and JSDom.
After much trial and error, I discovered that JSDom does not fully implement the CSS Object Model, so certain
properties of the CSSStyleSheet class needed to test this function (which uses a StyleSheet class as a single
parameter) are not present (including title and ownerNode)).

@DrCBeatz DrCBeatz merged commit a23aaab into DrCBeatz:svelte-styles-csp Sep 27, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants