Mengamankan URL Preview di Laravel dengan devaspid/laravel-url-preview

Ketika membangun aplikasi web modern seperti portal berita, platform crowdfunding, atau media sosial fitur URL Preview (seperti yang ada di WhatsApp atau Twitter/X) sering kali dibutuhkan. Fitur ini secara otomatis menampilkan judul, deskripsi ringkas, gambar utama, dan ikon favicon ketika sebuah tautan ditempel ke dalam konten.

Namun, di balik kemudahannya, fitur scraping URL menyimpan celah keamanan serius jika tidak ditangani secara benar, yaitu ancaman Server-Side Request Forgery (SSRF). Penyerang dapat memasukkan URL internal (seperti http://localhost atau IP server internal) untuk memicu server membaca data sensitif.

Untuk menyelesaikan masalah ini dengan aman, cepat, dan ringan, kami merilis package open-source terbaru: devaspid/laravel-url-preview.

Mengapa Menggunakan Package Ini?

Proteksi SSRF (Whitelist Domain): Hanya domain terpercaya yang dapat di-parse. Tautan di luar whitelist otomatis diabaikan demi keamanan server Anda.
Tanpa Dependensi Berat: Memanfaatkan ekstensi bawaan PHP (DOMDocument dan libxml) serta HTTP Client bawaan Laravel. Tanpa beban library eksternal yang tidak perlu.
Dukungan Dark & Light Mode Bawaan: Dilengkapi komponen Blade siap pakai dengan tampilan modern yang mendukung Tailwind CSS Dark Mode & Light Mode tanpa perlu menginstal plugin CSS tambahan.
Absolute Image Formatter: Otomatis mengubah path gambar relatif (seperti /uploads/banner.jpg) menjadi URL absolut yang valid.
Caching Terintegrasi: Hasil scraping disimpan dalam cache secara otomatis untuk menjaga performa server tetap kencang.

Cara Menggunakan di Proyek Laravel Anda

Langkah 1: Instalasi via Composer

Jalankan perintah berikut di terminal proyek Laravel Anda:

composer require devaspid/laravel-url-preview

Package akan otomatis terdaftar melalui fitur auto-discovery Laravel.

Langkah 2: Publikasi Konfigurasi

Publish file konfigurasi url-preview.php ke folder config/ proyek Anda:

php artisan vendor:publish --tag="url-preview-config"

File config/url-preview.php akan terbentuk seperti berikut. Anda dapat menyesuaikan daftar domain yang diizinkan (allowed_domains):

return [
    /*
    |--------------------------------------------------------------------------
    | Whitelist Domain
    |--------------------------------------------------------------------------
    |
    | Hanya domain yang terdaftar di bawah ini yang akan di-scrape.
    |
    */
    'allowed_domains' => [
        'asp.web.id',
        'blog.asp.web.id',
        'youtube.com',
        'youtu.be',
        'instagram.com',
    ],

    /*
    |--------------------------------------------------------------------------
    | Durasi Cache (Jam) & HTTP Timeout (Detik)
    |--------------------------------------------------------------------------
    */
    'cache_ttl'  => 24,
    'timeout'    => 3,
    'powered_by' => 'devASPid',
];

Langkah 3: Mengambil Metadata di Controller

Di Controller atau Livewire Component, gunakan UrlPreviewFacade untuk mengambil metadata dari URL. Jika URL ada di dalam teks panjang (seperti deskripsi berita/campaign), gunakan Regex untuk mengekstraknya terlebih dahulu:

namespace App\Http\Controllers;

use Devaspid\UrlPreview\UrlPreviewFacade as UrlPreview;
use App\Models\CampaignUpdate;

class CampaignController extends Controller
{
    public function show($id)
    {
        $update = CampaignUpdate::findOrFail($id);

        // Ekstrak URL pertama dari deskripsi teks/WYSIWYG
        preg_match('/https?:\/\/[^\s"\'<>]+/i', $update->description, $matches);
        $url = $matches[0] ?? null;

        // Ambil Open Graph metadata (kembali null jika domain tidak ada di whitelist)
        $previewData = $url ? UrlPreview::fetch($url) : null;

        return view('campaign.show', compact('update', 'previewData'));
    }
}

Langkah 4: Menampilkan Card Preview di Blade View

Anda dapat menampilkan kartu preview yang rapi secara instan menggunakan Blade Component atau @include:

Sintaks Blade Component:

<!-- Teks Berita/Campaign -->
<div class="prose dark:prose-invert">
    {{ $update->description }}
</div>

<!-- Card Preview URL -->
<x-url-preview-card :data="$previewData" />

Sintaks Include Standar:

@include('url-preview::preview-card', ['data' => $previewData])

Struktur Data Hasil Scraping

Method UrlPreview::fetch($url) mengembalikan struktur array JSON seperti di bawah ini yang siap diproses:

{
  "title": "About Us - Inside devASPid",
  "description": "Inside devASPid tech blog and updates",
  "image": "https://blog.asp.web.id/wp-content/uploads/2025/09/blog.asp_.web_.id_.small_.webp",
  "site_name": "blog.asp.web.id",
  "icon": "https://www.google.com/s2/favicons?domain=blog.asp.web.id&sz=64",
  "url": "https://blog.asp.web.id/about-us/",
  "powered_by": "devASPid"
}

Kustomisasi Tampilan (Opsional)

Jika Anda ingin mengubah desain kartu preview sesuai dengan branding website Anda, publish file tampilan Blade-nya dengan perintah:

php artisan vendor:publish --tag="url-preview-views"

File template akan disalin ke resources/views/vendor/url-preview/preview-card.blade.php dan dapat dimodifikasi sebebasnya.

Kesimpulan & Kontribusi

Package devaspid/laravel-url-preview dirancang untuk memberi keseimbangan antara keamanan sistem dan kenyamanan antarmuka pengguna (UX).

Proyek ini bersifat open-source di bawah lisensi MIT. Anda dapat melihat kode sumber, memberikan masukan, atau berkontribusi langsung di repository GitHub kami:

👉 GitHub Repository: devaspid/laravel-url-preview

Dukung pengembangan proyek-proyek open-source kami dengan memberikan Bintang (⭐) di GitHub!

Maintained with ❤️ by devASPid.

🌐 https://asp.web.id | 🤝 devASPid Volunteer Program