Flutter Web打开URL并获取返回数据的实现问题咨询

现有代码无法获取目标页数据是浏览器同源策略强制安全限制导致的：

• url_launcher 定位仅为URL跳转唤起工具，本身不具备读取目标页面内容的能力，只能返回跳转是否成功的布尔值
• 通过html.window.open打开跨域目标页时（目标地址与当前Flutter Web应用的协议、域名、端口任意一项不一致），返回的窗口对象的所有属性访问都会被浏览器拦截，前端无权读取非同源页面的任何内容，这是浏览器层面的通用安全规则，不存在前端侧的绕过方案。

场景1：目标页面属于你可控的自有业务域名 #

这种场景可以通过window.postMessage实现跨窗口安全通信，拿到目标页处理完成后回传的数据：

• Flutter Web侧提前注册消息监听，等待目标页回传数据
• 打开目标页后，目标页完成自身业务逻辑时，主动向打开它的父窗口（Flutter Web页）推送需要回传的数据
• Flutter侧校验消息来源合法后，读取对应数据即可

Flutter侧实现代码示例：

import 'dart:html' as html;
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: DataFetchPage()));
}

class DataFetchPage extends StatefulWidget {
  const DataFetchPage({super.key});

  @override
  State<DataFetchPage> createState() => _DataFetchPageState();
}

class _DataFetchPageState extends State<DataFetchPage> {
  String? _targetPageData;

  @override
  void initState() {
    super.initState();
    // 注册跨窗口消息监听
    html.window.addEventListener('message', (event) {
      final msgEvent = event as html.MessageEvent;
      // 必须校验消息来源，防止恶意站点推送伪造消息
      if (msgEvent.origin == 'https://your-own-domain.com') {
        setState(() {
          _targetPageData = msgEvent.data.toString();
        });
      }
    });
  }

  void _openTargetPage() {
    html.window.open("https://your-own-domain.com/target", "_blank");
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: _openTargetPage,
              child: const Text('打开目标页获取数据'),
            ),
            const SizedBox(height: 24),
            Text('接收到的目标页数据：${_targetPageData ?? '暂无数据'}'),
          ],
        ),
      ),
    );
  }
}

目标页面侧（你可控的页面）添加对应JS逻辑，处理完成后回传数据：

// 目标页业务逻辑处理完成后执行
function sendDataToOpener() {
  const bizResult = {
    status: 'success',
    payload: '你需要回传的业务数据'
  };
  // 第二个参数填写你的Flutter Web部署域名，禁止用*避免安全风险
  window.opener?.postMessage(bizResult, "https://your-flutter-web-domain.com");
}

场景2：目标页面是第三方公网页面，你无权修改页面代码 #

这种场景下前端没有任何直接读取目标页内容的可能，必须通过后端代理实现：

• 不要在前端直接打开新窗口等待数据，将需要访问的目标地址、需要执行的页面操作参数传给你自己的后端服务
• 由后端服务发起请求获取页面内容：如果只是拿静态页面/接口数据，直接发HTTP请求解析即可；如果需要模拟用户交互（登录、点击、表单提交等操作后才能拿到最终数据），后端可以集成无头浏览器工具模拟完整用户操作流程，拿到最终处理完成的数据
• 后端将解析好的结构化数据返回给Flutter Web前端即可

• 不要尝试通过前端脚本hack跨域读取第三方页面内容，所有这类操作都会被浏览器的安全策略拦截，没有可行的稳定方案
• 使用postMessage通信时必须严格校验消息来源origin，禁止信任任意来源的消息，避免引发XSS安全漏洞
• 如果不需要渲染目标页面、只是要获取目标地址的返回数据，直接走后端代理请求即可，不需要打开新窗口

内容的提问来源于stack exchange，提问作者blob