#2 - نکات و اصول مهم در طراحی وبسایت
مقالات مرتبط:
نکات و اصول مهم در طراحی وبسایت
نکاتی برای افزایش امنیت وبسایت
#2 - نکاتی برای افزایش امنیت وبسایت
1- از صفت alt در تگهای img و از صفت title در تگهای link استفاده کنید. صفت alt بیانگر خلاصه ای از محتوای تصویر موردنظر هستش.
2- فراموش نکنید که محل جاری آدرسهای Font در فایلهای CSS از همان مسیر Relative فایل CSS شروع می شوند.
3- Link های صفحات را چک کنید و از سالم بودنشان مطمئن بشید.
4- شکل ظاهری صفحات داخلی و جداگانه را با شکل ظاهری صفحات اصلی یکنواخت کنید.
5- به عملا و دیکطه لقاط دغط کینید!
6- برای تگهای Link از صفت title استفاده نمایید.
7- صفحات را از نظر محتوا و کدنویسی بروز کنید.
8- لینک های خارجی را در پنجره/صفحه خودتان باز نکنید.
<a href="http://domain/" target="_BLANK" rel="noopener">Title</a>
9- درخواست های HTTP را به حداقل برسونید.
10- جداول را خارج از Scrollbar مرورگر قرار ندهید. بطوری که اسکرول افقی ایجاد شود.
11- از قرار دادن تصاویر و فایلهای Download/Upload در پوشه اصلی/root سایت خودداری کنید.
12- تصاویر را از سایتهای متفرقه External لود نکنید.
13- حجم و نوع فایلهای Download را به کاربر نمایش دهید.
file.zip - 5 MB
Iran.mp3 - 7 MB
...
14- از استفاده بیش از حد Frame خودداری کنید.
15- کلمات را بصورت حروف بزرگ ننویسید. (این یعنی با صدای بلند حرف زدن)
WHAT IS YOUR NAME?!
16- دائماً از حروف Bold/توپر و اریب/Italic استفاده نکنید.
17- مقدار صفت id برای هر عنصر باید منحصربفرد باشد و تکرار نشود.
18- عرض متون را محدود کنید.
19- تصاویر را برای بزرگ نمایی نکشید.
20- از تعدد رنگ استفاده نکنید.
21- صفحات را در تمام مرورگرها تست و بررسی کنید. IE Firefox Chrome...
22- صفحات را برای رزولوشن های بالا طراحی نکنید.
23- از استفاده بیش از حد پنجره های Popup خودداری کنید.
این پنجره ها بشدت کاربر را آزار میدهند.
24- سایت خود را در موتورهای جستجو و Link directory ها ثبت کنید.
25- چند آدرس و URL قابل حدس و user friendly برای بخشهای مهم سایت ایجاد کنید.
26- همیشه صفت maxlength را به فیلدهای text اضافه کنید.
27- صفتهای فرمها را بصورت کامل بنویسید و بحالت پیشفرض(بدون صفت) رها نکنید.
28- همیشه تصاویر اپلیکیشن را فشرده و optimize کنید تا حجمشان کاهش یابد.
https://github.com/imagemin/imagemin-cli
https://imageoptim.com/versions
https://pmt.sourceforge.io/pngcrush/
(Thanks to Elsa Ferreira 
)
https://websiteplanet.com/webtools/imagecompressor/
Mac OS:
https://github.com/ImageOptim/ImageOptim
https://nukesaq88.github.io/Pngyu/
https://pngquant.org/pngquant.tar.bz2
29- از سیستم های cache برای داده های استاتیک(عکس فایل js فایل css) استفاده کنید.
30- حتاالمکان کدهای JavaScript را بصورت External و از داخل هاست خودتون include کنید.
<script type="application/javascript" src="jquery.js"></script>
31- قابلیت Directory browsing سرور غیرفعال شود.
32- تگهای خالی src و href را حذف کنید.
33- حتاالمکان از expression های CSS استفاده نکنید. (YSlow recommendation)
34- برای کاهش مصرف پهنای باند و افزایش سرعت سایت، همیشه فایلهای CSS, JavaScript, HTML را minify و lint کنید.
CSS:
https://github.com/purifycss/purifycss
https://cssnano.co/guides/getting-started
https://github.com/ben-eb/cssnano-cli
https://github.com/css/csso-cli
https://github.com/uncss/uncss
JS:
https://github.com/nolanlawson/optimize-js
35- استفاده از redirect را به حداقل ممکن برسانید.
36- بصورت هفتگی یا ماهیانه سرعت سایت را آنالیز و ایرادات را رفع کنید:
https://developers.google.com/speed/pagespeed/insights/
https://developers.google.com/web/tools/lighthouse
37- بهتره همیشه آیکون وبسایت را با نام favicon.ico و در پوشه اصلی/root سایت قرار بدید.
بعضی مرورگرها بصورت پیشفرض/Hardcode بدنبال فایلی با این نام و در همین مسیر می گردند.
38-حتماً از validator های W3C برای بررسی و رفع ایرادات کدهای HTML/CSS صفحات خود استفاده کنید.
https://jigsaw.w3.org/css-validator
39- صفحه هات مناسب و user-friendly برای خطاهای 404 کنید.
40- مرورگرها برای تعیین نحوه پردازش URL از نوع MIME صفحه استفاده می کنند و نه پسوند فایل! بنابراین بسیار مهم هست که اسکریپت ها و سرورهای وب، نوع MIME صحیح را در هدر Content-Type درج کنند.
header('Content-Type: application/json');
header('Content-Type: text/plain');
header('Content-Type: application/pdf');
توجه: اگر این مورد درست پیکربندی نشود، مرورگرها به اشتباه به تفسیر محتوای فایلها می پردازند و خروجی سایتها نیز به درستی کار نمی کند، و حتی ممکن است فایلهای load شده مورد سوء استفاده های امنیتی قرار بگیرند.
41- بجای استفاده از input number معمولی(پر باگ) از کد زیر استفاده کنید:
<input type="text" inputmode="numeric" pattern="[0-9]*">
بسیار عالی