Flutter:Web视图安全来源 [英] Flutter: Web View Secure Origin
问题描述
在加载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)
在不安全的来源上不推荐使用deviceorientation事件，并且 支持将在将来删除.你应该考虑切换 您的应用程序使用安全来源(例如HTTPS).看 https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins 有关更多详细信息.
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.
推荐答案
您可以尝试我的插件 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文件(请参阅
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视图安全来源的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
