评论

小程序页面加水印,防止用户截图分享隐私数据

小程序添加防截图水印

为了防止用户将小程序内的隐私数据进行截图或者录屏分享导致信息泄露,我们会在小程序全局添加一个水印浮层。这样即使被截图或者拍照,也能轻松地确定泄露的源头。


小程序防止用户截屏的方法有很多,其中一种常见的方法就是在小程序的页面中添加水印。具体实现方法如下:

  1. 在小程序中的页面中添加水印浮层,一般通过绝对定位来实现,这样可以使水印在页面的最上层,无法被其他元素覆盖。
  2. 设计水印的样式和位置,通常可以在小程序的样式文件中设置,例如设置水印的位置为右下角,样式为半透明的字体,以免影响正常的内容展示。
  3. 对于不同类型的页面,可以根据需要添加不同的水印,例如在敏感信息页面添加比较醒目的水印,而在其他普通页面只添加轻微的水印。
  4. 如果需要防止用户截屏或者拍照,可以在小程序中添加截屏监听事件,并在用户进行截屏或者拍照操作时,自动添加水印。


总的来说,小程序防止用户截屏的方法还有很多,例如使用安全键盘等,但是添加水印仍然是最为常见的一种方法。通过添加水印,可以有效地防止用户截屏和分享敏感信息,保护用户和单位的信息安全。


下面是一个简单的示例,position选择固定定位fixed,固定定位会固定在浏览器窗口某个位置,不会随滚动条滚动。用z-index将元素的层级设置为最低,将view旋转45度,效果就出来啦


<view style="position: fixed;top: -10vh; left:-100vw;width: 250vw; height: 100vh; z-index: -999;transform: rotate(-45deg);">
  <block wx:for="{{30}}" wx:key="index" wx:if="{{userInfo}}">
    <view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.15;">
    {{userInfo.user_name + '  ' + userInfo.user_phone}}      {{userInfo.user_name + '  ' + userInfo.user_phone}}     {{userInfo.user_name + '  ' + userInfo.user_phone}}    {{userInfo.user_name + '  ' + userInfo.user_phone}}
    </view>
  </block>
</view>
最后一次编辑于  2023-02-23  
点赞 6
收藏
评论

6 个评论

  • Pro!
    Pro!
    06-14

    加个样式把 不然会出现挡住 点击不到问题


    06-14
    赞同
    回复 3
    • 启年
      启年
      06-14
      z-index: -999 设置成了很低, 其他的正常写内容就可以
      06-14
      回复
    • Pro!
      Pro!
      06-28回复启年
      意思是会挡住 内容区域 你index - 的话 相当于内容区域在上面 哪里还能看到水印。
      06-28
      回复
    • Sunron
      Sunron
      06-29回复启年
      实测z-index负数无效,会被内容区域遮挡,如果想要不会挡住内容的点击,把z-index去掉,然后加上 pointer-events: none
      06-29
      回复
  • 晚星🌟
    晚星🌟
    02-23


    全局水印怎么做?

    02-23
    赞同
    回复 1
    • 启年
      启年
      02-23
      那只能每个页面添加了
      02-23
      回复
  • A3
    A3
    01-25

    用户使用另外一个手机拍照,也能防止?

    01-25
    赞同
    回复 1
    • 启年
      启年
      01-26
      你说的这个情况属于物理外挂, 页面上有水印,水印能看清就能防,看不清,那白搭
      01-26
      回复
  • Lumberjack
    Lumberjack
    2023-06-29

    如果需要防止用户截屏或者拍照,可以在小程序中添加截屏监听事件,并在用户进行截屏或者拍照操作时,自动添加水印。

    这是如何做到的,截屏完成后才有发送事件吧,如何修改图片

    2023-06-29
    赞同
    回复 1
    • 🦆
      🦆
      02-16
      没有用的,我这边有用户用安卓模拟器运行小程序,然后在用电脑录屏。
      02-16
      回复
  • Function
    Function
    2023-05-31

    我也是css实现的,就是不知道会不会有问题

    2023-05-31
    赞同
    回复
  • 华湘
    华湘
    2023-03-27

    牛人啊

    2023-03-27
    赞同
    回复
登录 后发表内容