sveltejs / sveltejs/kit

Add an option for inline scripts in html to be externalised

Open
#1,776 5 comments 20 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

I am trying to reuse a number of my svelte components in a Chrome extension that replaces the newtab page.

I am using a site generated with adapter-static, and the client side router disabled, but i still need javascript enabled for the likes of a search bar.

On a default build of a test page the Javascript does not work, and I see the following error in the extension console:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-mCb4RZPtIMMHYC2/zT6SdIhwTomYnh+ky3BLobKXNn0='), or a nonce ('nonce-...') is required to enable inline execution.

index.html:20 (anonymous function)

<script type="module">

Chrome is pushing the move to manifest v3, which has increased content security policies, one of which is to disallow the use of unsafe, hash, or nonce based exceptions in the content_security_policy.extension_pages (regardless of what the above error states, using any of those causes the extension to fail to be installed).

If however, I manually move the contents of that inline script into a file called init.js, and change the script to reference it:

<script type="module" src="/./app/init.js"></script>

then my extension works as expected.

The inline script appears to be hardcoded in render.js:

https://github.com/sveltejs/kit/blob/9a2cc0afd3433134045dec0550172ef194fc23d4/packages/kit/src/runtime/server/page/render.js#L116-L144

Ideally, there'd be a manifest v3 friendly way of running the inline script (which I have failed to find, but maybe someone else has worked around).

Failing that I'm asking for the option for the init code to be referenced in an external script, e.g.

<script context="module">
	export const inline = false;
</script>

thanks.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in packages/kit/src/runtime/server/page/render.js at the inline script referenced by the issue. Trace how that script is generated for adapter-static pages and determine where an external-script option could be configured. Done means the generated HTML can reference an external initialization script instead of embedding it, while preserving the existing behavior by default.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.