formio.js Unable to render Formio components on flutter app[BUG]

Environment

I am trying to load a sample form on flutter app through webview(webview_flutter: ^3.0.3). I have used sample code from https://formio.github.io/formio.js/ still I am not able to render the components. I tried to execute the same code on browser, and it loads the form. But when tried on flutter's webview it shows below error. Uncaught (in promise) SecurityError: Failed to read the 'cookie' property from 'Document': Cookies are disabled inside 'data:' URLs.", source: https://cdn.form.io/formiojs/formio.form.min.js

Hosting type
- [ ] Form.io
- [ ] Local deployment
  - Version: Android 9 to Android 12
Formio.js version: 4.14.3
Frontend framework: VS Code

Expected behavior

Forms should be render on each and every webview.


late WebViewController _webViewController;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Webview Demo')),
      body: WebView(
        initialUrl: 'about:blank',
        javascriptMode: JavascriptMode.unrestricted,

        onWebViewCreated: (WebViewController webViewController) async {
          _webViewController = webViewController;
          await loadHtmlFromAssets(
              'assets/html/exmpleform.html', _webViewController);
        },
      ),
    );
  }

  Future<void> loadHtmlFromAssets(String filename, controller) async {
    String fileText = await rootBundle.loadString(filename);
    print(fileText);
    controller.loadUrl(Uri.dataFromString(fileText,
            mimeType: 'text/html', encoding: Encoding.getByName('utf-8'))
        .toString());
  }

Sep 27 '22 05:09 Krios8899

+1

Jan 24 '23 08:01 TechInjectIndia

Is there any new solution?

Feb 27 '23 14:02 Azmaa22

The same problem i faced it in android app with these versions: webview_flutter: ^4.0.5 flutter version: 3.7.5 Is there any solution other than webview ??

Flutter Code:
HTML String:

Mar 01 '23 12:03 Azmaa22

Because the library uses cookies for things like tokens, etc., you have to make sure that if you're rendering a form in a sandboxed environment (e.g. iframes, browser extensions, webviews, etc.), that you set the security settings to allow for that. For webviews in Flutter, check out this stackoverflow answer

Mar 01 '23 14:03 brendanbond

You can try with: flutter_inappwebview

set localhost is the key!

InAppWebView(
      key: webViewKey,
      initialData: InAppWebViewInitialData(data: """
      <html>
<head>
    <link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css'>
    <link rel='stylesheet' href='https://cdn.form.io/formiojs/formio.full.min.css'>
    <script src='https://cdn.form.io/formiojs/formio.full.min.js'></script>
    <script type='text/javascript'>
      window.onload = function() {
        Formio.createForm(document.getElementById('formio'), 'https://form.mcttechnology.cn/shtest-prod/0-cc4-pdfformtestbyuki-es');
      };
    </script>
</head>
<body>
<div id='formio'></div>
</body>
</html>
      """, baseUrl: WebUri('http://localhost'))

May 14 '24 07:05 norman93sun

Thank you for your contribution. As this issue has been inactive for over 90 days, I will close it for now. If you'd like to reopen the issue, please reply and we can resume the triage process.

Sep 04 '24 13:09 olgabann

Please contribute this repo https://github.com/mskayali/formio_flutter. Its partially supports the formIO

Jun 20 '25 22:06 mskayali