آیا یک صفحهی وب که در ظاهر بینقص است، میتواند ساختارهای شکسته، تصاویر بدون دسترسی و کدهای مخرب را در دل خود پنهان کند؟ برای مقابله با «توهم تکمیل» که معمولاً همراه با کدهای فرانتاند تولیدشده توسط هوش مصنوعی است، یک گردشکار دقیق در ۲۹ سپتامبر ۲۰۲۶ در وبسایت dev.to منتشر شد.
بسیاری از توسعهدهندگان چون خروجی مدل در مرورگر درست نمایش داده میشود، به آن اعتماد میکنند؛ اما این نگاه، معناشناسی (Semantics) و امنیت کد را نادیده میگیرد. همانطور که در تحلیل قبلی ما دربارهی نحوه بازبینی تغییرات کد توسط کاربران VS Code اشاره کردیم، در اینجا تمرکز از منطق کلی به دامهای خاص HTML و CSS تغییر میکند. این چالش با ظهور منطقهای متقاعدکننده اما غلط در کدنویسی ماشینی تشدید شده است که لایهی جدیدی از پیشغربالگری را ضروری میکند.
تصور کنید تکه کدی را در سایت اصلی خود قرار دهید و ناگهان متوجه شوید یک دستور JavaScript غیرمنتظره اجرا شده یا سایت برای تمام کاربران موبایل از کار افتاده است. برای جلوگیری از این اتفاق، سازندهی HTML Online Viewer یک فرآیند تأیید هفتمرحلهای را پیشنهاد میکند. این متد از تبدیل یک روتین بازبینی شخصی به یک چکلیست و افزودن یک آزمایشگاه کدنویسی AI به پروژه شکل گرفته است.
توهم تکمیل
هوش مصنوعی زاینده (Generative AI) — مثل نقاشی که سریعاً یک منظره زیبا میکشد اما شاید فراموش کند درهای خانه را بکشد — میتواند در ثانیهها صفحهای بسازد که کامل به نظر برسد. اما صفحهای که «تمامشده» مینماید، ممکن است حاوی تگهای باز، تصاویر بدون متن جایگزین یا کدهایی باشد که هرگز قصد اجرای آنها را نداشتید. هدف از بازبینی ساختاریافته، بیاعتمادی مطلق به هر خط کد نیست، بلکه کوچک کردن فرآیند بازبینی است تا توسعهدهنده واقعاً آن را انجام دهد.
به عنوان مثال، صفحهای برای «روز سلامت جامعه» را در نظر بگیرید. در نگاه اول درست رندر میشود، اما سه خطای بحرانی دارد: یک تگ پاراگراف که دو بار باز شده (<p>...<p>) و بسته نشده است، تصویری بدون توصیف alt و لینکی که بهجای انتقال به مقصد، دستور javascript:alert('Hello') را اجرا میکند. این موارد هنگام اسکن سریع پاسخهای طولانی هوش مصنوعی بهراحتی نادیده گرفته میشوند.
گام ۱: جداسازی پیشنمایش
هرگز کدهای HTML ناشناخته را مستقیماً در صفحهی اصلی قرار ندهید. از یک قاب پیشنمایش ایزوله (Sandboxed) استفاده کنید تا دسترسی کد به سایر بخشهای اپلیکیشن محدود شود. این مرز مانع از اجرای تصادفی اسکریپتهای مخرب هنگام بررسی چیدمان میشود.
یک محیط ایزوله تنها یک مرز ایمنی است، نه یک تضمین مطلق. اگر کد به اسکریپتهای شخص ثالث، فرمها، سیستمهای ورود (Logins) یا دادههای خصوصی وابسته است، باید قبل از فعالسازی، آنها را بخوانید. هرگز رمز عبور، کلیدهای API یا اطلاعات مشتریان را در کدی که کاملاً بازبینی نشده، قرار ندهید. در ابزار HTML Online Viewer، پیشنمایش در یک قاب مجزا اجرا میشود تا ویرایش در مرورگر ایمن بماند.
گام ۲: تأیید ساختار سند
ابتدا وجود تگهای ضروری را بررسی کنید: <!doctype html>، <html lang="en">، <meta charset="UTF-8">، <meta name="viewport" content="width=device-width, initial-scale=1"> و یک عنوان (<title>) مشخص و کاربردی.
مطمئن شوید هر تگ باز، تگ بستهی متناظر خود را دارد؛ زیرا هوش مصنوعی اغلب بهاشتباه تگهای بسته را با تگهای باز جایگزین میکند. برای مثال، تبدیل <p>Free health checks at the town hall.<p> به <p>Free health checks at the town hall.</p> خطای ساختاری را رفع میکند که شاید بصری نباشد. به یاد داشته باشید که ابزارهای فرمتکننده (Formatter) برای نمایش تو رفتگیها و نقاط بسته شدن تگها مفید هستند، اما هرگز فرض نکنید که فرمت کردن، معنای واقعی سند را اصلاح کرده است.
گام ۳: بازرسی URLها و کدهای اجرایی
در کد بهدنبال رشتههای پرخطر بگردید که نشاندهندهی منطق اجرایی یا اتصالات خارجی هستند:
- تگهای
<script>و عبارتjavascript: - رویدادهای
onclick=وonerror= - تگهای
iframeوform - توابع
fetch()وlocalStorage
این موارد لزوماً مخرب نیستند، اما هر کدام نیاز به توضیح دارند. از خود بپرسید: این اسکریپت، تصویر، فرم یا فریم با کدام دامنه ارتباط میگیرد؟ آیا کلیک روی این دکمه کدی را اجرا میکند که در برچسب بصری آن ذکر نشده است؟ آیا این ویژگی در صورت حذف کدهای شخص ثالث همچنان کار میکند؟
اگر لینکی تظاهر به انتقال به صفحه دیگر میکند اما در واقع اسکریپتی را اجرا میکند، آن را با یک مسیر واقعی جایگزین کنید، مثلاً: <a href="/reserve">Reserve a place</a>. اگر هنوز صفحهای وجود ندارد، تنها زمانی از دکمههای معمولی استفاده کنید که جاوااسکریپت یک اقدام کاملاً تعریفشده را فراهم کند.
گام ۴: بررسی معنایی و دسترسیپذیری
هوش مصنوعی اغلب ظاهر را بر معنا ترجیح میدهد. مطمئن شوید صفحه دقیقاً یک تگ <h1> دارد و سطوح تیترها (Heading levels) ساختار بخشها را توصیف میکنند، نه اینکه فقط برای بزرگ کردن متن استفاده شده باشند.
- عناصر تعاملی: باید لینک یا دکمه باشند، نه تگهای
<div>قابل کلیک. - کنترلهای فرم: باید برچسبهای (Labels) قابل مشاهده داشته باشند.
- تصاویر: باید متن
altمفید داشته باشند تا معنا را منتقل کنند (مثلاً:alt="پرستاران در حال خوشآمدگویی به بازدیدکنندگان در یک رویداد سلامت جامعه"). تصاویر تزئینی بایدalt=""باشند تا توسط صفحهخوانها نادیده گرفته شوند. - ناوبری کیبورد: فوکوس باید هنگام استفاده از کلید Tab، قابل مشاهده باشد و ترتیب بصری را دنبال کند. برای تأیید دسترسیپذیری، سعی کنید تمام کنترلها را فقط با کیبورد پیمایش کنید.
گام ۵: تست استرس چیدمان
پیشنمایش دسکتاپ کافی نیست. صفحه را در سناریوهای مختلف تست کنید:
- عرض صفحه: عرض گوشیهای کوچک، تبلت و دسکتاپ عریض.
- زوم: زوم ۲۰۰ درصدی مرورگر.
- محتوای حدی: استفاده از تیترهای بهشدت طولانی یا تصاویری که در دسترس نیستند.
- شبکه: منابع خارجی کند یا مسدود شده.
به دنبال اسکرول افقی، دکمههای بریدهشده یا متنهای همپوشان بگردید. کنسول مرورگر ممکن است خطاهای لود نشدن تصاویر یا اسکریپتهایی را فاش کند که در طراحی بصری پنهان ماندهاند.
گام ۶: اعتبارسنجی رفتار
تمام لینکها را باز کنید و فرمها را با ورودیهای درست و غلط ارسال کنید. حالتهای خالی (Empty States) را فعال کرده و صفحه را ریلود کنید. اگر ویژگی خاصی دادهها را ذخیره میکند، بررسی کنید در صورت نبود فضای ذخیرهسازی چه اتفاقی میافتد و تأیید کنید که دادهها به کجا ارسال میشوند.
در مورد جاوااسکریپتهای تولیدشده، مسیر واقعی کد را قبل از کلیک روی دکمه بخوانید. برچسب «تولید گزارش» به شما نمیگوید که کد در حال دانلود یک فایل است، دادهها را به یک سرویس ارسال میکند یا هر دو کار را انجام میدهد.
گام ۷: تکرار کنترلشده
از بازنویسیهای کلی توسط AI پرهیز کنید، زیرا اغلب یک باگ را رفع کرده و باگ دیگری ایجاد میکنند. بهجای آن، این حلقه کوتاه را دنبال کنید:
۱. یک مشکل مشاهدهشده را توصیف کنید.
۲. کوچکترین بخش مرتبط را تغییر دهید.
۳. دوباره پیشنمایش بگیرید.
۴. تستهای کیبورد، موبایل و خطا را تکرار کنید.
۵. قبل از تغییر بعدی، نسخهی سالم را ذخیره کنید.
این گردشکار نقش توسعهدهنده را از یک «مهندس پرامپت» به یک «حسابرس کیفیت» تغییر میدهد. در این مسیر، ثبت دقیق دلایل پذیرش یا رد هر تغییر حیاتی است، چرا که برچسبهای بازبینیشده بدون ثبت ردپای تصمیمات عملاً بیمعنا هستند و منجر به تکرار خطاها میشوند. با نگاه به خروجی AI بهعنوان یک پیشنویس و نه محصول نهایی، استانداردهای امنیتی و دسترسیپذیری حفظ میشود که ابزارهای خودکار اغلب آنها را نادیده میگیرند.
چکلیست پیش از انتشار
قبل از اینکه یک صفحه ساخته شده با AI از محیط پیشنمایش خارج شود، موارد زیر را تأیید کنید:
- تمام URLها و اسکریپتهای خارجی را درک میکنم.
- سند دارای doctype، زبان، charset, viewport و عنوان مفید است.
- تگهای باز و بسته با هم مطابقت دارند.
- ترتیب تیترها ساختار صفحه را منتقل میکند.
- تصاویر دارای متن جایگزین مناسب هستند.
- لینکها و دکمهها اقدامات خود را توصیف میکنند.
- فوکوس کیبورد به تمام کنترلهای تعاملی میرسد.
- چیدمانهای گوشی، تبلت، دسکتاپ و زوم دچار سرریز (Overflow) نمیشوند.
- حالتهای خالی، نامعتبر و نبود منابع منطقی هستند.
- هیچ رمز یا داده خصوصی در سورس کد جاسازی نشده است.
- نسخه نهایی پس از آخرین تغییر تست شده است.
محدودیتهای این گردشکار
یک پیشنمایش مرورگر و بررسی سینتکس نمیتواند تضمین کند که صفحه کاملاً امن یا صحیح است. کدهای سمت سرور، وابستگیها (Dependencies)، احراز هویت، جریانهای پرداخت و سیاستهای خاص سازمانی نیازمند بازبینی تخصصی خود هستند. ابزارهای خودکار دسترسیپذیری نیز مشکلاتی را نادیده میگیرند که فقط یک انسان در حین انجام واقعی تسک متوجه آنها میشود. از این چکلیست بهعنوان یک بازبینی اولیه قوی استفاده کنید، نه بهعنوان جایگزینی برای تخصص امنیتی یا دامنه.
برای یک توسعهدهنده، این به معنای صرف پنج دقیقه اضافی برای هر صفحه است تا از ساعتها دیباگ کردن کرشهای محیط Production یا دعاوی حقوقی مربوط به دسترسیپذیری جلوگیری شود. برای اجرای این متد، میتوانید از یک ویرایشگر HTML اختصاصی با پیشنمایش زنده استفاده کنید یا راهنمای جامع «پیشنمایش ایمن HTML تولید شده توسط AI» را دنبال کنید.
گام بعدی شما
- از یک ویرایشگر HTML با پیشنمایش زنده و ایزوله برای تست کدهای AI استفاده کنید.
- برای هر صفحه، یک بار تمام تعاملات را فقط با کیبورد (Tab و Enter) تست کنید.
- در صورت استفاده از اسکریپتهای خارجی، دامنه مقصد را در لیست سفید امنیتی خود بررسی کنید.
اما داستان سختافزاری این تحول حتی شگفتانگیزتر است — به تحلیل ما دربارهی تراشههای Blackwell مراجعه کنید.
گفتگو