livewire-access icon indicating copy to clipboard operation
livewire-access copied to clipboard

Prevent all frontend access to explicit properties

Open titonova opened this issue 3 years ago • 7 comments

First of all, I love your work, it's been a lifesaver.

However, I have a little issue. Currently, setting a component with WithExplicitAccess prevents public methods from being called and public properties from being modified in the frontend.

However, what if you want to prevent the public properties from being accessed by the frontend whatsoever. That is Livewire.first().myProperty should not return the value of myProperty whatsoever, but you still want Blade to be able to securely access the property?

titonova avatar Sep 02 '22 06:09 titonova

However, what if you want to prevent the public properties from being accessed by the frontend whatsoever

Then they wouldn't be part of the component state.

You can use protected properties for this.

stancl avatar Sep 02 '22 15:09 stancl

I understand what you mean. But here's an example.

<livewire:api-delete-button api-name="CommercialAPI' api-key="134235476576876"/>

Here, I want the value of the api-key to be able to passed to the livewire tag as a property, but at the same time, I DON'T want it to be accessible in the front-end whatsoever. I could easily just set $apiKey as protected , however, doing so would prevent api-key from being able to be set in the livewire tag

titonova avatar Sep 02 '22 15:09 titonova

I think it will get passed down if the property exists/is accepted in mount() of that component. It just won't be part of the shared data, so it will only be present there on the first render. Components become self-managed after that, so you'd need to find a way to fetch the API key inside the child component.

stancl avatar Sep 02 '22 15:09 stancl

I think it will get passed down if the property exists/is accepted in mount() of that component

Yeah, didn't work for me at all.Immediately I changed the property from public to protected, it threw an error That's why Im having this issue. Maybe, I'm doing something wrong. If you could share a minimal example of it working, that'll be great

titonova avatar Sep 02 '22 16:09 titonova

Passing the value is irrelevant anyway, because of this:

Components become self-managed after that, so you'd need to find a way to fetch the API key inside the child component.

You need to find a way to fetch the value inside the child component and set it as a protected property on mount/hydrate. It can't be public because then it becomes part of the component state shared with the frontend.

stancl avatar Sep 02 '22 16:09 stancl

I'm sorry, what do you mean child component, in this case

titonova avatar Sep 02 '22 16:09 titonova

<livewire:api-delete-button api-name="CommercialAPI' api-key="134235476576876"/>

stancl avatar Sep 02 '22 17:09 stancl