Blazor Hybrid中BlazorWebView加载HLS流的HTTP与SSL证书问题求助

核心问题梳理 #

• HTTP流加载：被BlazorWebView安全策略拦截，配置usesCleartextTraffic和混合内容模式后仍未生效
• HTTPS流加载：Let's Encrypt证书绑定公网域名，局域网用IP访问时出现域名不匹配，证书无法被信任

方案一：允许BlazorWebView加载HTTP明文流量 #

Blazor Hybrid的WebView在安卓端有额外安全限制，需结合配置与代码双管齐下：

1. 修正network_security_config.xml
   明确指定允许目标IP及端口的明文流量，添加调试环境的信任兼容：

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <!-- 允许目标IP的明文流量 -->
       <domain-config cleartextTrafficPermitted="true">
           <domain includeSubdomains="false">192.168.195.176</domain>
           <domain includeSubdomains="false">192.168.195.176:8080</domain>
       </domain-config>
       <!-- 基础信任配置 -->
       <base-config>
           <trust-anchors>
               <certificates src="system" />
               <certificates src="user"/>
           </trust-anchors>
       </base-config>
       <!-- 调试环境跳过证书验证（仅测试用） -->
       <debug-overrides>
           <trust-anchors>
               <certificates src="user" />
               <certificates src="system" />
           </trust-anchors>
       </debug-overrides>
   </network-security-config>
   

2. 确保AndroidManifest.xml配置生效
   检查application标签无冲突配置，明确声明相关属性：

   <application
       android:allowBackup="true"
       android:icon="@mipmap/ic_launcher"
       android:label="@string/app_name"
       android:roundIcon="@mipmap/ic_launcher_round"
       android:supportsRtl="true"
       android:usesCleartextTraffic="true"
       android:networkSecurityConfig="@xml/network_security_config">
       <!-- 其他组件配置 -->
   </application>
   

3. 自定义WebViewClient强制允许请求
   在BlazorWebViewCreated事件中配置自定义客户端，跳过SSL拦截并允许所有URL加载：

   private void blazorWebView_BlazorWebViewCreated(object sender, BlazorWebViewCreatedEventArgs e)
   {
   #if ANDROID
       e.WebView.SetWebViewClient(new CustomWebViewClient());
   #endif
   }
   
   #if ANDROID
   public class CustomWebViewClient : Android.Webkit.WebViewClient
   {
       public override void OnReceivedSslError(Android.Webkit.WebView view, Android.Webkit.ISslErrorHandler handler, Android.Webkit.SslError error)
       {
           // 测试环境可直接忽略SSL错误（生产环境谨慎使用）
           handler.Proceed();
       }
   
       public override bool ShouldOverrideUrlLoading(Android.Webkit.WebView view, Android.Webkit.IWebResourceRequest request)
       {
           view.LoadUrl(request.Url.ToString());
           return true;
       }
   }
   #endif
   

方案二：解决HTTPS证书信任问题（生产环境推荐） #

Let's Encrypt证书绑定公网域名，局域网IP访问必然出现域名不匹配，需更换为局域网自签名证书：

1. 在Ubuntu服务器生成自签名证书
   针对局域网IP生成证书，有效期设为10年：

   # 生成私钥
   openssl genrsa -out server.key 2048
   # 生成证书签名请求，Common Name填写局域网IP：192.168.195.176
   openssl req -new -key server.key -out server.csr
   # 生成自签名证书
   openssl x509 -req -days 3650 -in server.csr -signkey server.key -out server.crt
   

2. 批量部署证书到安卓客户端
   将server.crt通过MDM工具或局域网批量推送至设备，在系统设置「安全」中选择「从存储安装证书」，安装类型选「VPN和应用」。

3. 修改network_security_config.xml信任自签名证书
   将server.crt放入res/raw目录，修改配置文件：

   <?xml version="1.0" encoding="utf-8"?>
   <network-security-config>
       <domain-config>
           <domain includeSubdomains="true">192.168.195.176</domain>
           <trust-anchors>
               <certificates src="@raw/server" />
               <certificates src="system" />
           </trust-anchors>
       </domain-config>
   </network-security-config>
   

4. 配置Ubuntu服务器启用HTTPS
   以Nginx为例，修改配置使用自签名证书：

   server {
       listen 443 ssl;
       server_name 192.168.195.176;
   
       ssl_certificate /path/to/server.crt;
       ssl_certificate_key /path/to/server.key;
   
       location /hls {
           alias /path/to/hls/streams;
           types {
               application/vnd.apple.mpegurl m3u8;
               video/mp2t ts;
           }
           add_header Access-Control-Allow-Origin *;
       }
   }
   

额外配置要点 #

• hls.js适配：添加配置允许HTTP流加载

  const hls = new Hls({
      enableWorker: true,
      allowCrossOriginCredentials: true,
      // 允许HTTP源
      enableWorker: true
  });
  

• 权限声明：确保AndroidManifest.xml添加互联网权限

  <uses-permission android:name="android.permission.INTERNET" />
  

内容的提问来源于stack exchange，提问作者Serkan Polat