Jane Code Life

Posted on Aug 14

How to Automatically Secure Your Livewire 4 Components From Client-Side Tampering

#laravel #livewire #security #php

Livewire Secure Properties 🔒

👉 View on GitHub: janecodelife/livewire-secure-properties

An elegant, zero-configuration security package for Laravel Livewire 4 that automatically locks all public component properties from client-side manipulation, unless explicitly marked as unlocked.

✅ Auto-lock properties

✅ Zero configuration

✅ Protects against client-side tampering

✅ Unlock specific properties with #[Unlocked]

✅ Supports Livewire 4 (Single & Multiple File)

Requirements

Livewire ^4.0

Installation

You can install the package via composer:

composer require janecodelife/livewire-secure-properties

Usage

1. Single File Components (SFC)

If you are using Livewire 4's native Single File Components layout, you can safely use the #[Unlocked] attribute inside the anonymous class block:

<?php

use Livewire\Component;
use JaneCodeLife\LivewireSecureProperties\Unlocked;

new class extends Component {
    // ✅ Secured: Locked by default, any client-side update will throw a Security Violation exception
    public string $role = 'admin';

    // 🔓 UNLOCKED: Updatable from client side via wire:model or client-side requests
    #[Unlocked]
    public string $name = 'Jane Joe';
};
?>

<div>
    <input type="text" wire:model.live="name">
    <p>Name: {{ $name }}</p>
    <!-- This would securely block any client-side update attempts -->
    <input type="text" wire:model.live="role">
    <p>Role: {{ $role }}</p>
</div>

2. Multiple File Components (Class-based)


<?php
use Livewire\Component;
use JaneCodeLife\LivewireSecureProperties\Unlocked;

class UserProfile extends Component
{
    // ✅ Secured: Locked by default, any client-side update will throw a Security Violation exception
    public string $role = 'admin';

    // 🔓 UNLOCKED: Updatable from client side via wire:model or client-side requests
    #[Unlocked]
    public string $name = 'Jane Joe';

    public function render()
    {
        return view('livewire.user-profile');
    }
}

Configuration

If you need to disable the package globally during specific environments (e.g., local debugging), you can add this environment variable to your .env file:

LIVEWIRE_SECURE_PROPERTIES_ENABLED=false

💖 Support

☕☕☕☕ Support me by coffee via USDT ☕☕☕☕

Network: TRX Tron (TRC20)
Address: TAFFjBP39Z86weL5dDU1A2251VrgPprDUj

Upcoming 🚀 (Stay Tuned!)

The Ultimate Neovim Config for Modern Web & Laravel Devs ⚡

I am currently cooking a comprehensive guide and boilerplate configuration on How to turn Neovim into a (Powerful) IDE explicitly optimized for:

Backend & Frameworks: PHP (Intelephense) & Full Laravel & Livewire Integration (With Preformance)
Frontend & Tooling: HTML, CSS, JavaScript, TypeScript, and Livewire SFCs
Speed: Blazing fast autocompletion, lightning-speed code navigation, and fuzzy finding.

DEV Community