[BUG] The component does not display the content in the web version

[barns05]

Hi, Quill_html_editor has stopped working for the Web on Chrome for a few days now (even longer on Firefox). In the console, I'm getting the message: "An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."

So it's the browser preventing the content from being displayed for security reasons.

In the HTML code, we do have these two instructions in the sandbox. <iframe id="id__iframe_69bb6453_3fbe_4f28_a477_74e96334e8f0" name="name__iframe_69bb6453_3fbe_4f28_a477_74e96334e8f0" width="604" height="500" allowfullscreen="" sandbox="allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-popups-to-escape-sandbox allow-presentation allow-same-origin allow-scripts"

To Reproduce, just add quill_html_editor and run for the web.

Today, I'm just passing HTML from an object's property :

Widget buildNonAdminView(
      PageModel currentPage, QuillEditorController controller) {
    return Scaffold(
      appBar: MyAppBar.loginAppBar(context),
      body: Column(
        children: [
          Expanded(
            child: QuillHtmlEditor(
              text: currentPage.pageContent,
              controller: controller,
              isEnabled: false,
              ensureVisible: false,
              minHeight: 500,
              autoFocus: false,
              textStyle: const TextStyle(fontSize: 16, color: Colors.black),
              hintTextAlign: TextAlign.start,
              padding: const EdgeInsets.only(left: 10, top: 10),
              hintTextPadding: const EdgeInsets.only(left: 20),
              backgroundColor: Colors.white,
              inputAction: InputAction.newline,
              onEditingComplete: (s) => debugPrint('Editing completed $s'),
              loadingBuilder: (context) {
                return const Center(
                  child: CircularProgressIndicator(
                    strokeWidth: 1,
                    color: Colors.red,
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

Flutter Doctor [√] Flutter (Channel stable, 3.19.5, on Microsoft Windows [version 10.0.22631.3447], locale fr-FR) • Flutter version 3.19.5 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 300451adae (3 weeks ago), 2024-03-27 21:54:07 -0500 • Engine revision e76c956498 • Dart version 3.3.3 • DevTools version 2.31.1

[√] 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\temp\AppData\Local\Android\sdk X cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest" See https://developer.android.com/studio/command-line for more details. X Android license status unknown. Run flutter doctor --android-licenses to accept the SDK licenses. See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

[√] 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.0) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community • Visual Studio Community 2022 version 17.9.34607.119 X Visual Studio is missing necessary components. Please re-run the Visual Studio installer for the "Desktop development with C++" workload, and include these components: MSVC v142 - VS 2019 C++ x64/x86 build tools

• If there are multiple build tool versions available, install the latest C++ CMake tools for Windows Windows 10 SDK

[√] Android Studio (version 2023.1) • 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.7+0-b2043.56-10550314)

[√] VS Code (version 1.88.1) • VS Code at C:\Users\temp\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.86.0

[√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [version 10.0.22631.3447] • Chrome (web) • chrome • web-javascript • Google Chrome 123.0.6312.123 • Edge (web) • edge • web-javascript • Microsoft Edge 123.0.2420.97

[√] Network resources • All expected network resources are available.

Thanks a lot for your help !

Frédéric

[barns05]

Hello, I modified the component to remove the 'allow-script' tag first, then 'allow-same-origin', but the browser presents other issues:

• Without scripts, obviously it doesn't work.
• Without 'allow-origin': iframe blocking. Therefore, I don't have a solution at this time. Thank you for your help.

[MuhammadEbraheem]

the same is happening to me with a normal html content

Hello

[barns05]

Is there anyone to help us? Thanks !

[eduardotd]

I downgraded flutter to 3.16.9 and it returned to work flutter downgrade 3.16.9

Thanks in advance if someone could find a better solution...

[barns05]

Hi Eduardotd, It works well on version 3.16.9. Thank you for your help, I hope this issue will be fixed soon! Fred

[barns05]

Hi eduardotd, Do you know if the issue has been resolved on the Flutter side? Or are you still using an older version? Thanks in advance, Frederic

[barns05]

Hello ! Has the issue been acknowledged? Is a solution being considered? Thanks in advance, Frederic

[johann-schnagl]

Same problem with flutter 3.24.3