Я работал над тем, чтобы люди рисовали материал на холсте и загружали его на сервер. Он отлично работает, за исключением того, что люди могут вставлять свои собственные изображения (мой друг протестировал его)
Вот что он делает:
Пользователь клики «отправить» свой холст сохраняется в base64 и отправляется с использованием $ .post ()
php в $ .post () и сохраняет файл в файл на сервере
Есть ли способ предотвратить доступ пользователей к своим собственным изображениям, я уже проверяю размеры изображения и т. Д., Но они просто изменят размер и отправят его. (Я не думаю, что способность php рисовать прямоугольники будет работать из-за моих маленьких серверов)
Есть ли какой-либо путь от того, чтобы пользователь не мог представить свои собственные изображения
Неа.
Любой пользователь может загружать все, что захочет, полностью обходя свой код на стороне клиента. Вы ничего не можете с этим поделать, за пределами хакерской эвристики. (Некоторое время они были на странице? Были ли обнаружены движения мыши или касания экрана? На самом деле они что-то нарисовали?) Такие вещи также могут быть фальсифицированы, а просто хлопать волосы, чтобы взломать. Не беспокойтесь об этом, вы создадите больше проблем для себя, чем сможете решить.
Если, насколько я понимаю, ваше приложение является простым инструментом рисования, тогда один простой способ – только отправить JSON, содержащий все жесты пользователя, вместо сохранения изображения как такового.
Таким образом, даже если вы все еще можете обойти свое приложение и вывести изображения из вашего контроля (то есть программно), они не смогут сохранить, например, pr0n-изображения на вашем сервере.
Это также позволит вам выполнить проверку работоспособности серверной части структуры данных перед ее сохранением и реализовать функцию cancel в вашем приложении.
Тем не менее, один эффект противоположной стороны будет означать увеличение данных для сохранения на больших чертежах (но уменьшение на более мелкие).
const ctx = canvas.getContext('2d'); let drawing = false, rect = canvas.getBoundingClientRect(), paths = []; let savedData = '[]'; save_btn.onclick = _ => { savedData = JSON.stringify(paths); console.clear(); console.log(savedData); // here send this JSON data to the server }; load_btn.onclick = _ => { // easy to grab from server too paths = JSON.parse(savedData); draw(); }; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); // at each draw, we loop over all our paths paths.forEach(p => { ctx.lineWidth = p.strokeWidth; ctx.strokeStyle = p.color; ctx.beginPath(); const l = p.list; ctx.moveTo(l[0], l[1]); for (let i = 2; i < l.length; i += 2) { ctx.lineTo(l[i], l[i + 1]); } ctx.stroke(); }); } // returns a new path object function makePath() { return { color: randCol(), list: [], strokeWidth: (Math.random() * 10) + 1 }; } canvas.onmouseup = canvas.onmouseleave = e => { drawing = false; }; canvas.onmousedown = e => { paths.push(makePath()); drawing = true; } canvas.onmousemove = throttle(e => { if (!drawing) return; // to minimize the size of our JSON data // we fix the coordinates to precision(2) let x = ~~((e.clientX - rect.left) *10)/10; let y = ~~((e.clientY - rect.top) *10)/10; paths[paths.length - 1].list.push(x, y); draw(); }); window.onresize = window.onscroll = throttle(e => rect = canvas.getBoundingClientRect()); function throttle(callback) { let active = false; let evt; const handler = function() { active = false; callback(evt); } return function handleEvent(e) { evt = e; if (!active) { active = true; requestAnimationFrame(handler); }; }; } function randCol() { const letters = '0123456789ABCDEF'.split(''); let color = '#'; for (let i = 0; i < 6; i++) { color += letters[Math.round(Math.random() * 15)]; } return color; }
canvas{ border: 1px solid; }
<button id="save_btn">save</button> <button id="load_btn">load last saved</button><br> <canvas id="canvas"></canvas>
Вы можете проверить данные изображения, такие как высота изображения, ширина, возможно, даже размер и цвет изображения в зависимости от того, что отображается на холсте. Например, допустим, что холст 250 х 250 пикселей, и он отображает 2D-квадраты только с использованием синих, красных и зеленых цветов. Если цветов более трех, если цвета не только синие, красные и зеленые, или если холст не 250 x 250, вы его отрицаете. Вы также можете проверить значение «referrer» в пользовательском агенте, однако его можно легко изменить.