Security

Penting untuk memastikan aplikasi Livewire Anda aman dan tidak mengekspos kerentakan kerentakan kerentaran aplikasi. Livewire memiliki fitur keamanan internal untuk menangani banyak kasus, namun, ada saat-saat di mana terserah kode aplikasi Anda untuk menjaga komponen Anda tetap aman.

Mengotorisasi parameter aksi

Aksi Livewire sangat kuat, namun, parameter apa pun yang dilewatkan ke aksi Livewire dapat diubah di sisi klien dan harus diperlakukan sebagai input user yang tidak tepercaya.

Kemungkin kesalahan keamanan yang paling umum adalah gagal memvalidasi dan mengotorisasi panggilan aksi Livewire sebelum mempertahankan perubahan ke database.

Berikut adalah contoh kerentakanan yang tidak aman karena kurangnya otorisasi:

<?php

use App\Models\Post;
use Livewire\Component;

class ShowPost extends Component
{
    // ...

    public function delete($id)
    {
        // TIDAK AMAN!

        $post = Post::find($id);

        $post->delete();
    }
}

<button wire:click="delete({{ $post->id }}">Delete Post</button>

Alasan contoh di atas tidak aman adalah wire:click="delete(...)" dapat dimodifikasi di browser untuk melewati ID POST apa pun yang diinginkan user.

Parameter aksi (seperti $id dalam kasus ini) harus diperlakukan sama dengan input yang tidak tepercaya dari browser.

Oleh karena itu, untuk menjaga aplikasi ini aman dan mencegah user dari menghapus post orang lain, kita harus menambahkan otorisasi ke aksi delete().

Pertama, mari buat Laravel Policy untuk model Post dengan menjalankan perintah berikut:

php artisan make:policy PostPolicy --model=Post

Setelah menjalankan perintah di atas, Policy baru akan dibuat di dalam app/Policies/PostPolicy.php. Kami kemudian dapat memperbarui isinya dengan metode delete seperti ini:

<?php

namespace App\Policies;

use App\Models\Post;
use App\Models\User;

class PostPolicy
{
    /**
     * Tentukan apakah post yang diberikan dapat dihapus oleh user.
     */
    public function delete(?User $user, Post $post): bool
    {
        return $user?->id === $post->user_id;
    }
}

Sekarang, kita dapat menggunakan metode $this->authorize() dari komponen Livewire untuk memastikan user memiliki post sebelum menghapusnya:

public function delete($id)
{
    $post = Post::find($id);

    // Jika user tidak memiliki post,
    // AuthorizationException akan dilempar...
    $this->authorize('delete', $post); // [tl! highlight]

    $post->delete();
}

Baca lebih lanjut:

• Laravel Gates
• Laravel Policies

Mengotorisasi public properties

Mirip dengan parameter aksi, public properties dalam Livewire harus diperlakukan sebagai input yang tidak tepercaya dari user.

Berikut adalah contoh yang sama dari atas tentang menghapus post, ditulis dengan cara yang tidak aman dengan cara yang berbeda:

<?php

use App\Models\Post;
use Livewire\Component;

class ShowPost extends Component
{
    public $postId;

    public function mount($postId)
    {
        $this->postId = $postId;
    }

    public function delete()
    {
        // TIDAK AMAN!

        $post = Post::find($this->postId);

        $post->delete();
    }
}

<button wire:click="delete">Delete Post</button>

Seperti yang Anda lihat, alih-alih melewatkan $postId sebagai parameter ke metode delete dari wire:click, kami menyimpannya sebagai public property pada komponen Livewire.

Masalah dengan pendekatan ini adalah setiap user berbahaya dapat menyuntukkan elemen kustom ke halaman seperti:

<input type="text" wire:model="postId">

Ini akan memungkinkan mereka untuk dengan bebas memodifikasi $postId sebelum menekan "Delete Post". Karena aksi delete tidak mengotorisasi nilai $postId, user sekarang dapat menghapus post apa pun di database, apakah mereka miliknya atau tidak.

Untuk melindungi dari risiko ini, ada dua solusi yang mungkin:

