Serangan XSS dengan JavaScript/JPEG Polyglot dan Cara Antisipasinya pada Laravel 10


Serangan XSS dengan JavaScript/JPEG Polyglot dan Cara Antisipasinya pada Laravel 10

JavaScript/JPEG polyglot adalah file yang merupakan gabungan dari file gambar JPEG yang valid dan file JavaScript yang valid. Penyerang dapat mengeksploitasi kerentanan pada aplikasi web yang memproses atau menampilkan file gambar sehingga menjalankan kode JavaScript yang disisipkan dalam gambar tersebut. Serangan semacam ini sangat berbahaya jika aplikasi web tidak menangani unggahan file atau tidak menyaring input dengan benar.

 

Cara kerja serangan memanfaatkan XSS dengan JavaScript/JPEG Polyglot

  1. Membuat File Polyglot: Penyerang membuat file yang merupakan JPEG yang valid sekaligus mengandung kode JavaScript yang dapat dieksekusi. Ini melibatkan penyusunan file dengan hati-hati sehingga terlihat seperti gambar asli namun berisi kode skrip yang dapat dijalankan saat ditafsirkan sebagai teks.
  2. Mengunggah File: Penyerang mengunggah file polyglot ini ke aplikasi web yang rentan. Aplikasi mungkin menyimpan dan menyajikan file tersebut tanpa validasi yang memadai.
  3. Menjalankan Payload XSS: Saat file diakses, jika aplikasi tidak menanganinya dengan benar, JavaScript yang disisipkan dapat dieksekusi, mengakibatkan XSS.

 

Mencegah XSS dengan Laravel 10

Laravel menyediakan berbagai fitur bawaan dan praktik terbaik untuk membantu mencegah serangan XSS, termasuk yang melibatkan file polyglot. Berikut adalah cara mengantisipasi dan mengurangi risiko ini:

  1. Sanitasi Input Pengguna: Selalu sanitasi input pengguna, terutama unggahan file. Kelas Request Laravel menyediakan metode seperti validated() untuk memastikan input memenuhi kriteria tertentu.
  2. Validasi Unggahan File: Gunakan aturan validasi Laravel untuk memastikan file yang diunggah adalah tipe yang diharapkan. Anda dapat menggunakan aturan validasi mimes atau mimetypes:

 

script php laravel :

$request->validate([
    'image' => 'required|mimes:jpeg,jpg,png|max:2048',
]);
  1. Menyimpan File dengan Aman: Simpan file yang diunggah di direktori yang tidak dapat diakses publik dan gunakan fasilitas penyimpanan Laravel untuk menyajikan file-file ini dengan aman. Misalnya, simpan file di storage/app dan gunakan rute atau controller untuk menyajikannya.
  2. Content Security Policy (CSP): Implementasikan Kebijakan Keamanan Konten untuk membatasi sumber dari mana konten dapat dimuat. Ini membantu mengurangi risiko menjalankan skrip berbahaya:

 

script php laravel :

// Dalam middleware atau controller
public function setHeaders() {
    header("Content-Security-Policy: default-src 'self'; script-src 'self'; object-src 'none';");
}
  1. Sanitasi Output: Pastikan bahwa data apa pun yang dioutput ke tampilan di-escape dengan benar. Gunakan sintaks {{ }} blade Laravel, yang secara otomatis meng-escape output:

 

script php laravel :

<img src="{{ asset('storage/' . $imagePath) }}" alt="Image">
  1. Pemeriksaan Tipe File: Implementasikan pemeriksaan tambahan untuk memvalidasi tipe file sebenarnya (magic bytes) daripada hanya mengandalkan ekstensi file atau tipe MIME. Ini dapat dilakukan menggunakan kelas finfo PHP atau sejenisnya:

 

script php laravel

$file = $request->file('image');
$finfo = finfo_open(FILEINFO_MIME_TYPE);
$mimeType = finfo_file($finfo, $file->getRealPath());
finfo_close($finfo);
 
if ($mimeType !== 'image/jpeg' && $mimeType !== 'image/png') {
    // Tangani tipe file tidak valid
}
  1. Gunakan Security Library  (Perpustakaan untuk Keamanan): Manfaatkan paket Laravel atau library lain yang menyediakan fitur keamanan tambahan, seperti menangani unggahan file dengan aman.

Contoh Implementasi dalam Laravel 10

Berikut adalah contoh dasar menangani unggahan gambar dengan aman dalam aplikasi Laravel 10:

 

script php laravel :

namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
class ImageController extends Controller
{
    public function upload(Request $request)
    {
        $request->validate([
            'image' => 'required|mimes:jpeg,jpg,png|max:2048',
        ]);
 
        $file = $request->file('image');
 
        // Validasi tipe file
        $finfo = finfo_open(FILEINFO_MIME_TYPE);
        $mimeType = finfo_file($finfo, $file->getRealPath());
        finfo_close($finfo);
 
        if (!in_array($mimeType, ['image/jpeg', 'image/png'])) {
            return back()->withErrors(['image' => 'Tipe gambar tidak valid.']);
        }
 
        $path = $file->store('images', 'public');
 
        return back()->with('status', 'Gambar berhasil diunggah!');
    }
 
    public function show($filename)
    {
        $path = storage_path('app/public/images/' . $filename);
 
        if (!file_exists($path)) {
            abort(404);
        }
 
        return response()->file($path);
    }
}

 

Dengan mengimplementasikan praktik terbaik ini dan memanfaatkan fitur-fitur Laravel, Anda dapat secara signifikan mengurangi risiko serangan XSS yang melibatkan file polyglot JavaScript/JPEG dalam aplikasi Laravel 10 Anda.

 

Kami PT. Teltics Media memiliki pengalaman dan partner terkait keamanan siber, serta membangun aplikasi sesuai standar keamanan . Apabila Anda memiliki kebutuhan terkait keamanan siber (cyber security), jangan ragu untuk menghubungi kami. Tim kami siap memberikan solusi terbaik untuk Anda.mail Silahkan hubungi kami melalui halaman form contact us..yes