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);
<button style="position: absolute; padding: 4px 8px 0px; cursor: pointer; top: 4px; right: 8px; font-size: 14px;">复制</button>

但鉴于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组件去加载图片即可。可以有效的解决问题。