Vue.js Güvenlik

yalcin · 2 Eki 2022

Security note
Never depends only in Javascript for security because Javascript code could be tampered by final users. So only use this technique when you also use backend security.

Bu ikidir karşıma çıkıyor bazen Vue.js ile alakalı how to makalelerinde denk geliyor.
Koskoca laravel jetstream diye bir paket çıkarıcak bunuda vue.js ile kullanabilirsiniz diye seçenek ile yayınlayacak ve bu dışarıdan müdaheleyeye açık olacak pek mantıklı gelmiyor, o halde neyi yanlış anlıyorum ?

<div data-page="{"component":"Welcome","props":{"jetstream":{"canCreateTeams":false,"canManageTwoFactorAuthentication":true,"canUpdatePassword":true,"canUpdateProfileInformation":true,"hasEmailVerification":false,"flash":[],"hasAccountDeletionFeatures":true,"hasApiFeatures":false,"hasTeamFeatures":false,"hasTermsAndPrivacyPolicyFeature":false,"managesProfilePhotos":true},"user":{"id":2,"status":0,"username":"testuser","email":"testuser@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":null,"profile_photo_path":"profile-photos\/cE67SLmo33oc1eKufDVT2CulOSLZLEezKDoddhpd.jpg","created_at":"2022-09-30T16:49:24.000000Z","updated_at":"2022-09-30T16:51:04.000000Z","profile_photo_url":"http:\/\/127.0.0.1:8000\/storage\/profile-photos\/cE67SLmo33oc1eKufDVT2CulOSLZLEezKDoddhpd.jpg","profile":{"id":1,"user_id":2,"firstname":"tal\u00e7\u0131n","lastname":"\u00e7oh","created_at":"2022-09-30T16:49:24.000000Z","updated_at":"2022-09-30T16:49:24.000000Z"},"two_factor_enabled":false},"errorBags":[],"errors":{},"canLogin":true,"canRegister":true,"laravelVersion":"9.30.1","phpVersion":"8.1.6"},"url":"\/","version":"2286ba792f1865b3ca620d8512e3872d"}">

</div>

tüm bunları güvenliği anlamak için sorduğumu belirteyim vue.js güvenliğini kastediyorum .

yukardaki sayfa welcome.vue kaynağı neredeyse standart hali birkaç ufak tefek değişiklik var .

"user":{"id":2,"status":0,"username":"testuser","email":"testuser@gmail.com"," diye devem ediyor. user modeline sadece username alanı ekledim gerisi jetstream'in standart olarak ilk kurulumla kaynak kodunda gözüküyor

profile":{"id":1,"user_id":2,"firstname":"tal\u00e7\u0131n","lastname":" şeklinde devam eden satır ise kaydolan kullanıcıya ait hasOne ilişki ile oluşturduğum profil modelinden geliyor daha doğrusu jetstream kullandığım için otomatik olarak $page.props.user da ne varsa basıyor şimdi bunlara dışardan müdahale edilebilir mi ?

Security note
Never depends only in Javascript for security because Javascript code could be tampered by final users. So only use this technique when you also use backend security.

kısaca yukarda ne demek istiyor ?

coder2 · 2 Eki 2022

"this technique" ile kastedilen kısmı da paylaşabilirseniz daha net olur. Google de ilgili metni arayınca bir sonuç bulamadım.

JS nin dışarıdan müdahaleye açık olması konusunda ise; veri gönderirken/gösterirken manipüle edilebilmesi kastediliyor olmalı. Örneğin User modelinde is_admin diye bir alanımız olsa ve kullanıcı profili güncellerken bu alan form da olmasa dahi FE tarafında manipüle ederek bu bilgiyi gönderebilir. Eğer BE tarafında bununla ilgili bir önlem yoksa, validation sadece FE de uygulanıyor ve gelen data direk update işlemine koyuluyorsa adam kendisini admin olarak güncelleyebilir. Buna benzer çok örnek üretilebilir.

yalcin · 2 Eki 2022

Belli bir soruna ait bir alıntı yapmadım tam olarak

coder2 JS nin dışarıdan müdahaleye açık olması konusunda ise; veri gönderirken/gösterirken manipüle edilebilmesi kastediliyor olmalı.

bu dediğinizin cevabını arıyorum . Propslara kullanıcının sahib olduğu "Manager" , "editor" vb.. rollerini aktarıyorum ve bunları components'te kullanıyorum. örneğin v-if ile sahip olduğu role göre Side-barda bir linki görmesini yada görmemesini sağlıyorum . Bu manipüle edilerek Editore ait linkler görülebilirmi ?

Başka bir örnek
"user":{"id":2,"status":0,"username":"testuser","email":"testuser@gmail.com", Jetstream User modele eklenen her alanı $page.props 'a otomatik gösteriyor , 'status ' alanını protected $hidden = ['password', 'remember_token', ]; içine almadığımızı varsayalım çünküstatus = 0bana lazım gizlense bile kullacagım yerde mutlaka propsa almalıyimki ona göre işlem yapayım yani aslında tıpkı yukardaki roller gibi ve eyer JS veri gösterir/gönderirken manipule edilebiliyorsa sürekli propsdaki her verinin güvenliğini düşünmeliyim önce bir controllerden süzmelimiyim ?

Şu önerme için ne düşünüyosunuz

spatie /laravel-permission kullanan biri bu eklentiyi laravel livewire ile kullanıyor ise

@can('edit articles')
  //
@endcan

yada

 
  @hasrole('writer')
    I am a writer!
@else
    I am not a writer...
@endhasrole

gibi blade direktifleri ile sorunsuz ve güvenle kullanabilir iken ....
JS söz konusu ise yada Vue.js söz konusu ise props lara güvenemezsizini birisi çıkar <template v-if="manager"> kısmınını <template v-if="editor"> yapabilir

mgsmus · 2 Eki 2022

yalcin Çok takılmanıza gerek yok. Tarayıcıda çalışan Javascripti daima kozmetik ve kullanıcı deneyimi olarak göreceksiniz ve hiçbir zaman güvenmeyeceksiniz.

yalcin · 2 Eki 2022

: ))) yok takılmak değilde yok evet doğru takılıyorum .
Youtube'da eğlenceli askeri videoları var , askerlerin yaptıkları komik hataları içeren videolar , bi ara merak ettim nasıl olurda bi asker bir bombayla bu denli aptal bir hata yapar diye sonra bir yorumda hafta sonu askerliği diye birşey oldugunu öğrendim. bazı ülkelerde sadece hafta sonu gönüllük gibi bazı temellere dayanan askerlik oldugunu öğrendim bu tarz videolar onlara ait oluyomuş . bende kendimi onlara benzettiğimden yani laravelle tam bi mesaim olmadıgından en azından büyük bi aptallık yapmiyim derdindeyim .
Neyseki bütün Komandolar bu forumda da allah razı olsun arada idare ediyosunuz beni .

