鸿蒙WebView IPC防伪造请求方案示例详解

// ArkTS 侧 WebViewController 示例
import web_webview from '@ohos.web.webview';
import { BusinessError } from '@ohos.base';

@Entry
@Component
struct SecureWebView {
  controller: web_webview.WebviewController = new web_webview.WebviewController();
  // 定义可信域名白名单
  private trustedDomains: string[] = [
    'https://your-legitimate-domain.com',
    'file://resource/rawfile/', // 允许加载本地安全资源
  ];

  aboutToAppear() {
    // 监听页面加载开始，进行来源校验
    this.controller.onLoadStart((event) => {
      const url = event?.url;
      if (!url || !this.isUrlTrusted(url)) {
        console.error(`安全拦截：试图加载非授信源 ${url}`);
        // 可选择停止加载或跳转到错误页
        this.controller.stopLoading();
        // 跳转到本地安全提示页
        this.controller.loadUrl('file://resource/rawfile/error.html');
      } else {
        console.info(`允许加载授信源：${url}`);
      }
    });
  }

  // 校验URL是否可信
  private isUrlTrusted(url: string): boolean {
    return this.trustedDomains.some(domain => url.startsWith(domain));
  }

  build() {
    Column() {
      Web({ src: 'https://your-legitimate-domain.com/index.html', controller: this.controller })
        .width('100%')
        .height('100%')
        .javaScriptAccess(true) // 开启JS交互
        .onInterceptRequest((event) => {
          // 可选：进一步拦截所有资源请求（如图片、API），进行更细粒度的校验
          return this.handleInterceptRequest(event);
        })
    }
  }

  private handleInterceptRequest(event: any): boolean {
    // 示例：拦截所有请求，确保其来源或目标为授信域
    const requestUrl = event?.request?.url;
    if (requestUrl && !this.isUrlTrusted(requestUrl)) {
      console.warn(`拦截非授信资源请求：${requestUrl}`);
      return true; // true 表示拦截该请求
    }
    return false; // false 表示允许请求通过
  }
}

// 在 ArkTS 组件中，监听页面加载完成
private setupTokenInjection() {
  this.controller.onPageFinish((url: string) => {
    if (this.isUrlTrusted(url)) {
      // 生成一个临时令牌（实际应用中应更复杂，如JWT）
      const token = this.generateSecureToken();
      // 将令牌注入到 Web 页面的全局环境
      const jsCode = `
        (function() {
          window.__NATIVE_TOKEN__ = '${token}';
          console.log('安全令牌已注入');
        })();
      `;
      this.controller.runJavaScript(jsCode, (err: BusinessError) => {
        if (err) {
          console.error('令牌注入失败:', JSON.stringify(err));
        }
      });
    }
  });
}

private generateSecureToken(): string {
  // 实际开发中应使用加密库生成，此处为示例
  return 'token_' + Date.now() + '_' + Math.random().toString(36).substr(2);
}

// Web 页面端 JS：封装安全的调用函数
window.callSecureNative = function(method: string, params: any): Promise<any> {
  return new Promise((resolve, reject) => {
    // 获取原生注入的令牌
    const token = window.__NATIVE_TOKEN__;
    if (!token) {
      reject(new Error('安全令牌未就绪，请等待页面加载完成'));
      return;
    }

    // 构造请求对象，包含令牌
    const request = {
      method: method,
      params: params,
      timestamp: Date.now(),
      token: token
    };

    // 假设通过 postMessage 或特定函数与原生通信
    // 这里以假设的全局桥接对象为例
    if (window.NativeBridge && window.NativeBridge.postMessage) {
      window.NativeBridge.postMessage(JSON.stringify(request), (response) => {
        // 处理原生返回
        const resp = JSON.parse(response);
        if (resp.code === 200) {
          resolve(resp.data);
        } else {
          reject(new Error(resp.message || '调用失败'));
        }
      });
    } else {
      reject(new Error('原生桥接不可用'));
    }
  });
};

// 使用示例：调用获取位置的接口
window.callSecureNative('getLocation', { highAccuracy: true })
  .then(location => console.log('位置:', location))
  .catch(err => console.error('获取失败:', err));

// ArkTS 侧：监听来自 Web 的消息
private setupMessageHandler() {
  // 假设通过某种方式（如 onMessage）接收消息
  this.controller.onMessage((event) => {
    try {
      const request = JSON.parse(event?.data);
      // 1. 验证令牌是否存在且有效
      if (!request.token || !this.isTokenValid(request.token)) {
        this.sendErrorResponse(event, '非法令牌或令牌已失效', 403);
        return;
      }
      // 2. 可选：验证时间戳，防止重放攻击
      if (Date.now() - request.timestamp > 5 * 60 * 1000) { // 5分钟有效期
        this.sendErrorResponse(event, '请求已过期', 408);
        return;
      }
      // 3. 令牌有效，处理业务请求
      this.handleBridgeMethod(request.method, request.params, event);
    } catch (error) {
      this.sendErrorResponse(event, '请求格式错误', 400);
    }
  });
}

private isTokenValid(token: string): boolean {
  // 实现令牌验证逻辑，例如检查是否在已签发的令牌列表中，是否过期等
  // 此处为示例，实际应结合缓存或数据库
  return token.startsWith('token_'); // 简单示例
}

private sendErrorResponse(event: any, message: string, code: number) {
  const response = JSON.stringify({ code: code, message: message });
  // 通过相应方式将错误信息传回 Web
  this.controller.postMessage(event?.origin, response);
}

// ArkTS 侧：维护接口-角色映射
private methodPermissionMap: Map<string, string[]> = new Map([
  ['getLocation', ['user', 'admin']], // 用户和管理员可调用
  ['readContacts', ['admin']], // 仅管理员可调用
  ['getDeviceInfo', ['user', 'admin', 'guest']], // 所有角色可调用
]);

private handleBridgeMethod(method: string, params: any, event: any) {
  // 1. 获取当前页面的角色（可从注入的令牌中解析，或根据URL判断）
  const currentPageRole = this.getRoleFromTokenOrUrl(event?.url); // 假设实现此方法

  // 2. 检查该角色是否有权限调用此方法
  const allowedRoles = this.methodPermissionMap.get(method);
  if (!allowedRoles || !allowedRoles.includes(currentPageRole)) {
    this.sendErrorResponse(event, `角色 ${currentPageRole} 无权限调用方法 ${method}`, 403);
    return;
  }

  // 3. 有权限，执行对应方法
  switch (method) {
    case 'getLocation':
      this.handleGetLocation(params, event);
      break;
    // ... 其他方法
    default:
      this.sendErrorResponse(event, `未知方法: ${method}`, 404);
  }
}