.Net Core Fetch Kullanımı ve Güvenliği

.Net Core Fetch Kullanımı ve Güvenliği

umutduran

22 Eyl, 2020 04:55

umutduran

Bu yazımda sizlere .Net Core ile bir yazılım yaparken kullanmanız gereken, yani olmazsa olmazımız olan bir apiyi anlatıcam. Fetch razor pages tarafından controllerle iletişime geçmemizi sağlayan bir javascript apisidir. Kullanabilmek için herhangi bir eklenti kurmanıza gerek yoktur ve her tarayıcı rahatça yorumlar.

Fetch Kullanımı

Mesela bir form yapıyoruz fakat bunu form tagı altında yapmayacağız. Çünkü biz bu formun butonuna tıklanıldığında sayfanın yenilenmesini veya yönlenmesini istemiyoruz. O zaman yapmamız gereken fetch kullanmaktır.

HomeController.cs

public string IsimYazdir(){
	//Bu alanda Append ettiğimiz verileri aşağıdaki gibi çekebiliriz.
	return Request.Form["isim"]; 
}

Yukarıdaki gibi string bir değer döndüren fonksiyonumuz var. Bu fonksiyon HomeController.cs dosyasının içerisinde ve biz bunu çağıracağız. Projemize jQuery eklediğimizi varsayarak işlemlere devam ediyorum.

Index.cshtml

<div class="isimGir">
	<input type="text" name="isimInput" id="isimInput"/>
	<span class="yazdir"></div>
	<button type="button" onclick="isimyazdir()">İsmi Yazdır</button>
</div>
<script>
	function isimyazdir(){
		var isimval = $("#isimInput").val();
		var formData = new FormData();
		formData.Append("isim", isimval);
		fetch("/Home/IsimYazdir",{
			method : "POST",
			body : formData
		})
		.then(res => res.text())
		.then(res => {
			$(".yazdir").html(res);
		})
	}
</script>

Yukarıda yaptığımız işlemde .yazdir divinin içerisine yazdığımız değerin HomeController içerisinden dönmesini sağladık. Fetch apisi kullanılarak daha karmaşık işlemler tabiki yapılabilir fakat bu apinin kullanılış tarzıydı. 

Peki bu api ne kadar güvenli ?

Eğer yukarıdaki gibi yapıp bırakırsanız başka bir siteden veya tarayıcının adres satırına yazıldığında yine bir değer döndürecektir. Bunun sebebi değer döndürürken herhangi bir token ile karşılaştırma yapmadık.

Index.cshtml

<div class="isimGir">
	@Html.AntiForgeryToken()
	<input type="text" name="isimInput" id="isimInput"/>
	<span class="yazdir"></div>
	<button type="button" onclick="isimyazdir()">İsmi Yazdır</button>
</div>

Bu alanı bu şekilde güncelliyoruz. AntiForgeryToken kullanarak fetc yapımızın güvenli olmasını ve sadece bizim sitemizden gelecek olan isteklere cevap vermesini sağlayacağız.

Startup.cs

services.AddControllersWithViews(options =>
{
	options.Filters.Add(new AutoValidateAntiforgeryTokenAttribute());
});
services.AddAntiforgery(options =>
{
	options.Cookie.Name = "X-CSRF-TOKEN";
	options.FormFieldName = "CSRF-TOKEN";
	options.HeaderName = "CSRF-TOKEN";
});

Yukarıdaki kodları ilgili .cs dosyasına ekliyoruz. 

Index.cshtml dosyasını aşağıdaki şekilde düzenliyoruz.

<script>
	var token = $("[name='CSRF-TOKEN']").val();
	function isimyazdir(){
		var isimval = $("#isimInput").val();
		var formData = new FormData();
		formData.Append("isim", isimval);
		fetch("/Home/IsimYazdir",{
			method : "POST",
			body : formData,
			headers: {
                    "CSRF-TOKEN": token
             }
		})
		.then(res => res.text())
		.then(res => {
			$(".yazdir").html(res);
		})
	}
</script>

Şimdi sayfada oluşturulan tokeni alıp fetch ile yazılım tarafına gönderdik ve işlemi bu şekilde yaptırdık. Eğer tarayıcıya yazdırıp girmeye çalışırsanız 400 bad request hatası alırsınız. Fakat siteniz çalışacaktır.

 

Aşağıya mail adresini girerek web sitemdeki makalelere abone olabilirsin. İlgini çekecek bir makale yazdığım zaman seni haberdar edebilirim!

Yorum Yap

*HTML kodlarına izin verilmemektedir. Düz metin olarak yorum giriniz.