企业官网建设流程全解析

重庆江北营销型网站建设公司推荐,苏州怎么制作网页网站,工程建设业绩公示网站,网站应用程序池本文适用于#xff1a;WebView 混合开发、Hybrid App、AndroidiOS H5、App 内嵌业务、前端 axios 调接口的项目。 核心目标#xff1a;搞清楚 Token 是否能给前端、哪些接口让 H5 调、哪些必须走原生#xff0c;以及最安全的架构是什么。一、先说结论#xff08;最重要WebView 混合开发、Hybrid App、AndroidiOS H5、App 内嵌业务、前端 axios 调接口的项目。核心目标搞清楚 Token 是否能给前端、哪些接口让 H5 调、哪些必须走原生以及最安全的架构是什么。一、先说结论最重要对于所有 Hybrid 项目可以直接采用下面这套三段式分级策略① 不需要登录的接口公共接口 → H5 自己 axios无需 Token例如Banner、文章列表、活动页内容商品展示页公共配置接口这些接口本身没敏感风险让前端自己请求最省心。② 需要登录但风险一般的接口普通业务 → 统一走原生网络层App.requestH5 不拿 Token例如查询个人资料普通订单列表普通业务提交这些接口需要鉴权但不允许 H5 拿到 token所以H5 调 JSBridge → 原生带 token 发出去 → 结果回调给 H5。H5 完全看不到 token更安全。③ 高风险接口资产 / 支付 / 关键控制 → 必须原生代发 内部加签名例如登录 / Token 刷新下单、支付用户资产、账户操作任何高价值动作例如机器人控制指令这类接口必须H5 不得发请求H5 不得获取 Token统一App.request()原生这里可以做Token 注入签名TLS Pinning风控 / 设备ID / 限制算法这是企业级安全架构的基本线。二、为什么不能让 H5 直接拿 TokenHybrid 中最常见的两个误区是误区 1axios Authorization 就很安全——并不axios.get(/user/profile, { headers: { Authorization: Bearer ${window.APP_TOKEN} } });只要 Token 暴露在windowJS 全局localStorage任意 JS 环境就意味着XSS、第三方脚本、被注入脚本都可以拿到 Token。即便配合 CookieManager 也一样因为只要 Token 不带 HttpOnlyJS 就能读安全性 一般。误区 2CookieManager 写 Token 更安全——其实也不很多人会写cookieManager.setCookie(https://m.xxx.com, tokenabc)三、真正安全的思路不是保护 Token而是不给 Token这里是全文核心理念只要 H5 能调后端H5 就必须带鉴权H5 只要带鉴权就会暴露鉴权凭证因此最安全的办法是H5 不调后端、让原生代发。这就是为什么最终落地要无 Token 的接口 → H5 直接 axios有 Token 的接口 → 原生代发不给 H5 Token而不是纠结 Token 放 Cookie 还是放 Header。四、落地的代码架构非常清晰① H5公共接口axios.get(/config/public).then(res {}); axios.get(/article/list).then(res {});② H5重要接口统一通过 JSBridge 调原生window.App.request({ url: /user/profile, method: GET, data: {}, success(res) { console.log(res); }, fail(err) { console.error(err); } });H5 不接触 Token。③ 原生统一网络网关Kotlin 示例JavascriptInterface fun request(json: String) { val req parse(json) val token tokenStore.getAccessToken() val httpReq buildRequest(baseUrl req.url) { header(Authorization, Bearer $token) header(Device-Id, deviceId) // 原生还能加签名、TLS Pinning、安全参数 } client.newCall(httpReq).enqueue(object : Callback { override fun onResponse(...) { callbackToJs(req.callbackId, bodyString) } override fun onFailure(...) { callbackToJsError(req.callbackId, errorMsg) } }) }五、整套策略的优点1H5 世界里没有 Token —— 安全性最大化JS 拿不到 token → XSS 也拿不到 token → 攻击面小。2前端开发简单公共接口直接 axios登录态接口统一 App.request不用管 token 注入3后端风控可以做得更强因为所有带 token 的请求都来自原生网络层可以确定 UA、Device ID、App Version可以确定证书是否校验可以签名可以走统一安全通道这些 H5 都做不到。4架构层次分明、非常易维护一句话总结H5 UI层负责界面与业务表达原生 安全层 能力层负责鉴权、Token、安全请求这是今天最推荐的 Hybrid 结构。六、整篇文章总结核心一句话版**把接口分两类不需要 Token 的 → H5 自己 axios需要 Token 的 → 原生代发H5 不接触 Token。不要让 H5 拿 Token这才是 Hybrid 的最佳实践。**