Client side validation of png file in javascript
up vote
0
down vote
favorite
I have a simple web application to manipulate image files in the browser.
It is entirely client side. I had some questions about the safety of the operation here : Is this client side application secure?
I want to validate the files to make sure only allowed formats can be 'uploaded'. I put uploaded in quotations because, I'd like to repeat, everything happens on the client side in javascript.
PNG files specifically
I am learning about the structure of png files and I am thinking of using the fileReader object and the method readAsArrayBuffer() to read the bytes of the png file so that I can evaluate the first 8 bytes of the header (137 80 78 71 13 10 26 10) along with the chunk types (like IHDR, IDAT, IEND etc.) and the CRCs. In fact I have already done so but it isn't a part of my web app. Basically, when a user tries to 'upload' a file, my app would spot check some key bytes of the file and determine roughly 'OK, this is a png file. It's ok to work with this file'.
Would this be a good enough validation?
My reasoning for this precaution, even to this whole thing is client-side, is to protect an unsuspecting end user who might 'upload' a file that looks like a png, but which actually contains some harmful script with it.
If this isn't sufficient, I'm hoping someone can point me in such a direction so that I will know what does constitute a proper validation.
javascript file validation security png
asked Nov 11 at 23:14
Jozurcrunch
10229
add a comment |
up vote
0
down vote
favorite
I have a simple web application to manipulate image files in the browser.
It is entirely client side. I had some questions about the safety of the operation here : Is this client side application secure?
I want to validate the files to make sure only allowed formats can be 'uploaded'. I put uploaded in quotations because, I'd like to repeat, everything happens on the client side in javascript.
PNG files specifically
I am learning about the structure of png files and I am thinking of using the fileReader object and the method readAsArrayBuffer() to read the bytes of the png file so that I can evaluate the first 8 bytes of the header (137 80 78 71 13 10 26 10) along with the chunk types (like IHDR, IDAT, IEND etc.) and the CRCs. In fact I have already done so but it isn't a part of my web app. Basically, when a user tries to 'upload' a file, my app would spot check some key bytes of the file and determine roughly 'OK, this is a png file. It's ok to work with this file'.
Would this be a good enough validation?
My reasoning for this precaution, even to this whole thing is client-side, is to protect an unsuspecting end user who might 'upload' a file that looks like a png, but which actually contains some harmful script with it.
If this isn't sufficient, I'm hoping someone can point me in such a direction so that I will know what does constitute a proper validation.
javascript file validation security png
asked Nov 11 at 23:14
Jozurcrunch
10229
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a simple web application to manipulate image files in the browser.
It is entirely client side. I had some questions about the safety of the operation here : Is this client side application secure?
I want to validate the files to make sure only allowed formats can be 'uploaded'. I put uploaded in quotations because, I'd like to repeat, everything happens on the client side in javascript.
PNG files specifically
I am learning about the structure of png files and I am thinking of using the fileReader object and the method readAsArrayBuffer() to read the bytes of the png file so that I can evaluate the first 8 bytes of the header (137 80 78 71 13 10 26 10) along with the chunk types (like IHDR, IDAT, IEND etc.) and the CRCs. In fact I have already done so but it isn't a part of my web app. Basically, when a user tries to 'upload' a file, my app would spot check some key bytes of the file and determine roughly 'OK, this is a png file. It's ok to work with this file'.
Would this be a good enough validation?
My reasoning for this precaution, even to this whole thing is client-side, is to protect an unsuspecting end user who might 'upload' a file that looks like a png, but which actually contains some harmful script with it.
If this isn't sufficient, I'm hoping someone can point me in such a direction so that I will know what does constitute a proper validation.
javascript file validation security png
asked Nov 11 at 23:14
Jozurcrunch
10229
I have a simple web application to manipulate image files in the browser.
It is entirely client side. I had some questions about the safety of the operation here : Is this client side application secure?
I want to validate the files to make sure only allowed formats can be 'uploaded'. I put uploaded in quotations because, I'd like to repeat, everything happens on the client side in javascript.
PNG files specifically
I am learning about the structure of png files and I am thinking of using the fileReader object and the method readAsArrayBuffer() to read the bytes of the png file so that I can evaluate the first 8 bytes of the header (137 80 78 71 13 10 26 10) along with the chunk types (like IHDR, IDAT, IEND etc.) and the CRCs. In fact I have already done so but it isn't a part of my web app. Basically, when a user tries to 'upload' a file, my app would spot check some key bytes of the file and determine roughly 'OK, this is a png file. It's ok to work with this file'.
Would this be a good enough validation?
My reasoning for this precaution, even to this whole thing is client-side, is to protect an unsuspecting end user who might 'upload' a file that looks like a png, but which actually contains some harmful script with it.
If this isn't sufficient, I'm hoping someone can point me in such a direction so that I will know what does constitute a proper validation.
javascript file validation security png
javascript file validation security png
asked Nov 11 at 23:14
Jozurcrunch
10229
asked Nov 11 at 23:14
Jozurcrunch
10229
edited Nov 11 at 23:38
asked Nov 11 at 23:14
Jozurcrunch
10229
asked Nov 11 at 23:14
Jozurcrunch
10229
asked Nov 11 at 23:14
Jozurcrunch
10229
10229
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40
add a comment |
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254196%2fclient-side-validation-of-png-file-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53254196%2fclient-side-validation-of-png-file-in-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
You can never trust data you receive from clients. Server-side validation provides actual security, client-side validation provides a nice experience for your end users. Remember with JavaScript that it executes in the Client's browser. They can turn off JS or modify it to pass whatever checks you create. Clients could also use tools like BurpSuite to modify traffic after JS executes, but before the POST data gets sent to your server.
– staples
Nov 11 at 23:32
I suppose the user could turn off js but that would turn off not only the validation mechanism but also the whole app. They wouldn't be able to upload anything since everything gets triggered by either input type='upload' + fileReader or drag/drop + fileReader.
– Jozurcrunch
Nov 11 at 23:40