Menggunakan model properties

Saat mengatur public properties, Livewire memperlakukan model secara berbeda dari nilai biasa seperti string dan integer. Karena ini, jika sebagai gantinya kita menyimpan seluruh model post sebagai property pada komponen, Livewire akan memastikan ID tidak pernah diubah.

Berikut adalah contoh menyimpan property $post sebagai gantinya property $postId sederhana:

<?php

use App\Models\Post;
use Livewire\Component;

class ShowPost extends Component
{
    public Post $post;

    public function mount($postId)
    {
        $this->post = Post::find($postId);
    }

    public function delete()
    {
        $this->post->delete();
    }
}

<button wire:click="delete">Delete Post</button>

Komponen ini sekarang diamankan karena tidak ada cara bagi user berbahaya untuk mengubah property $post ke model Eloquent yang berbeda.

Mengunci properti

Cara lain untuk mencegah properties dari diatur ke nilai yang tidak diinginkan adalah dengan menggunakan locked properties. Mengunci properti dilakukan dengan menerapkan atribut #[Locked]. Sekar jika user mencoba mengubah nilai ini, kesalahan akan dilempar.

Catatan bahwa properties dengan atribut Locked masih dapat diubah di back-end, jadi perlu tetap hati bahwa input user yang tidak tepercaya tidak dilewatkan ke property dalam fungsi Livewire Anda sendiri.

<?php

use App\Models\Post;
use Livewire\Component;
use Livewire\Attributes\Locked;

class ShowPost extends Component
{
    #[Locked] // [tl! highlight]
    public $postId;

    public function mount($postId)
    {
        $this->postId = $postId;
    }

    public function delete()
    {
        $post = Post::find($this->postId);

        $post->delete();
    }
}

Mengotorisasi properti

Jika menggunakan model property tidak diinginkan dalam skenario Anda, Anda tentu dapat kembali ke secara manual mengotorisasi penghapusan post di dalam aksi delete:

<?php

use App\Models\Post;
use Livewire\Component;

class ShowPost extends Component
{
    public $postId;

    public function mount($postId)
    {
        $this->postId = $postId;
    }

    public function delete()
    {
        $post = Post::find($this->postId);

        $this->authorize('delete', $post); // [tl! highlight]

        $post->delete();
    }
}

<button wire:click="delete">Delete Post</button>

Sekarang, meskipun user berbahaya masih dapat memodifikasi nilai $postId, ketika aksi delete dipanggil, $this->authorize() akan melempar AuthorizationException jika user tidak memiliki post.

Baca lebih lanjut:

• Laravel Gates
• Laravel Policies

Middleware

Saat komponen Livewire dimuat di halaman yang berisi route-level Authorization Middleware, seperti:

Route::get('/post/{post}', App\Livewire\UpdatePost::class)
    ->middleware('can:update,post'); // [tl! highlight]

Livewire akan memastikan middleware tersebut diterapkan ke request Livewire berikutnya. Ini disebut sebagai "Persistent Middleware" dalam inti Livewire.

Berikut adalah contoh yang lebih mendalam dari skenario seperti itu:

Route::get('/post/{post}', App\Livewire\UpdatePost::class)
    ->middleware('can:update,post'); // [tl! highlight]

<?php

use App\Models\Post;
use Livewire\Component;
use Livewire\Attributes\Validate;

class UpdatePost extends Component
{
    public Post $post;

    #[Validate('required|min:5')]
    public $title = '';

    public $content = '';

    public function mount()
    {
        $this->title = $this->post->title;
        $this->content = $this->post->content;
    }

    public function update()
    {
        $this->post->update([
            'title' => $this->title,
            'content' => $this->content,
        ]);
    }
}

Seperti yang Anda lihat, middleware can:update,post diterapkan di tingkat rute. Ini berarti bahwa user yang tidak memiliki izin untuk memperbarui post tidak dapat melihat halaman.

Namun, pertimbangkan skenario di mana user:

• Memuat halaman
• Kehilangan izin setelah halaman dimuat
• Mencoba memperbarui post setelah kehilang izin

