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.

Sign up for GitHub

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

Fix theme inline script #610

Merged
merged 2 commits into from
Mar 12, 2023
Merged

Fix theme inline script #610

merged 2 commits into from
Mar 12, 2023

Conversation

RyanZhiNie
Copy link
Contributor

📑 Description

There is a scenario when users take CSP (Content Security Policy) into consideration and 'unsafe-inline' is usually not included in 'default-src' and 'script-src' for safety. For example, they configure CSP in svelte.config.js:

const config = {
	kit: {
		csp: {
			mode: 'auto',
			directives: {
				'default-src': ['self'],
				'script-src': ['self'],
				'style-src': ['self', 'unsafe-inline'],
			}
		}
	}
};

Then an error will appear in the console because the <DarkMode> component directly insert the inline script in the <head>:

image

image

We can move the script into the onMount code block and frameworks like SvelteKit will automatically add a hash or a nonce onto the script.

✅ Checks

  • My pull request adheres to the code style of this project
  • My code requires changes to the documentation
  • I have updated the documentation as required
  • I have checked the page with https://validator.unl.edu/
  • All the tests have passed
  • My pull request is based on the latest commit (not the npm version).

@stackblitz
Copy link

stackblitz bot commented Mar 11, 2023

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@vercel
Copy link

vercel bot commented Mar 11, 2023 •
edited

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated
flowbite-svelte ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 11, 2023 at 7:08AM (UTC)
flowbite-svelte-update ✅ Ready (Inspect) Visit Preview 💬 Add your feedback Mar 11, 2023 at 7:08AM (UTC)

@shinokada shinokada merged commit 7ac48ba into themesberg:main Mar 12, 2023
@RyanZhiNie RyanZhiNie deleted the fix-theme-inline-script branch May 14, 2023 13:20
@LorenzoBloedow
Copy link

What happened to this? Currently using 0.42.0 and it seems like it's been reverted.
I think I got a less "hacky" solution if you guys want I can open a PR.

@shinokada
Copy link
Collaborator

Flowbite-Svelte is a UI library and I think each users are responsible for the configuration.
https://kit.svelte.dev/docs/configuration

@LorenzoBloedow
Copy link

Flowbite-Svelte is a UI library and I think each users are responsible for the configuration. https://kit.svelte.dev/docs/configuration

I get it but that's basically asking SvelteKit users to forfeit security for dark mode.
I'm currently using my own solution since I'm not going to downgrade security for a convenience
but I think it'd be at least nice to write a warning in the docs for SvelteKit + strict CSP users.

Again, I understand implementing a solution for a meta-framework may be out of scope for a UI library, but a warning would be nice :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
3 participants
@RyanZhiNie @LorenzoBloedow @shinokada