Built-in Flutter development web server serves Javascript files with wrong 'text/plain' MIME type if there is an etag match
- Dominant language
- Dart
- Stars
- 179k
- Forks
- 31.1k
- PR merge metrics
- PR metrics pending
Description
### Steps to reproduce
1. Create a Flutter web application using Flutter version 3.24+
2. In your `index.html` file, modify your `` section to have the following Flutter bootstrap code:
```html
{{flutter_js}}
{{flutter_build_config}}
_flutter.loader.load({
onEntrypointLoaded: async function (engineInitializer) {
const appRunner = await engineInitializer.initializeEngine();
await appRunner.runApp();
},
serviceWorkerSettings: {
serviceWorkerVersion: "12345678"
}
});
```
3. Debug your application on Chrome. I personally use VS Code to start a debug session.
4. Open Chrome Dev Tools (F12), click the Network pane, and refresh the page so that you can see network requests and responses.
5. You will see a request for `flutter_service_worker.js?v=12345678`. It is served up as `text/plain`, not `application/javascript`, as required. In a debug session, the Flutter service worker [is empty](https://github.com/flutter/flutter/blob/3297454732841b1a5a25d9f35f1fd5d7a4479e12/packages/flutter_tools/lib/src/isolated/devfs_web.dart#L1006). Nevertheless, having the wrong MIME type is dangerous, as browsers require that a javascript MIME type be used for `` tags and other things (note the Flutter bootstrap code may itself use a `<script>` tag if `timeOutMillis` has expired, which may happen on slow machines). This also means that, eg, a Firebase service worker (often named `firebase-messaging-sw.js` but highly customized by many developers and usually given an explicit version number in the query string), which is widely used, will always be served as `text/plain` and not `application/javascript`, causing errors.
6. Open a new tab and hit F12, switch to the Network pane. Assuming the web site is hosted on http://localhost:5555 (change port as appropriate), enter http://localhost:5555/flutter_service_worker.js : the correct MIME type is used in the response. Try http://localhost:5555/flutter_service_worker.js?v=12345678 again, to be sure : `text/plain` is used.
### Expected results
The Flutter web development server should serve `.js` resources with an `application/javascript` MIME type, even if a query string is present on the URL. This scenario is fairly common when using the very common `v=VERSION` pattern, not just for flutter_service_worker.js, but for all service workers, include Firebase's.
### Actual results
The Flutter web development server does not serve `.js` resources with an `application/javascript` MIME type when a query string is used. `text/plain` is used instead.
### Code sample
<details open><summary>Code sample</summary>
```dart
// See above for the repro steps
```
</details>
### Screenshots or Video
<details open>
<summary>Screenshots / Video demonstration</summary>
[Upload media here]
</details>
### Logs
<details open><summary>Logs</summary>
```console
[Paste your logs here]
```
</details>
### Flutter Doctor output
<details open><summary>Doctor output</summary>
```console
[!] Flutter (Channel [user-branch], 3.24.5, on Microsoft Windows [version 10.0.26100.2894], locale fr-FR)
! Flutter version 3.24.5 on channel [user-branch] at C:\Users\andy\Documents\flutter
Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
If that doesn't fix the issue, reinstall Flutter by following instructions at https://flutter.dev/setup.
! Upstream repository unknown source is not a standard remote.
Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
• Framework revision dec2ee5c1f (9 weeks ago), 2024-11-13 11:13:06 -0800
• Engine revision a18df97ca5
• Dart version 3.5.4
• DevTools version 2.37.3
• If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.
[√] Windows Version (Installed version of Windows is version 10 or higher)
[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at C:\Users\andy\AppData\Local\Android\sdk
• Platform android-34, build-tools 34.0.0
• Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
• All Android licenses accepted.
[√] Chrome - develop for the web
• Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe
[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.9.6)
• Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
• Visual Studio Community 2022 version 17.9.34728.123
• Windows 10 SDK version 10.0.19041.0
[√] Android Studio (version 2022.3)
• Android Studio at C:\Program Files\Android\Android Studio
• Flutter plugin can be installed from:
https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-10027231)
[√] VS Code (version 1.96.4)
• VS Code at C:\Users\andy\AppData\Local\Programs\Microsoft VS Code
• Flutter extension version 3.102.0
[√] Connected device (3 available)
• Windows (desktop) • windows • windows-x64 • Microsoft Windows [version 10.0.26100.2894]
• Chrome (web) • chrome • web-javascript • Google Chrome 131.0.6778.265
• Edge (web) • edge • web-javascript • Microsoft Edge 131.0.2903.146
[√] Network resources
• All expected network resources are available.
! Doctor found issues in 1 category.
```
</details>
Contributor guide
Assessment
This issue has not been assessed yet.