Repository navigation
Add the ability to pass a CSP nonce to flutter.js that will be used when loading additional scripts #126977
Description
Strict CSPs require that any script tags that are created have a nonce attribute that specifies the same nonce included in the CSP header, to ensure all scripts that are loaded are trusted. Currently, Flutter is only compatible with the weaker strict-dynamic mode.
Flutter loads many scripts dynamically, e.g. flutter.js loads main.dart.js, and main.dart.js loads additional parts. And the engine loads canvaskit etc. It'd be great if the developer could pass flutter.js a nonce, and then Flutter could use that when loading all additional scripts. E.g.
_flutter.loader.loadEntrypoint({
entrypointUrl: 'my_app/main.dart.js',
nonce: my_nonce,
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
It's worth considering if Flutter can automatically find the right nonce to use somehow e.g. there are approaches internally that copy the nonce from other script tags in the DOM. Overall, though, I think adding it as an explicit parameter passed by the app developer seems less likely to cause breakages and confusion.
This is not blocking anyone at the moment, but it likely will eventually when an app that is already using a strict CSP wants to integrate Flutter without accepting a security regression.
See internal bug b/274360267 for more details.
Activity
ditman commentedon Jun 1, 2023
This could be a potential fix for a big part of: #80221
[web] Add nonce configuration. (#42829)
ditman commentedon Jun 30, 2023
This should be available soon in
master![web] Add nonce configuration. (flutter-team-archive#42829)
github-actions commentedon Jul 14, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.jacobsimionato commentedon Oct 12, 2023
David, I tried this out, but I got an error where main.dart.js could not be loaded because there is no nonce on that script tag.
I think perhaps we need to move the nonce parameter to loadEntrypoint rather than initializeEngine because we need it before main.dart is even loaded. See internal change cl/572795063 as an example. This worked for me locally. I'd send a PR, but I'm not sure if there are other places that rely on the current behavior, or if maybe I'm missing something?
ditman commentedon Oct 12, 2023
@jacobsimionato what's the CSP configuration that we want to support? Currently, it's this:
Do we want to remove
'self'fromscript-src?jacobsimionato commentedon Oct 13, 2023
Yeah I think so! I'm struggling to figure out what the implications of that are though. I thought nonces were required for every script tag, regardless of whether 'self' is present here?
This is the content security policy for the app that is failing:
I get the error:
ditman commentedon Oct 20, 2023
This is a good proposal, I think I can add a
noncetoloadEntrypointthat then gets forwarded automagically toinitializeEngine. I think the change should only affectflutter.js, actually!jacobsimionato commentedon Oct 20, 2023
That sounds ideal! Thank you :-D
ditman commentedon Oct 25, 2023
I spoke too soon, and the code to achieve this is a big mess. For now, the nonce will need to be set in 2 places :/
[web] Add 'nonce' prop to flutter.js loadEntrypoint (#137204)
github-actions commentedon Nov 10, 2023
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of
flutter doctor -vand a minimal reproduction of the issue.[web] Add nonce configuration. (flutter-team-archive/engine#42829)