I'm developing a React web app where the user can input a .csv of their transaction data, and the app will output useful analysis that will inform their future purchase decisions.
I'm planning to use an input component for the user to input their csv file, then I'll save it in the app's state and use it for analysis
const [csv, setCsv] = useState<FileList | null>();
const handleOnSubmit = () => {
if (csv) {
//Convert csv to json
//Sort and output useful data or something here
}
};
<input
type="file"
name="csv_upload"
accept=".csv"
onChange={(e) => {
setCsv(e.target.files);
}}
/>
<button type="button" onClick={handleOnSubmit}>
Analyze
</button>
As you can see, this is something I definitely don't wanna mess up because it's dealing with sensitive data. My knowledge of attacks in the web dev world only includes SQL injections and DoS, but that's about it. I'm not planning to use a back-end server for this, so I'm not sure if an attacker can still obtain these sensitive data from the client side unless they get a hold of the user's pc.
I'm also thinking about encrypting the data as well, but I'm not sure how well that's gonna work because the encrypt and decrypt function are gonna be in the same place (there's only the client side, so only 1 place where the code will live in) so it's like locking the door then leaving the key right next to it...
- Are there any possible attacks an attacker can make on this web app to obtain the user's transaction data? And if so, can you guys suggest some things I can do to prevent that?