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

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

移动

最近在做混合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>

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

移动端安全

我来解答赞 7 收藏

反馈

2 条解答

Dev · 瑞瑞 Lv1

省事的话，前端可以加个随机token验证，每次调用前生成，原生端验证后再处理请求。代码示例：

export default {

  data() {

    return {

      token: ''

    };

  },

  methods: {

    generateToken() {

      this.token = Math.random().toString(36).substring(2, 15);

    },

    fetchUserInfo() {

      this.generateToken();

      window.NativeBridge?.callHandler('getUserInfo', { token: this.token }, (res) => {

        console.log('用户信息:', res);

      });

    }

  },

  mounted() {

    this.generateToken();

  }

}

2026-03-22 13:12

伟伟 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