返回顶部
首页 > 资讯 > 前端开发 > JavaScript >小程序安全指南之如何禁止外部直接跳转到小程序某页面
  • 165
分享到

小程序安全指南之如何禁止外部直接跳转到小程序某页面

2024-04-02 19:04:59 165人浏览 安东尼
摘要

目录背景一种不是很好的解决方案更好的解决方案全局改写Page的onLoad生命周期,增加校验全局改写wx.navigateTo方法,附带参数解释总结背景 小程序也需要注意安全性。例如

背景

小程序也需要注意安全性。例如某些页面是业务流程中的「第二步」、「第三步」,而非「第一步」。如果外部小程序、外部二维码、链接直接跳转到了我们小程序的「第二步」、「第三步」,可能有超出预期的事情发生。

针对外部跳转到小程序「第二步」、「第三步」页面的,我们应该拦截掉,要么直接报错:页面来源非法,要么直接跳回首页。

关键问题在于,这种逻辑该怎么实现最优雅呢?

一种不是很好的解决方案

如果你的业务流程采用了状态机模型,并在后端存储了状态,那么可以在每一个页面onLoad时,发送一个api请求,判断当前状态和当前页面是否匹配,如果匹配,则正常访问,如果不匹配,则跳回到状态对应的页面。

这依赖于后端实现,不太合适。

更好的解决方案

我们考虑纯前端的实现。

问题关键在于:我们要禁止外部直接跳转到我们小程序的部分页面。我们需要要区分:内部跳转、外部跳转。

这部分页面,只允许通过内部跳转API(wx.redirectTowx.navigateTo)来跳转,其它方式都不应跳转到。

只要我们在调用wx.redirectTowx.navigateTo时,都加上一个特殊参数。然后在页面的onLoad里面判断,是否包含了该特殊参数,包含该特殊参数,表明是内部跳转,不包含该特殊参数,表明是外部跳转。

这个特殊参数不可以被猜到,如果被猜到了,那么外部跳转时带上特殊参数,该方案就失效了。

所以,这个特殊参数必须不是固定的,要是随机的。

我们可以参考WEB中针对CSRF的解决方案,如果使用随机的特殊参数,让外部无法猜到这个特殊参数,那么问题就解决了。

特殊参数什么时候生成呢?可以在App onLaunch时生成,也可以在「第一步」页面onLoad时生成。不过不论怎样,这个特殊参数都需要作为全局变量保存在内存中,方便随时引用和判断。

具体怎么做?建议你先阅读下文章:《如何全局重写小程序 Page函数 wx对象?》,学会这种方法,我们再来看下方的代码。

全局改写Page的onLoad生命周期,增加校验

const WHITE_LIST = ['pages/index'];

function onLoadProxy(onLoad) {
  return function (query) {
    const app = getApp();
    // 以下是token拦截逻辑:
    if (WHITE_LIST.includes(this.route)) {
      // 在允许外部跳转来的白名单页面,生成随机数validEntranceToken
      app.validEntranceToken = `${new Date().getTime()}${Math.random().toString(36)}`;
    } else if (query.validEntranceToken !== app.validEntranceToken) {
      // 其它页面,校验参数token是否与全局变量中token一致,若不一致,跳转到报错页面
      wx.redirectTo({ url: `/pages/fail` });
      return;
    }
    // 未被拦截,表明是正常来源。以下是正常流程:
    if (onLoad) {
      return onLoad.call(this, query);
    }
  };
}

const PageProxy = (Page) => function (options) {
  const newOptions = {
    ...options,
    onLoad: onLoadProxy(options.onLoad),
  };
  Page(newOptions);
};

Page = PageProxy(Page);

全局改写wx.navigateTo方法,附带参数

function addValidEntranceToken(url) {
  const app = getApp();
  const symbol = url.includes('?') ? '&' : '?';
  return `${url}${symbol}validEntranceToken=${app.validEntranceToken}`;
}

export function redirectToProxy(redirectTo) {
  return function (object) {
    return redirectTo({
      ...object,
      url: addValidEntranceToken(object.url),
    });
  };
}

function wxProxy(wx) {
  const newWx = { ...wx };
  newWx.navigateTo = redirectToProxy(wx.navigateTo);
  newWx.redirectTo = redirectToProxy(wx.redirectTo);
  return newWx;
}

wx = wxProxy(wx);

解释

我们通过修改所有Page的onLoad方法,当用户访问「白名单」页面时,不会做任何拦截,而是直接生成一个随机的validEntranceToken。当用户访问「白名单」以外的页面时,则会判断参数中是否包含正确的validEntranceToken,若不包含,则会跳转到报错页。若包含,则继续执行该页面的其它逻辑。

此外,我们还修改了原生的wx.navigateTowx.redirectTo,当我们做内部跳转时,会自动带上刚才提到的参数validEntranceToken

做好这些事情后,开发时,无需关心细节(意思是这套逻辑针对业务代码是0侵入的),只需要关注「白名单」页面有哪些即可。可谓是最优雅的方案了。

总结

到此这篇关于小程序安全指南之如何禁止外部直接跳转到小程序某页面的文章就介绍到这了,更多相关小程序禁止外部直接跳转某页面内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: 小程序安全指南之如何禁止外部直接跳转到小程序某页面

