Flutter项目webview加载没有HTTPS证书的网页在Android和iOS设备上无法显示的解决方案

一、问题描述

Flutter项目使用谷歌官方webview库 webview_flutter,加载自签名证书、证书失效、无证书等HTTPS网页地址时,在Android或pc浏览器中提示证书失效,在iOS设备上为空白页,为了加载自签名证书的网页,需要饶过iOS上的webview控件HTTPS证书校验。

二、环境

Android Studio版本:2022.1.1 Patch 2

Flutter版本:3.7.12

Dart SDK版本:2.19.6 

依赖库 webview_flutter 版本:4.2.0

Xcode版本:14.3

三、Flutter中解决iOS设备上HTTPS证书校验方案

1、添加webview_flutter版本库依赖

在pubspec.yaml文件中,找到dev_dependencies,然后换行添加依赖库,添加完运行命令【flutter pub get】,下载该库。

dev_dependencies:

  webview_flutter: ^4.2.0

下载完成后在项目结构External Libraries下,可以看到webview_flutter一共下载了三个项目,分别是webview_flutter-4.2.0、webview_flutter_android-3.7.0、webview_flutter_wkwebview-3.4.3,其中webview_flutter_wkwebview-3.4.3为iOS设备上的一个webview组件,后面所要修改源码的也就是这个工程。

2、修改源码

在Flutter工程目录结构中找到 External Libraries,依次展开Flutter Plugins——>webview_flutter_wkwebview-3.4.3——>ios.Classes

然后在ios.Classes目录下,找到FWFNavigationDelegateHostApi.m文件,打开该文件,在 @implementation FWFNavigationDelegate 代码以后换行添加以下方法:

@implementation FWFNavigationDelegate

//复制添加这个方法
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential * _Nullable))completionHandler{
    
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        SecTrustRef serverTrust = challenge.protectionSpace.serverTrust;
        // 在这里进行自定义的身份验证逻辑
        NSURLCredential *credential = [NSURLCredential credentialForTrust:serverTrust];
        completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    } else {
        completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }

    
}

然后保存,再次运行即可。

注:因为该修改方式只是将本地的webview_flutter库源码做修改,要想应用到其他人的项目当中,需要把该 webview_flutter_wkwebview-3.4.3库导出上传到GitHub或者Gitee仓库,然后通过在pubspec.yaml文件中添加依赖库覆盖原webview_flutter库源码的方式,才能正确应用到其他人的项目中。导出方式:点击该库然后鼠标右键,找到 Open in——>Finder,打开即是。

3、覆盖原库

具体流程如下:

在pubspec.yaml文件中,找到 dependency_overrides:节点,然后在其下方换行添加以下内容:

dependency_overrides:
  #注意这里不要顶格,格式务必确认正确,url地址为你自己修改过的源码库地址,
  webview_flutter_wkwebview:
    git:
      url: https://gitee.com/user/webview_flutter_wkwebview-3.4.3.git

然后在项目根目录下,运行【flutter pub get】命令,会提示输入你源码所在仓库的用户名和密码,下载完成后就能看到源码库名称已经变为你自己的仓库名称了。

四、Xcode原生工程解决iOS设备上HTTPS证书校验方案

1、导入WKWebview库

在Xcode项目中,找到General界面,在其下方界面找到【Frameworks,Libraries,and Embedded Content】,点击右侧的加号➕按钮,在弹出的搜索界面,搜索WebKit,然后选中搜索出来的WebKit.framework库,点击下面的Add按钮,WKWebview依赖库添加完成。

 2、添加代码

#import "ViewController.h"
#import <WebKit/WebKit.h>

//1、这里添加WKNavigationDelegate接口,为了实现WKWebView的证书校验方法
@interface ViewController () <WKNavigationDelegate>
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    //添加webview组件
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
    CGRect frame = CGRectMake(0, 170, 400, 800);
    WKWebView *webView = [[WKWebView alloc] initWithFrame:frame configuration:configuration];
    [self.view addSubview:webView];


    NSURL *url = [NSURL URLWithString:@"https://www.baidu.com"];
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    //开始加载网页地址
    [webView loadRequest:request];
    
    //2、将当前类与WKNavigationDelegate接口监听进行绑定
    webView.navigationDelegate = self;
   
}

//3、重写didReceiveAuthenticationChallenge方法
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition, NSURLCredential * _Nullable))completionHandler{
    //在该方法当中添加如下代码,
    if ([challenge.protectionSpace.authenticationMethod isEqualToString:NSURLAuthenticationMethodServerTrust]) {
        SecTrustRef serverTrust = challenge.protectionSpace.serverTrust;
        NSURLCredential *credential = [NSURLCredential credentialForTrust:serverTrust];
        completionHandler(NSURLSessionAuthChallengeUseCredential, credential);
    } else {
        completionHandler(NSURLSessionAuthChallengeCancelAuthenticationChallenge, nil);
    }

}

