كيفية إنشاء أداة من أجل عرض الكود المصدري للمواقع

شرح إنشاء أداة عرض الكود المصدري للمواقع (2025)

في  هذا الموضوع و من خلال مدونة العرائش التقنية سوف نتعرف لماذا يُعتبر الكود المصدري للمواقع المفتاح الرئيسي لفهم كيفية بناء صفحات الإنترنت... [تم الإختصار هنا اختصارًا فقط]

ماهي الأساسيات وما هو الكود المصدري للمواقع؟

العنصر	اللغة المسؤولة	الوظيفة
هيكل الصفحة	HTML	تحديد بنية الصفحة
التصميم	CSS	تنسيق العناصر وتحديد شكلها
التفاعل	JavaScript	جعل الصفحة ديناميكية وتفاعلية
السيرفر	PHP / Node.js	المعالجة على الخادم وإدارة البيانات

لماذا قد تحتاج إلى أداة View Source خاصة بك؟

الميزة	التفاصيل
تخصيص المخرجات	تلوين الكود، تقسيمه، تنسيقه
العمل التلقائي	جلب الكود دون تدخل يدوي
التعلم والاختبار	وسيلة تعليمية رائعة للمطورين
التحليل الأمني	تحليل الثغرات في المواقع
التوسع والتكامل	ربطها مع أدوات تحليل أخرى

ماهي الأدوات والتقنيات المطلوبة

• HTML5
• CSS3
• JavaScript
• PHP أو Node.js
• خادم محلي (XAMPP / Node)
• مكتبة Prism.js أو Highlight.js

إنشاء واجهة أداة كود المصدري 

<form id="sourceForm">
  <input type="text" id="urlInput" placeholder="أدخل رابط الموقع">
  <button type="submit">عرض الكود</button>
</form>
<pre id="outputArea"></pre>

تحسين تصميم أداة الكود المصدري  بإستخدام CSS

#outputArea {
  background: #1e1e1e;
  color: #dcdcdc;
  padding: 20px;
  height: 400px;
  overflow: auto;
  border-radius: 10px;
}

كيفية جلب الكود المصدري عبر JavaScript

document.getElementById('sourceForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const url = document.getElementById('urlInput').value;

  fetch('/get-source.php?url=' + encodeURIComponent(url))
    .then(response => response.text())
    .then(data => {
      document.getElementById('outputArea').textContent = data;
    });
});

شرح إعدادات المعالجة على الخادم (PHP)

<?php
if (isset($_GET['url'])) {
    $url = filter_var($_GET['url'], FILTER_VALIDATE_URL);
    if ($url) {
        $content = @file_get_contents($url);
        if ($content !== false) {
            header("Content-Type: text/plain");
            echo htmlspecialchars($content);
        } else {
            echo "فشل في جلب الكود.";
        }
    } else {
        echo "رابط غير صالح.";
    }
}
?>

كيفية تأمين الأداة

نوع التهديد	الحل
روابط خبيثة	فلترة والتحقق من الرابط
APIs	منع عناوين تحتوي "api"
استغلال السيرفر	حد زمني + تخزين مؤقت
تنفيذ كود ضار	htmlspecialchars

مقارنة أدوات جاهزة

الأداة	مجانية	واجهة احترافية	تنسيق الكود	دعم CSS/JS
view-source.net	نعم	بسيطة	لا	لا
codebeautify	نعم	نعم	نعم	لا
مشروعك	نعم	قابل للتخصيص	نعم	نعم

كيفية التوسع في أداة عرض الكود المصدري

التوسعة	الفائدة
دعم تحميل CSS/JS	تحليل الموارد الخارجية
Highlight.js	تلوين الكود
واجهة API	استخدامها من أدوات خارجية
React/Vue	واجهة تفاعلية

نشر أداة عرض الكود المصدري للمواقع

يمكنك نشر الأداة على GitHub Pages أو Vercel أو أي استضافة تدعم PHP أو Node.js.

خاتمة

إنشاء أداة لعرض الكود المصدري يُعد مشروعًا ممتعًا ومفيدًا ومفتوحًا للتطوير. 

وهذا سواء كنت مطورًا، محلل أمان، أو متعلمًا ذاتيًا، فهذه الأداة ستمنحك تحكمًا متقدمًا في تحليل صفحات الويب.