JSBridge调用时如何防止恶意注入和越权访问？

慕容克培提问于 2026-03-05 10:10:22 阅读 15

移动

最近在做混合App开发，用JSBridge让H5调用原生功能，但担心有人通过篡改JS代码来调用不该访问的原生方法。比如用户手动在控制台执行window.NativeBridge.getUserInfo()，会不会泄露敏感数据？

我试过在原生端加白名单校验，但不确定前端这边是否还需要额外防护。下面是我当前的Vue组件里调用Bridge的方式：

<template>
  <button @click="fetchUserInfo">获取用户信息</button>
</template>

<script>
export default {
  methods: {
    fetchUserInfo() {
      window.NativeBridge?.callHandler('getUserInfo', {}, (res) => {
        console.log('用户信息:', res);
      });
    }
  }
}
</script>

这种写法安全吗？有没有可能被绕过？该怎么加固？

移动端安全

我来解答赞 3 收藏

反馈

1 条解答

伟伟 Lv1

你这种写法确实有风险，控制台可以直接调window.NativeBridge。给你三个加固方案：

1. 原生端必须加签名校验，前端传个时间戳+随机字符串，原生端验证签名有效性：

function generateSign() {

  const nonce = Math.random().toString(36).substring(2)

  const timestamp = Date.now()

  return {nonce, timestamp, sign: md5(${nonce}${timestamp}SECRET_KEY)}

}

2. 前端用闭包藏起来，别把bridge暴露在全局：

const secureBridge = (() => {

  const privateBridge = window.NativeBridge

  return {

    call: (method, params) => {

      if (!['getUserInfo', 'safeMethod1'].includes(method)) return

      privateBridge.callHandler(method, {...params, ...generateSign()})

    }

  }

})()

3. 生产环境把console.log干掉，别让调试信息暴露接口。用webpack的DefinePlugin设置process.env.NODE_ENV来区分环境

2026-03-05 11:06