آموزش Wappalyzer؛ چطور بفهمیم هر سایت با چه تکنولوژی‌هایی ساخته شده؟

تا حالا وارد یک سایت شده‌اید و با خودتان گفته‌اید این سایت با چی ساخته شده؟ از چه CMS یا فریم‌ورکی استفاده می‌کند؟ React است یا تکنولوژی دیگری؟ سرویس آنالیز، CDN، ابزار تبلیغات یا درگاه پرداختش چیست؟ برای پیدا کردن جواب خیلی از این سؤال‌ها لازم نیست سورس سایت را خط‌به‌خط بررسی کنید؛ ابزار Wappalyzer بخش زیادی از این کار را برایتان انجام می‌دهد.

Wappalyzer یک Technology Profiler است که با بررسی نشانه‌های قابل مشاهده در یک وب‌سایت، تکنولوژی‌های قابل تشخیص آن را دسته‌بندی و نمایش می‌دهد. این ابزار برای برنامه‌نویس‌ها، طراحان وب، متخصصان سئو، تیم‌های فنی و حتی افرادی که فقط کنجکاوند بدانند سایت‌های معروف از چه ابزارهایی استفاده می‌کنند، بسیار کاربردی است.

Wappalyzer ابزاری برای شناسایی Technology Stack وب‌سایت‌ها است. این سرویس می‌تواند نشانه‌های مربوط به تعداد زیادی از فناوری‌های وب را پیدا کند و آن‌ها را در دسته‌هایی مثل CMS، JavaScript Framework، Analytics، Marketing، Payment Processor، CDN، Security، Advertising و موارد دیگر نمایش دهد.

نسخه افزونه مرورگر Wappalyzer باعث می‌شود هنگام بازدید از یک سایت، بدون خروج از همان صفحه بتوانید لیستی از فناوری‌های شناسایی‌شده را مشاهده کنید. نسخه‌هایی از افزونه برای مرورگرهای مختلف ارائه شده و نسخه Chrome یکی از ساده‌ترین روش‌ها برای استفاده روزمره از این ابزار است.

نوع اطلاعاتی که Wappalyzer نمایش می‌دهد به تکنولوژی‌های استفاده‌شده در سایت و امکان تشخیص آن‌ها بستگی دارد. ممکن است برای یک سایت تعداد زیادی فناوری پیدا شود و برای سایتی دیگر فقط چند مورد نمایش داده شود.

سایت‌ها هنگام بارگذاری اطلاعات زیادی در اختیار مرورگر قرار می‌دهند. HTML، فایل‌های JavaScript، CSS، Headerهای HTTP، Cookieها، Meta Tagها، Scriptها، متغیرهای JavaScript و حتی ساختار DOM می‌توانند سرنخ‌هایی درباره فناوری‌های استفاده‌شده باشند.

Wappalyzer مجموعه بزرگی از Patternها و Fingerprintهای مربوط به فناوری‌های مختلف دارد. ابزار این نشانه‌ها را بررسی می‌کند و در صورتی که Pattern مربوط به یک تکنولوژی را پیدا کند، آن فناوری را در نتایج نمایش می‌دهد. به همین دلیل تشخیص Wappalyzer مبتنی بر شواهدی است که از بیرون سایت قابل مشاهده هستند.

استفاده از افزونه Wappalyzer پیچیدگی خاصی ندارد. بعد از نصب افزونه کافی است سایتی را که می‌خواهید بررسی کنید باز کنید و روی آیکون Wappalyzer در نوار ابزار مرورگر بزنید.

افزونه Wappalyzer را روی مرورگر خود نصب کنید. بعد از نصب بهتر است آیکون آن را Pin کنید تا هنگام بررسی سایت‌های مختلف سریع‌تر به آن دسترسی داشته باشید.

وارد سایتی شوید که می‌خواهید Technology Stack آن را بررسی کنید. برای مثال می‌توانید یک فروشگاه اینترنتی، وب‌اپلیکیشن، سایت خبری یا وب‌سایت شرکتی را باز کنید.

