SolidJS•10mo ago

Handle user interactions to send backend

I would like to know what are methods that can handle identification of user interaction points like post by post id, comment by comment id etc. HTML ID attribute can be use for add specific id to identify but I think some developers use different methods. Therefore I would like to what are methods do you use for that, what are best practices and security methods.

10 Replies

bigmistqke•10mo ago

Question is not clear to me. What are u trying to do?

iNdraOP•10mo ago

Example: Social media wall, It loads many posts and each post has many comments. When user add new like or comment to a specific post, need to send it into backend for update a database. So that information need to include Post ID, Comment ID and other details to identify a specific post. How developer store those data in frontend? Possible methods are use HTML ID and data- attributes to store post and comment ID data. Then when user like or comment a specific post, can get post identification details from those HTML attributes. is this method good method? What is the best practice, and what are security methods to use for that? When use HTML ID and data- attributes to store ID data in specific post, anybody can get this information by looking at codes using dev tools and can use artificial JS injection to update post likes and comments. I think there are other good methods available with security. that is ask this.

Brendonovich•10mo ago

Since this is the solidjs discord the usual way you’d do that is by loading the posts and comments in js and then using that data to render, so when you need to update something you already have the id of the thing you’re modifying as part of a createResource or component props or some other place No need to hold the state in HTML since the data is already loaded in js

iNdraOP•10mo ago

I also consider using solidjs and load data in JS. "you already have the id of the thing" where is the ID store? that is what my question. When ID is available, others things can do. So that ID can be mention in HTLM ID or data- attribute. When this method use anybody can seeID and can inject js. Maybe this is a simple question. When button click, can get ID value (123) from ID attribute (<div id="123"></div>). If this ID value is same as database ID value, anybody can get ID and send data to that API endpoint to update database using JS injection.

Brendonovich•10mo ago

where is the ID store?

as i said, props or createResource or a store or signal or any other place you could store a value like if you added comments with a form you could do this

function Post(props: { data: Post }) {
  return (
    <div>
      ... // post stuff
      <form onSubmit={(e) => {
        addComment(
          props.data.id, // post id from props
          // comment data
        )
      }}>
        <input />
        <button>Add Comment</button>
      </form>
    </div>
  )
}

function Post(props: { data: Post }) {
  return (
    <div>
      ... // post stuff
      <form onSubmit={(e) => {
        addComment(
          props.data.id, // post id from props
          // comment data
        )
      }}>
        <input />
        <button>Add Comment</button>
      </form>
    </div>
  )
}

If this ID value is same as database ID value, anybody can get ID and send data to that API endpoint to update database

this is just generally true, you don't need JS injection to do it someone could call fetch in the browser console, or use Postman/Hoppscotch to send the same request as your website does

iNdraOP•10mo ago

I can block messages come from Postman/Hoppscotch using Cross-origin resource sharing (CORS) blocking. But can not block messages come from browser console.

Brendonovich•10mo ago

I can block messages come from Postman/Hoppscotch using Cross-origin resource sharing (CORS) blocking

no, they can just fake being your website since CORS just relies on headers

iNdraOP•10mo ago

so what is the good method with security to do this? to reduce some injections can use CORS, custom headers, IP check and use HTTP/2s binary in server side. I am looking frontend best practice method using solidjs. Store or signal use for each post and comment, RAM usage will increase. Maybe some developers use separate array to match ID and real ID. When user click user visible ID get and match to get real ID then send to API endpoint.

Brendonovich•10mo ago

so what is the good method with security to do this?

you can't really avoid it, anyone can impersonate being your website no matter how complicated you make it. rate limiting on your servers is usually a good idea though.

Store or signal use for each post and comment, RAM usage will increase.

well if you're doing client-side rendering or server side + client hydration then you need the data there, that's how most solid sites work

Maybe some developers use separate array to match ID and real ID. When user click user visible ID get and match to get real ID then send to API endpoint.

then someone can impersonate that too. if you're exposing a server to the open internet then you can't stop people from making requests to it and impersonating your website

iNdraOP•10mo ago

Thank you for information

Gaming

Programming

Handle user interactions to send backend