BoraN7 · 6 Eki 2022

yalcin

Her zaman çift katmanlı gitmek lazım.

Ön yüzde v-if="hasManager" koşulu varsa, back-end kısmında örneğin Laravel Policy ile de aynı kontrolü yapmanız lazım.

JS tarafını manipüle etse dahi, back-end tarafında gerekli güvenliği sağladığınız sürece sorun olmamalı.

Burada önerilen diğer bir nokta da ; JS tarafına veri gönderirken seçici olmalısınız. Gerçekten gönderilmesi gereken veri gönderin, fazlasını göndermeyin. ( Laravel Resource özelliği burada çok yardımcı oluyor https://laravel.com/docs/9.x/eloquent-resources#concept-overview )

yalcin · 7 Eki 2022

@BoraN7

Eloquent: API Resources kullanmaya gerek yokki zaten hangi verinin gideceğine biz karar veriyoruz . değilmi ?
örneğin :

Route::get('/', function () {
    return Inertia::render('Welcome', [
        'canLogin' => Route::has('login'),
        'canRegister' => Route::has('register'),
        'laravelVersion' => Application::VERSION,
        'phpVersion' => PHP_VERSION,
    ]);
});

Bu yukardaki kod standart Welcome.vue için laravel jetstream ile default olarak gelen kod ve giriş yapmamış kullanıcı için ön yüzde


<div v-if="canLogin" >
            <Link v-if="$page.props.user" :href="route('dashboard')">Dashboard</Link>

            <template v-else>
                <Link :href="route('login')" >Log in</Link>

diye devam ediyor . Gerçi 'canLogin' => Route::has('login'), biraz masum kalıyor ama genede sadece bununla kalmıyor login olmuş kullanıcının birde dashboard linkini göstermeden önce bir v-if daha eklemiş ve ilaveten bunuda eklemişv-if="$page.props.user" böyle bir kullanıcı varsa Dashboard linkini göstermiş .

zaten aslında olayı basitce özetlemiş hoca

mgsmus Çok takılmanıza gerek yok. Tarayıcıda çalışan Javascripti daima kozmetik ve kullanıcı deneyimi olarak göreceksiniz ve hiçbir zaman güvenmeyeceksiniz.

zaman ayırıp verdiğin yanıt havada kalsın istemedim .
'canLogin' => Route::has('login'), yerine daha önemli bişe yaparsam senin örneğine benzer olsun ve şöyle birşeyler gönderelim
'managerrole' =>auth()->user()->hasRole('manager')
'adminrole' =>auth()->user()->hasRole('admin')
gibi saçmalayalım veya bir döngü ile tüm rolleri gönderdiğimizi varsyalalım sadece şu an random sallıyorum : ) bunu yukardaki gibi v-if ile kontrol eder önemli bir link için kullanırsam manager ise şu linki göster admin ise Create butonunu göster gibi ... bişeyleri ön yüzde yaparsam incitirlermiş , tüm bunları yeni öğreniyorumda : )
Bu arada yanıt için teşekkür ederim