伪造微信浏览器中“网页由XXX提供”字段
如果使用微信打开页面并下拉,会看到一个提示页面链接的文字“网页由xxx提供”
目前就网上的讨论而看,更多做到的是隐藏该效果,但是实际上通过同样的思路,甚至可以伪造这里的文字。考虑到估计做这个肯定不是干正经事,所以不提供代码,仅仅讲下大概思路
效果如下(没有抠细节,主要是说明确实能实现该效果):
该效果如果不对比完全可以以假乱真,并且理论上可以100%还原。因此敏感操作请使用正规浏览器,确定域名后再操作
需求
首先观察微信原本文字的效果:
- 在下拉时,看到固定在页面后方的一段文字
- 该部分背景与微信默认背景色(
#EDEDED
)相同,可能还需要考虑深色主题下的背景色也应该是对应的颜色 - 下拉时存在阻尼感,越往后拉的移动的距离越短
- 松开后页面会零点几秒内移动回原位置
前两点很容易实现,结合参考资料的页面,稍微熟悉点前端的应该都可以做到。
下面主要讨论下后两者
阻尼感
如果不要求精益求精,可以将其理解成一个特殊的函数:函数的 是下拉的距离, 是页面本体向下移动的距离。
那么, 应该是一个凸函数(导数减小)。并且,在整个过程中, 都应该在 下方。
那么最简单的就是 。当然,如果直接使用,可能效果并不好,可以考虑使用 。这样可以得到一个几乎可以以假乱真的阻尼效果(如果需要原汁原味的效果,可能就得录屏然后拟合对应的函数了)
恢复动画
恢复动画实际上直接添加transition
即可,但是这将会影响下拉时的效果。因此可以只在松开手指后设定该动画,并且将页面本体归位,归为后将该动画属性取消。