Flutter:Web视图安全来源

本文介绍了Flutter:Web视图安全来源的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在加载Youtube视频时，我遇到了Flutter Webview错误(webview_flutter:^ 0.1.2)(尽管我最初认为这与内容安全性问题有关)，这似乎是HTTPS来源安全的问题.在浏览器上，通常可以通过移至HTTPS域来缓解这种情况，寻找在移动设备上解决此问题的方法

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,                )),

我在控制台中看到以下内容: https://www.youtube.com/embed/vlkNcHDFnGA%22%3E%3C/iframe%3E%3C/body%3E%3C/html%3E (1)

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

推荐答案

您可以尝试我的插件 flutter_inappwebview ，这是Flutter插件，可让您添加内联WebView或打开应用程序内浏览器窗口，并且具有许多控制WebView的事件，方法和选项.

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.

要在WebView中加载<iframe>，可以使用InAppWebView小部件的initialData参数直接加载HTML源，或从资产文件夹中加载HTML文件(请参阅initialFile参数//://github.com/pichillilorenzo/flutter_inappwebview#load-a-file-inside-assets-folder"rel =" nofollow noreferrer>此处).

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.

使用initialData参数和您的youtube链接的完整示例:

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) {

                    },
                  ),
                ),
              ),
            ]))
    );
  }
}

这篇关于Flutter:Web视图安全来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！