CODEWITHSUNDEEP
phpjavascriptajaxhtmlsecurity
user2712640
user2712640

Reputation: 31

Prevent form injection with JavaScript?

I have a page where users must create a custom profile picture using an HTML5 Canvas and JavaScript. The base64 image data of the canvas is stored in a hidden input field element in a form where they enter the rest of their user information. I only want people on the site having their profile pictures made with my JavaScript / Canvas designer, but users are able to go into the Chrome console, or use the address bar, or a user-script to set the contents of the hidden input field to the base-64 image data of their choice (not made with my canvas).

How can I prevent people from doing this? I was thinking maybe some sort of method using AJAX to POST data to a PHP file which sets $_SESSION data, but I can't think of a way to do that which would prevent users from injecting javascript to change the parameter.

Upvotes: 0

Views: 209

Answers (2)

Brad Christie
Brad Christie

Reputation: 101604

Without knowing your environment fluently I'll take a guess.

I'm going to assume you're using some kind of library that allows the user to draw on the canvas (effectively making it mspaint). Assuming that's true you can record each step during the image making process and send it to the server. This now allows three things:

  1. The user ends up with an image they drew.
  2. The server knows it's legit because it's been following along.
  3. Because if bullet 2, the need for a saved canvas result is no longer necessary.

Upvotes: 1

James Corcoran
James Corcoran

Reputation: 320

Don't waste your time trying to figure out how to rely on the client to prevent this sort of unwanted user behavior. If someone wants to do it on the client, they'll figure out a way to do it, and it probably won't take them long. If you want to prevent this user behavior, do it on the server side. That may be easy or not, but at least it's possible. It's simply not possible client-side.

Upvotes: 0

Related Questions