[fix] Enable built-in transitions without 'style-src: unsafe-inline' CSP directive. #6662 #1
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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 withoutstyle-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
[feat]
,[fix]
,[chore]
, or[docs]
.Tests
npm test
and lint the project withnpm 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 theheadless_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 aStyleSheet
class as a singleparameter) are not present (including
title
andownerNode
)).