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

news2024/11/28 20:48:55

一、问题描述

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.coloradmin.cn/o/550640.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

AVR单片机ATemga328P中断原理的介绍

1、一AVR单片机中断原理的介绍 ATmega328P微控制器具有两个外部中断引脚&#xff0c;分别是INT0和INT1。 外部中断0&#xff08;INT0&#xff09;&#xff1a;它对应的引脚是PD2&#xff08;数字引脚2&#xff09;。INT0可以用于响应外部信号的边沿触发&#xff08;上升沿、下…

【服务器】使用Nodejs搭建HTTP web服务器

Yan-英杰的主页 悟已往之不谏 知来者之可追 C程序员&#xff0c;2024届电子信息研究生 目录 前言 1.安装Node.js环境 2.创建node.js服务 3. 访问node.js 服务 4.内网穿透 4.1 安装配置cpolar内网穿透 4.2 创建隧道映射本地端口 5.固定公网地址 [TOC] 转载自内网穿透…

Unity Addressables学习笔记(1)---创建远程服务器加载资源

例子1&#xff1a;加载一个图片 1.首先创建一个UI Image&#xff0c;空白图片,资源打包方式选择真是部署的 2.修改远程发布和加载配置 Bulid Path选择RemoteBuildPath Load Path我选择了custom,地址是http://localhost:8080/WebGL/ 遇坑1 :最开始我选择的Build Path 是 Loca…

windows安装mysql 5.7.41

前言 要学mysql&#xff0c;肯定得本地装上一个玩一玩啦&#xff0c;下面一起来安装mysql吧 一、下载 https://downloads.mysql.com/archives/community/ 顺便说一下&#xff0c;下载按钮下方有个md5&#xff0c;可以验证下文件是否被篡改&#xff0c;理论上官网下载的应该问…

初识结构体

目录 结构体的声明 结构体的基础知识 结构体的声明 结构体成员的类型 结构体变量的定义和初始化 定义 初始化 结构体成员的访问 结构体变量访问成员 结构体指针访问指向变量的成员 结构体传参 传地址 传结构体 结论 结构体的声明 结构体的基础知识 数组&#xff…

【ChatGPT】IOS如何下载注册使用ChatGPT的APP(教学)

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化 &#x1f449;专__注&#x1f448;&#xff1a;专注主流机器人、人工智能等相关领域的开发、…

iptables 防火墙

iptables概述 Linux系统的防火墙&#xff1a;ip信息过滤系统&#xff0c;它实际上由两个组件netfilter和iptables组成。 主要工作在网络层&#xff0c;针对IP数据包。体现在对包内的IP地址、端口、协议等信息的处理上 netfilter / iptables关系&#xff1a; netfilter:属于…

Electron中如何创建模态窗口?

目录 前言一、模态窗口1.Web页面模态框2.Electron中的模态窗口3.区分父子窗口与模态窗口 二、实际案例使用总结 前言 模态框是一种常用的交互元素&#xff0c;无论是在 Web 网站、桌面应用还是移动 APP 中&#xff0c;都有其应用场景。模态框指的是一种弹出窗口&#xff0c;它…

【TES714】JFM7K325T(复旦微FPGA)+HI3531DV200(华为海思)的综合视频处理平台设计原理图及调试经验

板卡概述 TES714是自主研制的一款5路HD-SDI视频采集图像处理平台&#xff0c;该平台采用上海复旦微的高性能Kintex系列FPGA加上华为海思的高性能视频处理器HI3531DV200来实现。 华为海思的HI3531DV200是一款集成了ARM A53四核处理器性能强大的神经网络引擎&#xff0c;支持多种…

【运维知识进阶篇】集群架构-Nginx动静分离详解

我们先前将静态资源放到NFS&#xff0c;动态资源放到MySQL&#xff0c;一是为了提高我们Web服务器性能&#xff0c;减轻它的压力&#xff0c;另一面如果Web宕机了&#xff0c;我们的静态和动态资源还可以访问到。但是之前方式不管是静态还是动态文件&#xff0c;都是走的代码文…

ssl vpn 与 ipsec vpn 区别

