Remove ability to edit data if person refreshes page / visits from another tab?

Question

imgur has an interesting feature where

you can create a post using https://imgur.com/upload
after the upload finishes, you will be redirected to the post's page where you can edit the title as much as you want. If you refresh the page / visit it in another tab--the ability to edit the title is gone.

How is Imgur doing this? My guess is cookies are involved somehow, but I'm not sure.

What frameworks do you intend to use? There are quite some posibilities to achieve this. — inetphantom, Jun 03 '22 at 08:45

inetphantom · Answer 1 · 2022-06-03T10:42:49.603

2

With PHP, you can use $_SESSION to achieve this
With JS, you can use localStorage to achieve this
With JS, you can use URLSearchParams to achieve this
with next/react, you can use useState to achieve this

On Create save the id of the editable resource, on Render if it matches enable edit and reset the saved editable id.

You can fake the redirect, which means showing the edit page and putting the view page into the URL
on redirecting, set a cookie: https://remix.run/docs/en/v1/api/remix#redirect

    return redirect(`resource/$id`, {
         headers: {
          "Set-Cookie":  `editable:$id`,
         },
    });

Then, use the Cookie API to check that cookie.

edited Jun 03 '22 at 10:42

answered Jun 03 '22 at 08:48

inetphantom

2,498
4
38
61

Well, all of these are done in the frontend and user can find ways around it - like clearing cookies or simply using another browser. If it's important to not let the user edit the title, you need to handle this in the backend too. – Shahriar Jun 07 '22 at 06:26

score 1 · Answer 2 · answered Jun 08 '22 at 04:24

you can check for the navigation type. see the answer from @Илья Зеленько on https://stackoverflow.com/a/53307588/14250290

the types you're looking for are reload and back_forward you probably want to have something happen in the backend happen as well to prevent a malicious user.

Another option would be to send a token from the backend when a post is made and in order to edit a post that exact token would need to be sent back. Just don't save the token in anything that persists and on a refresh or new tab it'll be yeeted.

score 0 · Answer 3 · answered Jun 07 '22 at 06:22

If you do not want to use cookies or session than one way to achieve this is by using useState. update the state when post is created/upload to true(initially false). When user will refresh the page then that state will automatically be false because the component is rendered just now. Note:- If you do not want to use state you can use redux also to achieve this solution. After that use that state or redux state to to enable/disable the ability to edit the post.

Remove ability to edit data if person refreshes page / visits from another tab?

3 Answers3