@end

代码一共分为三步,添加完即可实现饶过HTTPS网页证书校验问题。

五、Android设备上HTTPS证书校验解决方案

1、创建network_security_config.xml文件

在Android Studio中打开Flutter项目下的Android工程,然后在app的目录下,也就是项目的主module模块下,依次打开app——>src——>main——>res目录,在该目录下创建文件xml,然后在xml目录下,创建network_security_config.xml文件,文件内容如下:

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <base-config cleartextTrafficPermitted="true">
        <trust-anchors>
            <certificates src="system" />
        </trust-anchors>
    </base-config>
</network-security-config>

2、引用network_security_config.xml文件

在AndroidManifest.xml文件中,找到application节点,添加android:networkSecurityConfig属性

<application
        android:networkSecurityConfig="@xml/network_security_config"
>

以上为在Android设备饶过HTTPS证书校验方案。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/21643.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Godot引擎 4.0 文档 - 循序渐进教程 - 脚本语言

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a; Scripting languages — Godot Engine (stable) documentation in English 脚本语言 本课将概述 Godot 中可用的脚本语言。您将了解每个选项的优缺点。在下一部分中&…

平板触控笔要原装的吗?苹果平替笔性价比高的推荐

与苹果的电容笔不同&#xff0c;市场上的电容笔只会给人一种倾斜的压感&#xff0c;并不会像苹果的电容笔那样&#xff0c;可以给人一种重力的压感。不过&#xff0c;如果你不一定要画画&#xff0c;那你就不用花很多钱去买一支苹果的原装电容笔了&#xff0c;只需一支平替电容…

postgresql数据库

官方文档:link 安装及简单操作 1 安装 sudo yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm sudo yum install -y postgresql15-server sudo /usr/pgsql-15/bin/postgresql-15-setup initdb sudo …

2023.5.21 第五十四次周报

目录 前言 文献阅读:跨多个时空尺度进行预测的时空 LSTM 模型 背景 本文思路 本文解决的问题 方法论 SPATIAL 自动机器学习模型 数据处理 模型性能 代码 用Python编写的LSTM多变量预测模型 总结 前言 This week, I studied an article that uses LSTM to solve p…

MATLAB绘制动画(五)GIF

GIF这个文件大家就比较熟悉了&#xff0c;我们通常当做表情包的动图一般都是用GIF格式。 这是因为GIF格式的文件比较小&#xff0c;传输速度快。 用MATLAB生成GIF图像同样需要将图像保存下来&#xff0c;通过循环展示动画 代码如下&#xff1a; clc; clear; close all; set…

AMBER分子动力学模拟之结果分析(MMGB/PBSA)-- HIV蛋白酶-抑制剂复合物(4)

AMBER分子动力学模拟之结果分析(MMGB/PBSA)-- HIV蛋白酶-抑制剂复合物(4) 结合自由能计算 我们首先计算焙变&#xff0c;用到的是pbsa和gbsa方法。我们需要一下文件 三个top文件&#xff0c;pro.prmtop lig.prmtop com.prmtop&#xff1b;输入文件MM_GBSA.in&#xff1b;将要…

从桌面端到移动端,.NET MAUI为什么对WPF开发人员更简单?

.NET多平台应用程序UI&#xff08;. NET MAUI&#xff09;的市场吸引力与日俱增&#xff0c;这是微软最新的开发平台&#xff0c;允许开发者使用单个代码库创建跨平台应用程序。尽管很多WPF开发人员还没有跟上 .NET MAUI的潮流&#xff0c;但我们将在这篇文章中为大家展示他的潜…

【FAQ】视频编辑服务常见问题及解答

Q1问题描述 1、 访问贴纸等素材的时候提示“网络异常&#xff0c;请重试”怎么办&#xff1f; 2、 使用AI能力时&#xff0c;提示“errorCode:20124 errorMsg:Method not Allowed”&#xff1f; 解决方案 请做以下检查&#xff1a; 1、 在代码中检查鉴权信息是否已设置。如…

2023/5/21周报

目录 摘要 论文阅读 1、标题和现存问题 2、各个结构 3、基于GNN-LSTM-CNN 网络轨迹预测模型 4、实验准备 5、实验结果 深度学习 1、费舍尔判别 2、步骤具体化 3、GCN 总结 摘要 本周在论文阅读上&#xff0c;阅读了一篇基于GNN-LSTM-CNN网络的6G车辆轨迹预测算法的…

