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

Avoiding inline script tag in built index.html #288

Closed
ulf5 opened this issue Dec 24, 2021 · 6 comments · Fixed by #809
Closed

Avoiding inline script tag in built index.html #288

ulf5 opened this issue Dec 24, 2021 · 6 comments · Fixed by #809
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@ulf5
Copy link

ulf5 commented Dec 24, 2021

It would be great if it was possible to avoid having the

import init from '/index-....js';init('/index-..._bg.wasm');

part of the html in a separate file and load it as a module, similar to React's INLINE_RUNTIME_CHUNK=false

This is so allowing script-src 'unsafe-inline' can be avoided when setting Content Security Policy headers.
@dnaka91 dnaka91 added the enhancement New feature or request label Jan 12, 2022
@dnaka91
Copy link
Contributor

dnaka91 commented Jan 12, 2022

That's a good point. I gave this a try by just appending the init('....wasm'); call to the end of the index....js file and changing the HTML line to <script type="module" src="/index....js"></script>. That worked just fine, so I think we can implement it rather easy.

I think a good place for this setting would be the special HTML link:

<!DOCTYPE html>
<html lang="en">
  <head>
    <link data-trunk rel="rust" data-no-inline>
    <!--                        ^ new option here -->
  </head>
  <body>
  </body>
</html>

If that is set, we simply append the call to the wasm-bindgen output (it updates the wasm file and generates the JS bindings file) and change the import statement in the output HTML. What do you think @thedodd ?

@dnaka91 dnaka91 self-assigned this Jan 12, 2022
@oberien
Copy link
Contributor

oberien commented Feb 23, 2022 •
edited
Loading

Is the additional attribute required? I'd argue that putting import ... in its own file and including that file from index.html could just be the default behaviour.

@oberien oberien mentioned this issue Feb 24, 2022
Merged
@dnaka91 dnaka91 removed their assignment Oct 24, 2023
@github-actions GitHub Actions
Copy link

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

@github-actions github-actions bot added the Stale label Nov 24, 2023
@ssokolow
Copy link

Since I care a great deal about proper CSP headers, I'm going to poke this to ward off the bot. If it's been fixed, let a human actively close it.

@github-actions github-actions bot removed the Stale label Nov 25, 2023
@ctron ctron added the help wanted Extra attention is needed label Dec 13, 2023
@ctron
Copy link
Collaborator

ctron commented Dec 13, 2023

Since I care a great deal about proper CSP headers, I'm going to poke this to ward off the bot. If it's been fixed, let a human actively close it.

@ssokolow Honestly I am not sure what the state is. If you know more, maybe you could re-evaluate this. And of course: PRs welcome :)

@johan-smits johan-smits mentioned this issue Jun 5, 2024
Merged
@johan-smits
Copy link
Contributor

@ctron now that #8 is working the main reason for it to fail with 0.20.1 is that it generates a script without a nonce.

<script type="module">
import init, * as bindings from '/app-ui-ca21138b3c5c8d36.js';
const wasm = await init('/app-ui-ca21138b3c5c8d36_bg.wasm');
 
 
window.wasmBindings = bindings;
 
 
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));
 
</script>

Setting a nonce on this is the missing piece for the CSP to work.

In my server project I parse the html file and extract the nonce and integrity and provide these in the http header. But since it is missing I can't extract it.

I have created a PR for this #809

@ctron ctron closed this as completed in #809 Jun 5, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add a nonce to the script/style elements johan-smits/trunk
6 participants
@ssokolow @ctron @johan-smits @ulf5 @oberien @dnaka91