3

I am getting an error with Flutter Webview (webview_flutter: ^0.1.2) when loading a Youtube Video, (though I initially thought its related to content security issue,) it seems to be an issue with secure origin on HTTPS. On browser this is usually mitigated by moving to HTTPS domain, looking for a way to solve this on Mobile 

             Container(
                child: WebView(
                         initialUrl: Uri.dataFromString(
                          '<html>'
                            '<meta http-equiv="Content-Security-Policy" content="default-src * gap:; script-src * \'unsafe-inline\' \'unsafe-eval\'; connect-src *; img-src * data: blob: android-webview-video-poster:; style-src * \'unsafe-inline\';">'
//                            '<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">'
                            '<body><iframe src="https://www.youtube.com/embed/vlkNcHDFnGA"></iframe></body>'
                          '</html>', mimeType: 'text/html').toString(),
                      javascriptMode: JavascriptMode.unrestricted,                )),

I see the following in console: https://www.youtube.com/embed/vlkNcHDFnGA%22%3E%3C/iframe%3E%3C/body%3E%3C/html%3E (1)

The deviceorientation event is deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.

skjagini
  • 3,142
  • 5
  • 34
  • 63
  • The error message cited in the question isn’t a CSP error message and doesn’t have anything to do with CSP. Instead it appears to indicate that the browser engine sees your content itself (rather than just any particular external resources your content might be embedding, which is what CSP is about) as being served from an insecure origin — e.g., an http origin instead of an https origin. – sideshowbarker Feb 01 '19 at 03:27
  • Thats true, I had the same issue on browser, and we fixed it by moving our domain to https, how do we do this on Mobile – skjagini Feb 01 '19 at 03:29
  • From what I understand the WebView context is the page that is loaded in the webview, if that page is secure then the context will also be secure. You seem to have inline HTML there so that will probably not be secure. Maybe a webview to embed an iframe is not the best idea, maybe just directly viewing the iframe source would work better. Not really sure about this though. – apokryfos Feb 01 '19 at 09:54
  • I am using the same, any idea how to solve this issue ? – Jyo Oct 06 '20 at 08:27

1 Answers1

1

You can try my plugin flutter_inappwebview, which is a Flutter plugin that allows you to add inline WebViews or open an in-app browser window and has a lot of events, methods, and options to control WebViews.

To load an <iframe> in a WebView, you can load directly an HTML source using the initialData parameter of the InAppWebView widget or load an HTML file from the assets folder (see more here) using the initialFile parameter.

Full example using the initialData parameter and your youtube link:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:flutter_inappwebview/flutter_inappwebview.dart';

Future main() async {
  runApp(new MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: InAppWebViewPage()
    );
  }
}

class InAppWebViewPage extends StatefulWidget {
  @override
  _InAppWebViewPageState createState() => new _InAppWebViewPageState();
}

class _InAppWebViewPageState extends State<InAppWebViewPage> {
  InAppWebViewController webView;
  String iframeUrl = "https://www.youtube.com/embed/vlkNcHDFnGA";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            title: Text("InAppWebView")
        ),
        body: Container(
            child: Column(children: <Widget>[
              Expanded(
                child: Container(
                  child: InAppWebView(
                    initialData: InAppWebViewInitialData(
                        data: """
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Flutter InAppWebView</title>
    </head>
    <body>
        <iframe src="$iframeUrl" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
    </body>
</html>"""
                    ),
                    initialHeaders: {},
                    initialOptions: InAppWebViewWidgetOptions(
                      inAppWebViewOptions: InAppWebViewOptions(
                        debuggingEnabled: true,
                      ),
                    ),
                    onWebViewCreated: (InAppWebViewController controller) {
                      webView = controller;
                    },
                    onLoadStart: (InAppWebViewController controller, String url) {

                    },
                    onLoadStop: (InAppWebViewController controller, String url) {

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}
Lorenzo Pichilli
  • 2,896
  • 1
  • 27
  • 50