今天在抖音上刷到一个视频，说长沙某案件实锤了支付宝在用户买保险时偷偷录屏，有个人隐私被监控的焦虑，我和视频博主发生了激烈的争论，我就偷偷行为给出了反驳。
经过我的调查查验，基本确定了博主是在造谣，制造焦虑来博取流量，理由如下。
首先，支付宝并没有偷偷录屏，在买保险的操作时有弹窗提示会录下操作的流程，而且这是保监会政策要求下的行为，没有偷偷这种说法。
其次，支付宝没有使用系统级的录屏手段，因为android系统录屏时会弹出系统级提示，我尝试过程中并没有出现，对支付宝意外的应用不会有被窥屏风险，最多录屏到支付宝应用内部数据。
最后，检测支付宝流量，正常使用并没有大量数据上传行为。
因为我十分讨厌博主这种行为，在他视频下硬刚，还发消息与@支付宝，最终博主删除视频！
事情是告一段落了，但是我对支付宝如何实现的录屏很好奇，经过我对购买保险流程的流程探索我做了如下两个技术路线的猜测：
技术路线1：记录用户在应用中的点击触摸等行为，利用技术手段和显示内容集合，合成操作视频。
技术路线2：对集成的浏览器内核做修改，利用javasript的录屏功能实现录屏。
根据上面两个技术路线我做了思考，路线一的方法基本上可以覆盖到整个应用，但是生成视频的过程像是造假证据一样，而且监测范围太大，侵犯用户正常使用隐私，感觉不符合保监会的需求，切法律风险大，我觉得可以排除。而技术路线2倒是很有可能，根据观察，保单确认页面属于小程序，小程序运行的基础众所周知就是魔改的浏览器内核，支付宝完全可以通过对内核的修改，加上javascript的录屏方法，将录屏在手机上正常使用（我测试了手机上录制的视频没发正常下载，没有深究原因），录制过程过程无感化（除了开始的弹窗提示，后面没有标识显示在录屏）。
录屏的javascript代码实现
<script type="text/javascript">
let chunks = null;
let mediaRecorder = null;
async function startRecord() {
//获取数据流
let stream = await navigator.mediaDevices.getDisplayMedia({
video: true
});
//浏览器支持的确认
const mime = MediaRecorder.isTypeSupported("video/webm; codecs=vp9")
? "video/webm; codecs=vp9"
: "video/webm"
//构建录屏变量
mediaRecorder = new MediaRecorder(stream, {
mimeType: mime
})
//数据存入变量
chunks = [];
mediaRecorder.addEventListener('dataavailable', function (e) {
chunks.push(e.data)
});
//停止录制监听
mediaRecorder.addEventListener('stop', function () {
let blob = new Blob(chunks, {
type: chunks[0].type
})
let url = URL.createObjectURL(blob)
//将视频设置为视频播放内容
/* let video = document.querySelector("video")
video.src = url */
//自动下载
let a = document.createElement('a')
a.href = url
a.download = 'video.webm'
a.click()
//清空数据
chunks=null;
mediaRecorder=null;
});
mediaRecorder.start()
}
function stopRecord() {
if(mediaRecorder!=null){
mediaRecorder.stop();
}
}
let bd = document.querySelector("#my_body");
let count = 0;
bd.addEventListener("click", function () {
if (count <= 0) {
startRecord();
alert("你点击了屏幕，开始录屏了！");
count++;
} else if (count >= 10) {
alert("你点击了10次屏幕，结束录屏！");
stopRecord();
count = 0;
} else {
count++;
}
});
</script>html代码界面
<!DOCTYPE html>
<html>
<head>
<title>Hello!</title>
<meta charset="UTF-8">
<style>
body {
background-color: #000;
overflow: hidden;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
color: #fff;
font-size: 4rem;
font-weight: bold;
}
.container span {
animation: pulse 2s infinite;
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
</style>
</head>
<body id="my_body">
<div class="container">
<span>Hello!</span>
</div>
<!--上面的javascript代码-->
</body>
</html>
评论区