VPN 安全协议有两种主要类型&#xff0c;IPsec 和 SSL&#xff0c;了解它们之间的区别对于确保客户的安全至关重要。在本文中&#xff0c;我们将解释IPsec 和 SSL VPN 协议之间的区别&#xff0c;以及如何选择合适的协议来满足客户的需求。了解更多SSL技术最新信息&#xff0c;…

Linux_证书_Openssl实现对称加密、非对称加密、CA颁布证书

文章目录 OpenSSLopenssl实现对称加密openssl实现非对称加密生成密钥对非对称加密数字签名小结 根据CA颁布证书生成ca私钥和ca证书根据ca生成证书 尾声 OpenSSL 常用证书生成工具包括三个&#xff1a;ssh-keygen、cfssl、openssl。这里介绍 OpenSSL , OpenSSL 是一个开源项目&…

【Python从入门到进阶】20、HTML页面结构的介绍

接上篇《19、Python异常处理》 上一篇我们学习了Python中有关异常&#xff08;捕获异常、处理异常等&#xff09;的知识。从本篇开始&#xff0c;我们进入Python的实战教程&#xff0c;学习爬虫的相关技术&#xff0c;本篇主要讲解要爬取的HTML页面的结构。 一、一个场景 假设…

Godot引擎 4.0 文档 - 入门介绍 - Godot 编辑器

本文为Google Translate英译中结果&#xff0c;DrGraph在此基础上加了一些校正。英文原版页面&#xff1a; First look at Godots editor — Godot Engine (stable) documentation in English Godot的编辑器 本页将为您简要介绍 Godot 的界面。我们将查看不同的主屏幕和停靠栏…

C语言:字符函数和字符串函数详解及部分函数的模拟实现(前篇)

文章目录 求字符串长度strlenstrlen函数的模拟实现: 长度不受限制的字符串函数strcpystrcatstrcmp总结 长度受限制的字符串函数介绍strncpystrncatstrncmp 前言&#xff1a; C语言中对字符和字符串的处理很是频繁&#xff0c;但是C语言本身是没有字符串类型的&#xff0c;字符串…

【LeetCode】382. 链表随机节点

382. 链表随机节点&#xff08;中等&#xff09; 方法一 思路 定义两个链表&#xff0c;一个origin&#xff0c;用于每次调用 getRandom() 时进行初始化&#xff0c;一个 l 用于每次调用 getRandom() 时进行遍历&#xff0c;找到随机选定的元素。首先在 Solution() 的时候&am…

SpringBoot原理——起步依赖与自动装配

文章目录 SpringBoot原理一、起步依赖二、自动配置2.1 概述2.2 工具类准备工作2.2.2 HeaderConfig2.2.3 HeaderGenerator2.2.4 HeaderParser2.2.5 MyImportSelector2.2.6 TokenParser2.2.7 pom.xml文件 2.3 自动配置原理2.3.1 引入工具类2.3.2 案例 &#xff1a; 访问第三方Bea…

GPT专业应用:撰写工作简报

●图片由Lexica 生成&#xff0c;输入&#xff1a;Workers working overtime 工作简报&#xff0c;作为一种了解情况、沟通信息的有效手段&#xff0c;能使上级机关和领导及时了解、掌握所属部门的政治学习、军事训练、行政管理等方面的最新情况&#xff1b;同时&#xff0c;能…

BERT输入以及权重矩阵形状解析

以下用形状来描述矩阵。对于向量&#xff0c;为了方便理解&#xff0c;也写成了类似(1,64)这种形状的表示形式&#xff0c;这个你理解为64维的向量即可。下面讲的矩阵相乘都是默认的叉乘。 词嵌入矩阵形状&#xff1a;以BERT_BASE为例&#xff0c;我们知道其有12层Encoder&…

记录--Vue中如何导出excel表格

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 一、导出静态数据 1、安装 vue-json-excel npm i vue-json-excel注意&#xff0c;此插件对node有版本要求&#xff0c;安装失败检查一下报错是否由于node版本造成&#xff01; 2、引入并注册组件(以全…