HarmonyOS鸿蒙Next中Image组件加载HTTPS图片后报证书错误如何解决

HarmonyOS鸿蒙Next中Image组件加载HTTPS图片后报证书错误如何解决

【问题现象】

直接用Image组件加载一个HTTPS图片地址，DevEco Studio预览是能看到的，一安装到手机端就报证书错误。报错信息为Http task of url xxx/xx.png failed, response code 0, msg from netStack: SSL peer certificate or SSH remote key was not OK。

问题代码如下：

Image('xxx/xx.png')
    .width('50%')
    .onError((err) => {
        Logger.info(`Invoke wparksdc failed, code is, message is ${err.message}`);
})

【定位思路】

  1. 根据错误提示，是Image组件加载网络资源时的证书有问题，导致加载失败，因此考虑解决证书问题。
  2. 鉴于Image组件当前仅支持加载简单网络图片，以及不能配置capath字段等局限性，而传统的通过HTTP的session的方式去加载网络图片资源具有足够的稳定性和可靠性。因此，可以考虑先通过HTTP下载后Image组件加载的方式可作为我们处理类似问题的一个常用思路。

【解决方案】

1. 证书配置

HTTP请求使用默认证书验证失败，需要使用服务端证书做单向认证时，可通过HTTP原生接口能力的capath字段指定沙箱路径下证书。证书可通过如下步骤放入工程机：

  1. 通过 “hdc file send testCert.pem（PC上证书路径）/etc/ssl/certs/testCert.pem(证书默认沙箱路径)”命令上传；
  2. 将证书放入项目rawFile文件目录下，使用getRawFileContent读取内容，通过创建文件的方式写入，然后将capath指向当前写入路径。

代码示例如下：

let context: Context = getContext(this);
const keyPemComponent = context.resourceManager.getRawFileContentSync('testCa.pem')
let filesDir: string = context.filesDir
let filePath = filesDir + "/testCer.pem";
let file = fs.openSync(filePath, fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE);
fs.writeSync(file.fd, keyPemComponent.buffer);
fs.fsyncSync(file.fd);
fs.closeSync(file);

但鉴于Image组件当前仅支持加载简单网络图片，以及不能配置capath字段继而不能解决证书问题等局限性，若该方没有解决该问题，则应采用如下“HTTP方式下载图片”方案。

2. HTTP方式下载图片

async test(url: string) {
      // 下载到文件描述符
      const securityConfig: rcp.SecurityConfiguration = {
        remoteValidation: "skip",
      };
      //建立session对象
      let session = rcp.createSession({
        //指定与会话关联的HTTP请求的配置
        requestConfiguration: {
          security: securityConfig
        }
      });
      const respMemory = await session.get(url);
      const dataMemory = respMemory.toString();
      if (fileIo.accessSync(this.filePath)) {
        fileIo.unlinkSync(this.filePath);
      }
      const file = fileIo.openSync(this.filePath, fileIo.OpenMode.CREATE | fileIo.OpenMode.WRITE_ONLY);
      const resp = await session.downloadToFile(url, {
        kind: 'file',
        file: file.fd
      });
      this.newPath = fileuri.getUriFromPath(this.filePath)
      fileIo.closeSync(file.fd);
      session.close();
    }

然后用Image组件去加载图片即可。可以有效的解决问题。


更多关于HarmonyOS鸿蒙Next中Image组件加载HTTPS图片后报证书错误如何解决的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中Image组件加载HTTPS图片后报证书错误如何解决的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，Image组件加载HTTPS图片时出现证书错误

在HarmonyOS鸿蒙Next中，Image组件加载HTTPS图片时出现证书错误，通常是由于SSL证书验证失败导致的。可以通过以下方式解决：

  1. 检查证书有效性：确保服务器使用的SSL证书是有效的，且未过期。可以通过浏览器访问图片URL，查看证书状态。

  2. 使用合法证书：确保服务器使用的是由受信任的证书颁发机构（CA）签发的合法证书，而不是自签名证书。

  3. 配置网络安全策略：在config.json中配置网络安全策略，允许加载HTTPS资源。例如：

    {
  "deviceConfig": {
    "default": {
      "network": {
        "cleartextTrafficPermitted": true
      }
    }
  }
}

  4. 忽略证书验证（不推荐）：在开发环境中，可以通过代码忽略证书验证，但此方法不适用于生产环境。例如：

    import http from '[@ohos](/user/ohos).net.http';
let httpRequest = http.createHttp();
let options = {
  method: 'GET',
  extraData: {
    "trustAll": true // 忽略证书验证
  }
};
httpRequest.request('https://example.com/image.jpg', options, (err, data) => {
  if (!err) {
    // 处理图片数据
  }
});

  5. 更新系统证书：确保设备上的系统证书库是最新的，以支持最新的CA证书。

通过以上方法，可以解决HarmonyOS鸿蒙Next中Image组件加载HTTPS图片时出现的证书错误问题。

回到顶部