Flutter Web嵌入ConvertKit表单遇X-Frame-Options限制问题求助

问题根源 #

你遇到的X-Frame-Options: sameorigin错误是ConvertKit的安全策略导致的——他们明确禁止第三方网站通过iframe嵌入其页面，所以无论怎么调整iframe路径都无法绕过这个限制。

解决思路：使用ConvertKit官方JS嵌入方案 #

ConvertKit本身提供了官方的JavaScript嵌入代码，这是推荐的嵌入方式，它会直接在你的页面中渲染表单元素，而非嵌入整个外部页面，因此不会触发X-Frame-Options限制。

步骤1：获取ConvertKit官方嵌入代码 #

1. 登录你的ConvertKit后台，找到目标表单
2. 进入表单的「嵌入」设置页面
3. 选择「JavaScript嵌入」选项，复制对应的代码（通常包含一个script标签和初始化调用）

步骤2：在Flutter Web中实现嵌入 #

有两种简便的实现方式：

方式一：通过web/index.html注入（推荐）

1. 打开项目根目录下的web/index.html文件
2. 在<body>标签末尾添加以下代码（替换成你复制的ConvertKit代码）：

<div id="convertkit-form-container"></div>
<script async src="https://js.convertkit.com/forms/[你的表单ID].js"></script>
<script>
  _ck('form', '[你的表单ID]', 'convertkit-form-container');
</script>

3. 在Flutter组件中通过HtmlElementView渲染这个容器：

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

class ConvertKitForm extends StatelessWidget {
  const ConvertKitForm({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // 注册视图工厂，关联页面中的div容器
    ui.platformViewRegistry.registerViewFactory(
      'convertkit-form',
      (int viewId) => html.document.getElementById('convertkit-form-container')!,
    );

    return SizedBox(
      width: 800,
      height: 600,
      child: HtmlElementView(viewType: 'convertkit-form'),
    );
  }
}

方式二：在Flutter组件中动态注入JS

如果需要更灵活的控制（比如按需加载表单），可以在Flutter组件中动态注入JS：

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

class DynamicConvertKitForm extends StatelessWidget {
  final String formId;
  const DynamicConvertKitForm({Key? key, required this.formId}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final containerId = 'dynamic-convertkit-form-$formId';

    // 注册容器视图
    ui.platformViewRegistry.registerViewFactory(
      containerId,
      (int viewId) => html.DivElement()..id = containerId,
    );

    // 页面渲染完成后注入JS
    WidgetsBinding.instance.addPostFrameCallback((_) {
      // 避免重复注入
      if (html.document.querySelector('script[src*="$formId"]') != null) return;

      final script = html.ScriptElement()
        ..src = 'https://js.convertkit.com/forms/$formId.js'
        ..async = true;

      html.document.body?.append(script);

      // 调用ConvertKit初始化方法
      js.context.callMethod('_ck', ['form', formId, containerId]);
    });

    return SizedBox(
      width: 800,
      height: 600,
      child: HtmlElementView(viewType: containerId),
    );
  }
}

// 使用示例
// DynamicConvertKitForm(formId: '你的表单ID')

注意事项 #

• 必须使用ConvertKit官方提供的JS嵌入代码，不要尝试自定义iframe或其他绕过方式，这会违反对方的安全政策，且无法正常工作
• 如果遇到404错误，检查你复制的JS链接是否正确，表单ID是否无误

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