flutter / flutter/flutter

Built-in Flutter development web server serves Javascript files with wrong 'text/plain' MIME type if there is an etag match

Open
#161,808 6 comments 0 reactions 0 assignees View on GitHub
found in release: 3.27 found in release: 3.28 has reproducible steps P2 platform-web team-web tool triaged-web
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.