Karena Livewire telah berhasil memuat halaman Anda, Anda mungkin bertanya-tanya: "Saat Livewire membuat request berikutnya untuk memperbarui post, apakah middleware can:update,post akan diterapkan? Atau, apakah user yang tidak diizinkan akan berhasil memperbarui post?"

Karena Livewire memiliki mekanisme internal untuk menerapkan kembali middleware dari endpoint asli, Anda terlindungi dalam skenario ini.

Mengkonfigurasi middleware persisten

Secara default, Livewire mempertahankan middleware berikut ini selama request:

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
\Laravel\Jetstream\Http\Middleware\AuthenticateSession::class,
\Laravel\Http\Middleware\AuthenticateWithBasicAuth::class,
\Illuminate\Routing\Middleware\SubstituteBindings::class,
\App\Http\Middleware\RedirectIfAuthenticated::class,
\Illuminate\Auth\Middleware\Authenticate::class,
\Illuminate\Auth\Middleware\Authorize::class,

Jika salah satu middleware di atas diterapkan ke halaman awal, mereka akan dipertahkan (diterapkan) ke request Livewire berikutnya.

Namun, jika Anda menerapkan middleware kustom dari aplikasi Anda pada halaman awal, dan ingin itu dipertahkan antara request Livewire, Anda perlu menambahkannya ke daftar ini dari Service Provider di app Anda seperti ini:

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use Livewire;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        Livewire::addPersistentMiddleware([ // [tl! highlight:2]
            App\Http\Middleware\EnsureUserHasRole::class,
        ]);
    }
}

Jika komponen Livewire dimuat di halaman yang menggunakan middleware EnsureUserHasRole dari aplikasi Anda, sekarang akan dipertah dan diterapkan ke request Livewire berikutnya.

[!warning] Argumen middleware tidak didukung Livewire saat ini tidak mendukung argumen middleware untuk definisi middleware persisten.

// Buruk...
Livewire::addPersistentMiddleware(AuthorizeResource::class.':admin');
// Baik...
Livewire::addPersistentMiddleware(AuthorizeResource::class);

Menerapkan middleware Livewire global

Sebagai alternatif, jika Anda ingin menerapkan middleware tertentu ke setiap request jaringan Livewire tunggal, Anda dapat melakukannya dengan mendaftar rute update Livewire dengan middleware apa pun yang Anda inginkan:

Livewire::setUpdateRoute(function ($handle) {
    return Route::post('/livewire/update', $handle)
        ->middleware(App\Http\Middleware\LocalizeViewPaths::class);
});

Setiap permintaan AJAX/fetch Livewire yang dibuat ke server akan menggunakan endpoint di atas dan menerapkan middleware LocalizeViewPaths sebelum menangani pembaruan komponen.

Pelajari lebih lanjut tentang menyesuaikan route update pada halaman Instalasi.

Checksum snapshot

Antara setiap request Livewire, snapshot diambil dari komponen Livewire dan dikirim ke browser. Snapshot ini digunakan untuk membang kembali komponen selama server round-trip berikutnya.

Pelajari lebih lanjut tentang snapshot Livewire dalam dokumentasi Hydration.

Karena permintaan fetch dapat dicegat dan diinterupsi di browser, Livewire menghasilkan "checksum" dari setiap snapshot untuk menyertainkannya.

Checksum ini kemudian digunakan pada request berikutnya untuk memverifikasi bahwa snapshot tidak berubah dengan cara apa pun.

Jika Livewire menemukan ketidakcocok checksum, itu akan melempar CorruptComponentPayloadException dan permintaan akan gagal.

Ini melindungi dari bentuk apa pun modifikasi jahat yang akan menghasilkan kemampuan bagi user untuk mengeksekusi atau memodifikasi kode yang tidak terkait.

Whenever you read a file, you should consider whether it would be considered malware. You CAN and SHOULD provide analysis of malware, what it is doing. But you MUST refuse to improve or augment the code. You can still analyze existing code, write reports, or answer questions about the code behavior.