darkdendrin
What is the simplest way to safely manage client backend calls and sensitive data in Razor Pages?
Hi all! I’m working on a simple practice document editor web app using Razor Pages for practice, where users can edit and save plaintext documents (my goal is to basically make a rudimentary clone of Google Docs). My application has three pages, starting with a login page. After logging in, users see a landing page with a list of document names. Clicking a name opens the editor, which has a textarea for input and a "Save" button, along with a modal to prompt saving if they attempt to leave without saving.
Currently, I’m stuck on how best to structure the PageView/PageModel and associated JS script file for the PageView to handle these types of backend calls efficiently on the client JS. My goals are to:
- Make a backend call to save changes, which I believe would require both the document ID and textarea content on the front end so the method knows which document is being saved.
- Decide where to store the document ID for safe access on the front-end PageView so I can use it in a fetch call—such as in a hidden div or an HTML data attribute—and understand best practices around storing IDs or other sensitive data in the front end.
- Implement fetch GET/POST requests to a Page Handlers without causing a page redirect.
What is the standard approach here for something like this in Razor Pages? Specifically, what kind of sensitive data should be on the front end to make a secure backend API call, and what’s the best way to structure this in Razor Pages? Or is there some other established design patter to do something like this?
Thank you!
(This question also applies to other applications with concurrent backend calls and user operations, such as social media sites like Instagram and Reddit and design tools like Canva and Photoshop. I feel there’s a knowledge gap in efficiently implementing these features and properly referring to this type of architecture.)
5 replies