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

Jump to bottom

Empty <style> block appended to <head> when transition is used. #4801

Closed
whataboutpereira opened this issue May 8, 2020 · 5 comments
Closed

Empty <style> block appended to <head> when transition is used. #4801

whataboutpereira opened this issue May 8, 2020 · 5 comments
Labels
awaiting submitter needs a reproduction, or clarification stale-bot

Comments

@whataboutpereira
Copy link

I just started exploring Svelte transitions I noticed sudden CSP failures in Firefox and Chrome.

I've tracked it down to Svelte appending an empty <style>element to when transitions are used.

Transition is used in a component like this:

<script>
    import { fade } from "svelte/transition";
</script>

<div transition:fade>
    <!-- content -->
</div>

Results in the following:

index.mjs:481 [Report Only] Refused to apply inline style because it violates the following Content Security Policy directive: "style-src 'self'. Either the 'unsafe-inline' keyword, a hash ('sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU='), or a nonce ('nonce-...') is required to enable inline execution.

I managed to suppress the warning by adding the suggested hash for the empty <style> tag to my CSP policy, but creating an empty <style> seems redundant.
@Conduitry
Copy link
Member

Is this an issue about empty elements blocks being added, or about style blocks being added dynamically at all? Svelte needs to be able add some styles dynamically to handle transitions at all. If this is a problem for your case, you can't use Svelte transitions that are turned into CSS transitions, and will probably need to use js transitions, which are generally less preferable because they run in the same thread as the rest of your js.

@whataboutpereira
Copy link
Author

So far, in my case, it's the empty style block. But I suspect a block with content is indeed more hard to make pass CSP unless a nonce can be used somehow (like the main Sapper script tag does).

@whataboutpereira
Copy link
Author

I'm wondering if it would be possible for Sapper/Svelte to add an empty style block with a nonce upon page generation and then using that to load the styles?

@Conduitry Conduitry added awaiting submitter needs a reproduction, or clarification question labels May 8, 2020
@stale
Copy link

stale bot commented Dec 24, 2021

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

@stale stale bot added the stale-bot label Dec 24, 2021
@Prinzhorn Prinzhorn mentioned this issue Feb 12, 2022
Closed
This was referenced Feb 13, 2022
Closed
Closed
@daylilyfield daylilyfield mentioned this issue Apr 3, 2022
Closed
@tanhauhau tanhauhau mentioned this issue Jul 6, 2022
Merged
5 tasks
@endigo9740 endigo9740 mentioned this issue Aug 18, 2022
Closed
@Conduitry
Copy link
Member

This should be fixed in 3.50.0.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
awaiting submitter needs a reproduction, or clarification stale-bot
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@mindrones @pngwn @Conduitry @whataboutpereira