Package: Livewire Access

By @samuel · 2021-08-30 14:09

Package: Livewire Access

A few months ago, I built a package that I use in pretty much all of my Livewire applications.

The package lets you control whether properties & methods are accessible from the frontend using more than just public/protected.

You can have public properties that are inaccessible from the frontend. This will make them readonly.

And similarly, you can have public methods that are inaccessible from the frontend, which will let you call the component methods from anywhere in your code — but not the frontend.

This becomes very useful for complex components that deal with a lot of (potentially sensitive) data and use more advanced abstractions.

Here's an excerpt from the package's README — if you'd like to read the rest, visit the repo on GitHub: archtechx/livewire-access.


This acts as a layer on top of Livewire's public-check logic, but gives you much more fine grained control.

Why use this?

Sometimes, you may want allow access to a component's property in PHP — outside the component — while not allowing access from the frontend. For that, you can use the WithImplicitAccess trait. Frontend access will be enabled for all properties by default, but you can disable it for a specific property (or method).

Other times, you may simply want more assurance than Livewire provides out of the box. The WithExplicitAccess trait is made for that. It disables all frontend access, and requires you to manually enable it on specific properties/methods.

The second option is recommended, because it provides the most security benefits. Accidentally making methods public is common, and it can cause security issues. Disabling implicit access can be especially useful on teams with junior engineers who don't yet have a full understanding of Livewire's internals, but can be very productive with it.

Practical use case

Say you have a component with the following method:

public function getItemsProperty()
{
    return [
      ['secret' => false, 'name' => 'Item 1'],
      ['secret' => true, 'name' => 'Item 2'],
      ['secret' => true, 'name' => 'Item 3'],
      ['secret' => false, 'name' => 'Item 4'],
    ];
}

In the Blade template, you want to loop through the items and only display the non-secret ones.

@foreach($this->items->filter(...) as $item)

However, the entire dataset will be accessible from the frontend, even if you're not rendering any of the secret items.

The user can easily fetch the Livewire component in Developer Tools and make a call like this:

component.call('getItemsProperty');

It will return all of the data returned by the getItemsProperty() method in PHP.

Screenshot

You may think that in this case, you should just make the method protected/private. However, that would make it inaccessible from the Blade template. Even though Livewire uses $this in the template, it's accessing the object from the outside.

Which means that although Blade templates are completely server-rendered, and let you access any PHP code in a secure way, you cannot access many of the properties or methods of Livewire components without making them public, which can cause unexpected data leaks.

With this package, you can keep the property public and access it anywhere in PHP, while completely blocking any attempts at accessing it from the frontend.

  • By @snapey · 12 hours ago

    you cannot access many of the properties or methods of Livewire components without making them public

    which is a good case for resolving the property in the render method and passing it to the view rather than setting public a public property?

    • By @snapey · 12 hours ago

      can't edit a typo... one to many 'public' at the end of the sentence