search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.97k stars 26.8k forks source link

[web][CanvasKit][skwasm] Cookie-based authentication for Network images not possible #150351

Open IchordeDionysos opened 1 week ago

IchordeDionysos commented 1 week ago

Steps to reproduce

  1. Download the example project: image_cookies.zip
  2. Generate a trusted SSL certificate for localhost
  3. Run the server
  4. Run the app

Expected results

The /authenticated_image request succeeds as it can validate the passed Cookies.

Actual results

The cookies are not sent as part of the /authenticated_image request, and thus, authenticating failed.

Code sample

Full runnable example: image_cookies.zip

Code sample `main.dart`: ```dart import 'package:dio/browser.dart'; import 'package:dio/dio.dart'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), useMaterial3: true, ), home: const MyHomePage(title: 'Flutter Web Cookie Authentication'), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({super.key, required this.title}); final String title; @override State createState() => _MyHomePageState(); } class _MyHomePageState extends State { bool _loaded = false; @override void initState() { super.initState(); _getAuthCookies(); } void _getAuthCookies() async { final dio = Dio(); var adapter = BrowserHttpClientAdapter(); adapter.withCredentials = true; dio.httpClientAdapter = adapter; await dio.getUri(Uri.parse('https://localhost:3000')); if (!mounted) return; setState(() { _loaded = true; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( backgroundColor: Theme.of(context).colorScheme.inversePrimary, title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ if (!_loaded) const Text( 'Loading', ), if (_loaded) Image.network('https://localhost:3000/authenticated_image') ], ), ), ); } } ``` `server.ts`: ```ts import express from 'express'; import cors from 'cors'; import * as fs from 'fs'; import cookieParser from "cookie-parser"; import * as https from 'node:https'; const key = fs.readFileSync('./cert/localhost/localhost.decrypted.key'); const cert = fs.readFileSync('./cert/localhost/localhost.crt'); const app = express(); app.use( cors({ origin: /http:\/\/localhost:\d{4,5}/, credentials: true, }) ); app.use(cookieParser()) app.get('/', (req, res) => { res.cookie('Auth-Cookie', "valid_request", { sameSite: 'none', maxAge: 1000 * 60 * 60, secure: true, }); res.send(''); }); app.get('/authenticated_image', (req, res) => { const authCookie = req.cookies['Auth-Cookie']; if (authCookie === 'valid_request') { fs.createReadStream('./src/favicon.png').pipe(res); } else { res.status(403).send('Unauthenticated'); } }); const server = https.createServer({key, cert}, app); const port = 3000; server.listen(port, () => { console.log(`Server is listening on https://localhost:${port}`); }); ```

Logs

No response

Flutter Doctor output

Doctor output ```console Doctor summary (to see all details, run flutter doctor -v): [!] Flutter (Channel [user-branch], 3.23.0-13.0.pre.243, on macOS 14.3 23D56 darwin-arm64, locale en-DE) ! Flutter version 3.23.0-13.0.pre.243 on channel [user-branch] at /Users/dennis/develop/bin/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/docs/get-started/install. ! Upstream repository https://github.com/simpleclub-extended/flutter.git is not a standard remote. Set environment variable "FLUTTER_GIT_URL" to https://github.com/simpleclub-extended/flutter.git to dismiss this error. [!] Android toolchain - develop for Android devices (Android SDK version 33.0.1) ✗ cmdline-tools component is missing Run `path/to/sdkmanager --install "cmdline-tools;latest"` See https://developer.android.com/studio/command-line for more details. ✗ Android license status unknown. Run `flutter doctor --android-licenses` to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/macos#android-setup for more details. [✓] Xcode - develop for iOS and macOS (Xcode 15.4) [✓] Chrome - develop for the web [✓] Android Studio (version 2023.2) [✓] IntelliJ IDEA Ultimate Edition (version 2024.1) [✓] VS Code (version 1.88.1) [✓] Connected device (3 available) [✓] Network resources ! Doctor found issues in 2 categories. ``` Note: I'm on a custom branch as I've experimented with a fix. At the time of testing, no changes were made to Flutter. :)
IchordeDionysos commented 1 week ago

We've experimented also with a potential solution and this change would fix the issue:

https://github.com/flutter/flutter/compare/flutter:flutter:master...simpleclub-extended:flutter:fix/image-cookies

Note: We have to be careful and consider potential security implications of such a change!

kevmoo commented 1 week ago

We should just take this PR – great idea!

huycozy commented 1 week ago

I also can see the issue when using a self-signed certification localhost (https://github.com/huycozy/local-server-self-signed-nodejs) with the given Flutter sample code above. Image is not displayed. On browser console, there is an error like this:

Failed to load resource: net::ERR_CERT_AUTHORITY_INVALID
flutter doctor -v (stable and master) ```bash [✓] Flutter (Channel stable, 3.22.2, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.22.2 on channel stable at /Users/huynq/Documents/GitHub/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 761747bfc5 (31 hours ago), 2024-06-05 22:15:13 +0200 • Engine revision edd8546116 • Dart version 3.4.3 • DevTools version 2.34.3 [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode15.3.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.3) • Android Studio at /Applications/Android Studio.app/Contents • 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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) [✓] VS Code (version 1.89.1) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.90.0 [✓] Connected device (3 available) • iPhone (mobile) • d9a94afe2b649fef56ba0bfeb052f0f2a7dae95e • ios • iOS 15.8 19H370 • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 125.0.6422.142 [✓] Network resources • All expected network resources are available. • No issues found! ``` ```bash [!] Flutter (Channel master, 3.23.0-13.0.pre.261, on macOS 14.1 23B74 darwin-x64, locale en-VN) • Flutter version 3.23.0-13.0.pre.261 on channel master at /Users/huynq/Documents/GitHub/flutter_master ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path. • Upstream repository https://github.com/flutter/flutter.git • Framework revision fb067b9948 (2 hours ago), 2024-06-17 21:41:41 -0400 • Engine revision 1c4e5e230e • Dart version 3.5.0 (build 3.5.0-271.0.dev) • DevTools version 2.36.0 • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades. [✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0) • Android SDK at /Users/huynq/Library/Android/sdk • Platform android-34, build-tools 34.0.0 • ANDROID_HOME = /Users/huynq/Library/Android/sdk • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) • All Android licenses accepted. [✓] Xcode - develop for iOS and macOS (Xcode 15.3) • Xcode at /Applications/Xcode15.3.app/Contents/Developer • Build 15E204a • CocoaPods version 1.15.2 [✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome [✓] Android Studio (version 2023.3) • Android Studio at /Applications/Android Studio.app/Contents • 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 • android-studio-dir = /Applications/Android Studio.app/ • Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160) [✓] VS Code (version 1.90.0) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.90.0 [✓] Connected device (2 available) • macOS (desktop) • macos • darwin-x64 • macOS 14.1 23B74 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 126.0.6478.61 [✓] Network resources • All expected network resources are available. ! Doctor found issues in 1 category. ```