Prevent form injection with JavaScript?

Question

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.

There is nothing you can do to avoid this client-side. You can only handle it server-side. — Brad
– Brad, Commented Aug 25, 2013 at 3:47

Brad Christie · Accepted Answer · 2013-08-25 04:28:46Z

1

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:

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

answered Aug 25, 2013 at 4:28

Brad Christie

102k16 gold badges160 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Corcoran · Accepted Answer · 2013-08-25 04:21:35Z

0

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.

answered Aug 25, 2013 at 4:21

James Corcoran

3202 silver badges5 bronze badges

1 Comment

user2712640 Over a year ago

I understand this. Example of how to do this serverside maybe?

Collectives™ on Stack Overflow

Prevent form injection with JavaScript?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related