本文链接: https://lsjlt.com/news/166727.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 小程序安全指南之如何禁止外部直接跳转到小程序某页面
    目录背景一种不是很好的解决方案更好的解决方案全局改写Page的onLoad生命周期,增加校验全局改写wx.navigateTo方法,附带参数解释总结背景 小程序也需要注意安全性。例如...
    99+
    2024-04-02
  • uniapp小程序跳转到外部页面
    方案1 使用uni-app的扩展组件 uni-link,使用参考文档uni-app官网 该组件的行为是在app内打开外部浏览器,在h5打开新网页。 方案2: 通过先跳转到web-view页面,通过web-view这个标签进行动态绑定...
    99+
    2023-09-13
    小程序 uni-app 前端 Powered by 金山文档
  • 小程序如何跳转到tabbar页面
    使用wx.switchTab跳转至tabbar的某一页面wx.switchTab({url: '../b/b'});如页面不带tab,使用wx.navigateTo跳转至tabbar页面wx.navigateTo({url:...
    99+
    2024-04-02
  • 公众号如何跳转到小程序页面
    公众号设置跳转小程序页面的步骤:进入公众号后台,进入小程序管理;在小程序管理中,填写小程序的跳转路径,使其与小程序关联;最后,在公众号平台编辑文章中插入小程序,填写跳转路径即可;...
    99+
    2024-04-02
  • ios如何禁止小程序页面滑动
    在ios中禁止小程序页面滑动的方法ios需禁止小程序页面滑动,可在对应页面的json文件中写入以下配置即可。{"disableScroll":true}...
    99+
    2024-04-02
  • 小程序如何实现页面跳转
    本篇内容主要讲解“小程序如何实现页面跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“小程序如何实现页面跳转”吧!  1.保留当前页面,跳转到应用内另一个页面:wx.navigateTo({ u...
    99+
    2023-06-26
  • 微信小程序扫描普通二维码跳转到小程序指定页面
    这个功能的逻辑是什么呢? 二维码就相当于是一个链接 相当于我们点击一个链接跳转到另一个页面 只不过这里是扫码的形式 如何操作 首先我们需要在微信公众平台的开发管理——>开发设置,找到(扫普通链接二维码...
    99+
    2023-09-08
    微信小程序 小程序 javascript 前端
  • 微信小程序如何禁止页面滚动
    微信小程序禁止页面滚动的方法:在需要禁止滚动页面的json文件中加入代码:"disableScroll": true(注意:只在页面配置中有效,无法再app.json中设置该项)...
    99+
    2024-04-02
  • 微信小程序如何禁止页面返回
    微信小程序禁止页面返回的案例:微信小程序中不允许用户返回上一页的操作代码。//用wx.redirectTo来做跳转页面wx.redirectTo({url: '/pages/index/index'})移动端小程序...
    99+
    2024-04-02
  • 小程序如何禁止页面上下拉动
    小程序使用catchtouchmove遮罩层并绑定事件,实现禁页面上下滑动,具体方法如下:首先,在页面中定义一个遮罩层;<view catchtouchmove="noneEnoughPeople">...
    99+
    2024-04-02
  • 小程序如何禁止页面左右滑动
    在小程序页面中添加css样式实现页面左右滑动,具体方法如下:{width:100%; //设置页面宽度为100%overflow-x:hidden; //禁止页面左右滑动}...
    99+
    2024-04-02
  • h5页面如何跳到小程序支付页面
    在h5页面中调用小程序支付页面的方法H5页面代码<body ><div class="container"><button onclick="testPay()">...
    99+
    2024-04-02
  • 微信小程序如何返回箭头跳转到指定页面
    这篇文章主要介绍微信小程序如何返回箭头跳转到指定页面,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!示例:onUnload: function () { ...
    99+
    2024-04-02
  • 小程序如何外链到H5页面
    在小程序使用web-view组件外链到h5页面新建一个web-view标签,并指向h5页面的链接;<web-view src="h5页面链接"> </web-view>通过 w...
    99+
    2024-04-02
  • uniapp 小程序如何从主包页面跳转到分包页面
    在uniapp开发小程序的时候,“分包”概念一定要提前了解下,具体我就不多说了,自己看下关网的相关配置。 那么,如果从主包页面,跳转至分包的页面呢?如图所示 我的页面->详情页  在我的页面创建好自己的链接,我使用的是方法创建的 // h...
    99+
    2023-09-15
    uni-app 小程序
  • 微信扫码跳转到微信小程序指定页面
    项目场景: 用户想通过在微信上扫描实验室二维码直接进入小程序申请加入实验室 怎么解决 首先我们需要在微信公众平台的开发管理——>开发设置,找到(扫普通链接二维码打开小程序),点击添加,会出现下面的页面,配置好之后点击保存就行了 填写页...
    99+
    2023-08-17
    微信小程序 微信 小程序 前端
  • 小程序如何实现保留当前页面跳转到应用内的某个页面
    本文将为大家详细介绍“小程序如何实现保留当前页面跳转到应用内的某个页面”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“小程序如何实现保留当前页面跳转到应用内的某个页面”能够给你意想不到的收获,请大家跟着小编的思...
    99+
    2023-06-26
  • 微信小程序之短连接 分享转发 点击短连接就可以直接打开小程序某个页面
    微信小程序之短连接 分享转发 点击短连接就可以直接打开小程序某个页面 首先,小程序官网地址:https://developers.weixin.qq.com/miniprogram/dev/OpenA...
    99+
    2023-09-27
    小程序 微信小程序
  • 实现微信扫一扫跳转到小程序指定页面
    使用微信扫一扫进入小程序内的指定页面 文章目录 使用微信扫一扫进入小程序内的指定页面前言一、微信小程序平台配置二、前端uniapp中的获取二维码信息三.后端处理参数总结 前言 使用场景:例...
    99+
    2023-08-31
    小程序 微信 微信小程序
  • 如何进行微信小程序的页面跳转
    本篇文章为大家展示了如何进行微信小程序的页面跳转,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。我们将创建第二个视图,然后实现从第一个视图到第二个视图的跳转。首先开发第二个视图:微信小程序开发系列七:...
    99+
    2023-06-05
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作