روی آیکون افزونه کلیک کنید. Wappalyzer اطلاعاتی را که توانسته درباره سایت شناسایی کند داخل یک پنل نمایش می‌دهد و فناوری‌ها را در دسته‌بندی‌های مختلف قرار می‌دهد.

به‌جای اینکه فقط به نام یک تکنولوژی نگاه کنید، دسته‌بندی آن را هم بررسی کنید. مثلاً React ممکن است در بخش JavaScript Frameworks دیده شود، یک ابزار آمارگیری در Analytics و یک درگاه یا سرویس مالی در Payment Processors قرار بگیرد.

اگر Wappalyzer برای یک سایت React را نمایش دهد، یعنی نشانه‌هایی پیدا کرده که با Fingerprint مربوط به React مطابقت دارند. ممکن است کنار آن فناوری‌های دیگری مثل React Router، کتابخانه‌های انیمیشن، ابزارهای Analytics یا سرویس‌های مختلف هم نمایش داده شوند.

وجود یک فناوری در خروجی Wappalyzer لزوماً به این معنی نیست که تمام سایت فقط با همان تکنولوژی ساخته شده است. یک وب‌سایت مدرن می‌تواند هم‌زمان از ده‌ها سرویس، کتابخانه، ابزار مارکتینگ و زیرساخت مختلف استفاده کند.

گاهی بله، اما نه همیشه. کد بک‌اند روی سرور اجرا می‌شود و مرورگر کاربران معمولاً سورس اصلی آن را دریافت نمی‌کند. بنابراین اگر سایت نشانه‌ای مثل Header، Cookie، URL Pattern یا Fingerprint مشخصی از زبان یا Framework بک‌اند باقی نگذارد، ابزارهای سمت کاربر نمی‌توانند با قطعیت آن را تشخیص دهند.

مثلاً ممکن است Wappalyzer بتواند فناوری‌های Frontend، CMS، CDN، Analytics و سرویس‌های مختلف یک سایت را تشخیص دهد اما هیچ اطلاعات قطعی درباره زبان اصلی Backend نشان ندهد. این رفتار کاملاً طبیعی است.

می‌توانید بدون Wappalyzer هم سورس صفحه، Network، Cookieها، Scriptها و Headerهای یک سایت را با Developer Tools مرورگر بررسی کنید. تفاوت اصلی این است که Wappalyzer بسیاری از Patternهای شناخته‌شده را از قبل می‌شناسد و نتیجه را سریع و دسته‌بندی‌شده نمایش می‌دهد.

برای یک توسعه‌دهنده، بررسی Technology Stack سایت‌های مختلف فقط از روی کنجکاوی نیست. می‌توانید سایت‌هایی با طراحی یا عملکرد جذاب را بررسی کنید و بفهمید از چه Frameworkها و Libraryهای قابل تشخیصی استفاده کرده‌اند.

فرض کنید یک مشتری سایتی را به‌عنوان نمونه به شما نشان می‌دهد و می‌گوید چیزی مشابه آن می‌خواهد. قبل از شروع پروژه می‌توانید سایت نمونه را با Wappalyzer بررسی کنید و بفهمید چه تکنولوژی‌هایی از بیرون قابل تشخیص هستند.

همچنین هنگام تحویل گرفتن یک پروژه قدیمی یا بررسی سایتی که اطلاعات فنی آن در دسترس شما نیست، Wappalyzer می‌تواند یک نقطه شروع سریع برای شناخت ساختار فنی قابل مشاهده سایت باشد.

Wappalyzer فقط برای برنامه‌نویس‌ها نیست. متخصصان سئو و دیجیتال مارکتینگ نیز می‌توانند از اطلاعات تکنولوژی سایت برای شناخت بهتر رقبا استفاده کنند. ابزارهای Analytics، Tag Manager، تبلیغات، CRM و سرویس‌های مارکتینگ قابل تشخیص می‌توانند اطلاعات مفیدی درباره Stack بازاریابی یک کسب‌وکار بدهند.

در بعضی نتایج ممکن است Wappalyzer میزان اطمینان خود از تشخیص یک فناوری را نمایش دهد. این موضوع نشان می‌دهد Pattern پیدا‌شده با چه سطحی از اطمینان به آن تکنولوژی نسبت داده شده است.