RabbitMQ如何保证顺序性

1. RabbitMQ消息顺序性说明 顺序性&#xff1a; 消息的顺序性是指消费者消费到消息和发送者发布的消息的顺序是一致的 举个例子&#xff0c;不考虑消息重复的情况下&#xff0c;如果生产者发布的消息分别为msg1、msg2、msg3 那么消费者必然也是按照 msg1、msg2、msg3 的顺序来…

【leetcode刷题总结】——代码随想录(链表总结)

代码随想录按照数组-> 链表-> 哈希表->字符串->栈与队列->树->回溯->贪心->动态规划->图论->高级数据结构&#xff0c;再从简单刷起&#xff0c;做了几个类型题目之后&#xff0c;再慢慢做中等题目、困难题目。 以下是个人刷题总结&#xff0c;官…

Python初学小知识(十四):数据分析处理库Pandas

Python初学小知识&#xff08;十四&#xff09;&#xff1a;数据分析处理库Pandas 十八 Pandas1 文件读取1.1 读取csv1.2 读取txt1.3 读取excel&#xff08;xlsx&#xff09; 2 内容读取2.1 读取行2.2 读取列 3 数据处理3.1 加减乘除3.1.1 列 与 元素3.1.2 列 与 列 3.2 最值、…

张驰咨询:突破瓶颈降低成本-精益生产咨询的实践策略

在现代企业运营中&#xff0c;提高效率、优化流程是实现成功的关键因素之一。为了帮助企业在这方面取得突破性的进展&#xff0c;精益生产咨询成为了一种备受推崇的方法。本文将介绍精益生产咨询的基本原理、优势以及如何将其应用于企业实践中。 精益生产咨询是一种源于丰田生…

lwIP更新记02:网络接口标志(一个标志只做一件事)

从 lwIP-2.0.0 开始&#xff0c;网络接口 netif 的 up 标志修改为管理标志&#xff0c;up标志不再具有以前的 IP4 地址有效 含义。 什么是网络接口 netif &#xff1f; 网络接口 属于链路层范畴&#xff0c;它旨在对具体网络硬件、软件进行统一封装&#xff0c;并为协议栈上层&…

【运维知识进阶篇】集群架构-Nginx反向代理详解

在互联网请求中&#xff0c;客户端通常无法直接向服务端发起请求&#xff0c;就需要用代理服务&#xff0c;来实现客户端和的交互&#xff0c;起到一个中介的作用。 Nginx代理服务常见模式 Nginx代理按照应用场景模式可以分为正向代理和反向代理。 正向代理是内部上网过程中&a…

实现取关和关注功能

将关注过的用户id存如数据库中 //关注或者取关 Override public Result follow(Long id, Boolean flag) { //1.获取当前登录用户的id UserDTO user UserHolder.getUser(); if(usernull){ return Result.fail("请先登录"); } Long userId user.getId(); //2.判断是关…

关于ubuntu20.04 apt 安装源中搜索不到最新版本gcc 12的问题

一、问题描述 最近在搞Open 3d 点云point cloud 相关的东西&#xff0c;过程需要安装较高版本的cmake 3.20版本以上&#xff0c;3.20版本又需要gcc 更高版本 至少11.0以上&#xff0c;理论上本机配置的有 ubuntu 官方的源和阿里云的源&#xff0c;不过 通过搜索就只能搜索安装的…

微信小程序xr-frame实现交互(地月案例)

基础知识&#xff1a; 1.轮廓 如果想要与场景中的物体进行互动&#xff0c;比如说点击、拖拽物体&#xff0c;那么这个物体得先拥有一个轮廓才行。轮廓是一个组件。与某个物体互动&#xff0c;实际上是在与这个物体的轮廓进行互动&#xff0c;轮廓让这个物体在物理世界中拥有…

WordPress 如何开启多站点 含Apache和Nginx伪静态规则

WordPress 3.0以上的版本支持直接开启多站点模式,这样一来,你可以在一个后台切换多个站点进行管理。 最近打算折腾一个主题演示站,给每个主题使用独立的子站点来搭建演示,如果是Apache环境,配置就比较容易,但是倡萌使用的是 Nginx,花了大量的时间测试了N多网络上的伪静…

Weblogic SSRF 漏洞(CVE-2014-4210)

SSRF漏洞 ​ SSRF&#xff08;服务端请求伪造&#xff09;&#xff0c;指的是攻击者在未能取得服务器所有权限时&#xff0c;利用服务器漏洞以服务器的身份发送一条构造好的请求给服务器所在内网。SSRF攻击通常针对外部网络无法直接访问的内部系统。 ​ 简单的说就是利用一个可…
最新文章