伪造微信浏览器中“网页由XXX提供”字段

如果使用微信打开页面并下拉,会看到一个提示页面链接的文字“网页由xxx提供”

微信下拉的提示微信下拉的提示

目前就网上的讨论而看,更多做到的是隐藏该效果,但是实际上通过同样的思路,甚至可以伪造这里的文字。考虑到估计做这个肯定不是干正经事,所以不提供代码,仅仅讲下大概思路

效果如下(没有抠细节,主要是说明确实能实现该效果):

模拟效果模拟效果

该效果如果不对比完全可以以假乱真,并且理论上可以100%还原。因此敏感操作请使用正规浏览器,确定域名后再操作

需求

首先观察微信原本文字的效果:

  1. 在下拉时,看到固定在页面后方的一段文字
  2. 该部分背景与微信默认背景色(#EDEDED)相同,可能还需要考虑深色主题下的背景色也应该是对应的颜色
  3. 下拉时存在阻尼感,越往后拉的移动的距离越短
  4. 松开后页面会零点几秒内移动回原位置

前两点很容易实现,结合参考资料的页面,稍微熟悉点前端的应该都可以做到。
下面主要讨论下后两者

阻尼感

如果不要求精益求精,可以将其理解成一个特殊的函数:函数的xx 是下拉的距离,yy 是页面本体向下移动的距离。
那么,y=f(x)y=f(x) 应该是一个凸函数(导数减小)。并且,在整个过程中,y=f(x)y=f(x) 都应该在 y=xy=x 下方。

那么最简单的就是 y=x12y=x^{\frac{1}{2}}。当然,如果直接使用,可能效果并不好,可以考虑使用 y=xn2,n<2y=x^{\frac{n}{2}},n < 2。这样可以得到一个几乎可以以假乱真的阻尼效果(如果需要原汁原味的效果,可能就得录屏然后拟合对应的函数了)

恢复动画

恢复动画实际上直接添加transition即可,但是这将会影响下拉时的效果。因此可以只在松开手指后设定该动画,并且将页面本体归位,归为后将该动画属性取消。

参考资料