اگر یک فناوری با Confidence پایین‌تر نمایش داده شود، بهتر است برای تصمیم مهم فقط به همان نتیجه تکیه نکنید و نشانه‌های دیگر را هم از طریق DevTools یا مستندات عمومی سایت بررسی کنید.

تشخیص ندادن یک فناوری دلایل مختلفی دارد. بعضی سایت‌ها نام فایل‌ها و Headerهای خود را تغییر می‌دهند، بعضی ابزارها فقط در شرایط خاص بارگذاری می‌شوند و بعضی فناوری‌ها اصولاً اطلاعات قابل تشخیص زیادی در Frontend باقی نمی‌گذارند.

خیر. Wappalyzer ابزار بسیار مفیدی برای Technology Detection است اما نتیجه آن را نباید به‌عنوان حقیقت قطعی درباره تمام معماری یک سایت در نظر گرفت. تشخیص بر اساس Fingerprint و اطلاعات قابل مشاهده انجام می‌شود و امکان False Positive، تشخیص ناقص یا عدم تشخیص یک فناوری وجود دارد.

یک CMS Detector معمولاً فقط تلاش می‌کند سیستم مدیریت محتوا را تشخیص دهد، اما Wappalyzer محدوده بسیار گسترده‌تری دارد. علاوه بر CMS، می‌تواند تعداد زیادی فناوری در دسته‌های مختلف مثل Frameworkها، Ecommerce، JavaScript Library، Analytics، Marketing، Payment، CRM، CDN و سرویس‌های دیگر را شناسایی کند.

یکی از بهترین روش‌های یادگیری توسعه وب این است که فقط روی پروژه خودتان تمرکز نکنید. سایت‌های بزرگ، استارتاپ‌ها، فروشگاه‌ها و سرویس‌هایی که هر روز استفاده می‌کنید را بررسی کنید و ببینید چه ابزارهایی در کنار هم قرار گرفته‌اند.

ممکن است متوجه شوید سایتی که ظاهر ساده‌ای دارد پشت صحنه از مجموعه‌ای از Frameworkها، ابزارهای Analytics، CDN، سرویس‌های امنیتی و Marketing استفاده می‌کند. همین بررسی‌ها به مرور شناخت شما از اکوسیستم واقعی وب را بیشتر می‌کنند.

اگر فقط می‌خواهید یک دید سریع از Technology Stack داشته باشید، Wappalyzer معمولاً شروع بسیار خوبی است. اما برای تحلیل عمیق Performance، Security، Network یا معماری داخلی پروژه باید از ابزارهای تخصصی‌تر هم استفاده کنید.

برای مثال Wappalyzer ممکن است تشخیص دهد یک سایت React استفاده می‌کند، اما درباره کیفیت کد React، نحوه State Management، معماری Componentها، منطق Backend یا ساختار Database اطلاعات کاملی به شما نمی‌دهد.

Wappalyzer یکی از آن ابزارهایی است که بعد از نصب احتمالاً بارها از آن استفاده خواهید کرد. هر زمان با سایتی روبه‌رو شوید که طراحی، عملکرد یا امکاناتش برایتان جالب باشد، با چند کلیک می‌توانید بخشی از Technology Stack قابل تشخیص آن را مشاهده کنید.

مهم‌ترین نکته این است که Wappalyzer را به‌عنوان یک ابزار Technology Profiling ببینید، نه دستگاهی که با قطعیت تمام کدهای مخفی سایت را آشکار می‌کند. بخشی از فناوری‌های Backend یا معماری داخلی یک سایت از سمت مرورگر قابل مشاهده نیستند و نتیجه ابزار هم باید با همین محدودیت تفسیر شود.

اگر می‌خواهید نحوه استفاده از افزونه و بررسی عملی تکنولوژی یک سایت را ببینید، ویدیوی ابتدای همین مقاله را مشاهده کنید؛ Wappalyzer و روش استفاده از آن به‌صورت تصویری معرفی شده است.