Prevent users from submitting their own image using ajax?

Question

I worked on making people draw material on canvas and upload it to the server. It works great, except that people can embed their own images (my friend tested it).

Here is what he does:

• The user clicks "send" his canvas, which is saved in base64 and sent using $ .post ()

• php file in $ .post () starts and saves the file to a file on the server

Is there a way to prevent users from accessing their own images, I already check the image sizes, etc., but they will just resize and send it. (I don't think php's ability to draw rectangles will work because of my small servers)

Answer 1

Is there any way to prevent the user from accessing their own images.

Nope.

Any user can download whatever they want, completely bypassing their code on the client side. There is nothing you can do, outside of hacker heuristics. (Were they on the page for a while? Were mouse movements or touches of the screen detected? Did they actually draw something?) Such things can also be fake, but it’s just more hassle for the hair to crack. Do not worry about this, you will create more problems for yourself than you can solve.

Answer 2

, , , - 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>

Hide result

Answer 3

You can check image data such as image height, width, perhaps even the size and color of the image depending on what is displayed on the canvas. For example, suppose the canvas is 250 x 250 pixels, and it only displays 2D squares using blue, red, and green. If there are more than three colors, if the colors are not only blue, red and green, or if the canvas is not 250 x 250, you deny it. You can also check the "referrer" value in the user agent, however it can be easily changed.