سرویس اعتبار سنجی w3c
کدنویسی بر اساس نسخه html
از قلم انداختن تگ های اصلی
استفاده نکردن از ویژگی xmlns برای html
استفاده نادرست از تگ های یکتا
استفاده نادرست از تگ های جفتی
استفاده از خاصیت های منسوخ شده
استفاده از جاوا اسکریپت به صورت خطی
استفاده نکردن از خاصیت های الزامی
استفاده از کاراکتر & در آدرس های وب
استفاده از تگ embed
تعریف چندباره id
چینش اشتباه تگ ها درون هم
مشکلات رایج در کدنویسی معتبر و رفع آنها

همان طور که می دانیم، یکی از موارد در بهینه سازی صفحات وب برای موتورهای جستجو (SEO یا Search Engine Optimization) که رعایت آن از اهمیت بالایی نیز برخوردار است، معتبر بودن کدها از نظر سازگاری و تطابق با استانداردهای تعریف شده کنسرسیوم جهانی وب (W3C) است، مفهوم این عبارت این است که صفحات وب باید طبق اصول خاصی کدنویسی شوند و لذا ما به عنوان ایجادگر صفحه، مجاز به استفاده از تگ ها و شیوه های غیر استاندارد نیستیم، اگرچه ممکن است برخی صفحات هرچند با وجود خطاهای فراوان در کدنویسی همچنان قابل استفاده و به ظاهر بی نقص باشند، اما به یاد داشته باشیم وب امروز عرصه رقابت است و سایت ها و وبلاگ هایی می توانند موفق شوند که فاکتورهای مثبت بیشتری در اختیار داشته باشند، به هر صورت این مطلب را اختصاص داده ایم به یادآوری برخی اشتباهات رایج در کدنویسی و راه حل رفع آنها.
سرویس اعتبار سنجی w3c
قبل از پرداختن به اشتباهات رایج کدنویسی و راه حل آنها، باید با سرویس اعتبار سنجی w3c آشنا باشید، این سرویس توسط کنسرسیوم جهانی وب راه اندازی شده و کدنویسی صفحات را در زمینه زبان های HTML، CSS، XHTML و ... سنجش می کند، البته معمولا برای هر دسته از زبان ها یک آدرس مجزا در نظر گرفته شده است که در زیر ملاحظه می کنید:
اعتبار سنجی کدهای HTML، XHTML و...:
validator.w3.org
اعتبار سنجی کدهای CSS:jigsaw.w3.org/css-validator
با مراجعه به سرویس های بالا و درج آدرس صفحات وب یا فایل های css می توانید از معتبر بودن کدها یا اشکالات موجود در آنها مطلع شوید، البته همان طور که اشاره شد، هیچ الزامی برای کدنویسی معتبر نیست و خیلی از صفحات وب پر از خطاهای مختلف هستند که ممکن است تاثیر چندانی هم بر ظاهر آنها نداشته باشد (هر چند بر رتبه آنها در seo کم و بیش تاثیر منفی خواهد داشت)، از طرفی اهمیت معتبر بودن کدهای مربوط به استایل css از معتبر بودن کدهای html کم تر است، چرا که کدهای html مستقیما توسط ربات موتورهای جستجو مورد تحلیل قرار می گیرد و نقش اصلی در پردازش یک سایت یا وبلاگ دارد، اما استایل css عمدتا توسط ربات ها بررسی نمی شود (هر چند در مورد ربات گوگل ممکن است این طور نباشد).نکته 1: با استفاده از قابلیت نصب Add-ons (پلاگین های اضافه شونده) در مرورگر هایی مانند فایرفاکس، گوگل کروم و... می توانید بدون مراجعه مستقیم به سرویس های فوق، از خدمات آنها استفاده کنید.
نکته 2: قبل از هر نوع تغییر در کدنویسی سایت یا قالب وبلاگ، فراموش نکنید که یک پشتیبان از آن تهیه نمائید تا در صورت بروز مشکلات ناخواسته بتوانید وضع را به حالت سابق برگردانید.
کدنویسی بر اساس نسخه html
اولین نکته ای که برای نوشتن کدهای معتبر در وب باید به آن توجه کنیم، نسخه html است که قصد استفاده از آن را داریم، توضیح اینکه زبان html در نسخه های متفاوتی ارائه شده که هر کدام تفاوت هایی با هم دارند، به طور مثال نسخه XHTML 1.0 Transitional با HTML 4.01 Transitional متفاوت است، برای کسب اطلاعات بیشتر می توانید مطلب زیر را مطالعه کنید:
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
از قلم انداختن تگ های اصلی
یکی از خطاهایی که ممکن است سرویس اعتبارسنجی w3c از کد نویسی ما داشته باشد، خطای از قلم انداختن تگ های اصلی است که با عبارت نمونه زیر مشخص می شود:
end tag for "head" which is not finished
این خطا معمولا به دلیل از قلم انداختن تگ های اصلی مانند title است که باید برای صفحه خود یک عنوان با استفاده از تگ title در بین تگ های head تعریف کنید.استفاده نکردن از ویژگی xmlns برای html
یکی دیگر از خطاهای رایج در کدنویسی html، خطای Missing xmlns attribute است:
Missing xmlns attribute for element html. The value should be: http://www.w3.org/1999/xhtml
این خطا معمولا به دلیل تعریف نکردن آدرس استاندارد xhtml در ابتدای تگ html است (زمانی که از نسخه xhtml استفاده می کنید باید در تگ html به مرجع xhtml آن آدرس دهید)، برای رفع آن باید تگ ابتدایی html به صورت زیر باشد:<html xmlns="http://www.w3.org/1999/xhtml">
استفاده نادرست از تگ های یکتا
در نسخه های مختلف html، تگ های یکتایی مانند img، br، meta و... با علامت / در انتهای تگ یا بدون آن بسته می شوند، به طور مثال در xhtml تگ br باید به صورت زیر بسته شود.
<br />
اما همین تگ در html نسخه 5 در حالت استاندارد به صورت زیر بسته می شود (هر چند ممکن است حالت های دیگر نیز مجاز باشند).<br>
حال اگر این تگ ها را در نسخه های متفاوت به صورت غیر استاندارد استفاده کنید خطای نمونه زیر را دریافت خواهید کرد:end tag for "br" omitted, but OMITTAG NO was specified
برای رفع این مورد باید به دنبال تگ مشخص شده در خطا باشید و انتهای آن را با علامت / یا بدون آن ببندید.استفاده نادرست از تگ های جفتی
اکثر تگ های html به صورت جفتی تعریف می شوند، به طور مثال وقتی از بلاک div استفاده می کنید باید به صورت نمونه زیر کد آن را تعریف کنید.
<div>
</div>
اگر به فرض تگ دوم را با علامت / نبندید یا اینکه یکی از تگ ها را به طور کامل از قلم بیندازید، خطای نمونه زیر را دریافت خواهید کرد:end tag for "div" omitted, but OMITTAG NO was specified
استفاده از خاصیت های منسوخ شده
در ابتدای پیدایش html و در نسخه های اولیه برخی از خاصیت های مربوط به جلوه های ظاهری برای تگ ها به صورت خطی قابل استفاده بود، به طور مثال می توانستیم از خاصیت align به طور مستقیم برای چینش عناصر استفاده کنیم، اما به تدریج در نسخه های جدیدتر ویژگی های ظاهری به استایل css منتقل شد و دیگر تعریف آنها به صورت خطی مجاز نیست (البته اگر از DOCTYPE Strict استفاده کنید)، به همین دلیل به جای align باید از text-align استفاده کنیم.
نمونه خطای دریافتی:
there is no attribute "align"
مشابه همین خطا ممکن است در مورد خاصیت border برای تگ img در html نسخه 5 رخ دهد.The border attribute is obsolete. Consider specifying img { border: 0; } in CSS instead.
استفاده از جاوا اسکریپت به صورت خطی
اگر در صفحات خود به صورت خطی (inline) از جاوا اسکریپت استفاده کنید، این کار ممکن است باعث نمایش خطاهای ناخواسته شود، برای جلوگیری از بروز این نوع خطاها درابتدای کدهای خود از تگ CDATA استفاده نمائید، به طور مثال:
<script type="text/javascript">
//<![CDATA[
کد جاوا اسکریپت را در این قسمت قرار دهید
//]]>
</script>
استفاده نکردن از خاصیت های الزامی
زمانی که از یک تصویر در صفحه خود استفاده می کنید، باید در کنار تگ img، خاصیت alt (متن جانشین تصویر) را نیز تعریف کنید، در غیر این صورت ممکن است با خطای زیر مواجه شوید:
An img element must have an alt attribute, except under certain conditions. For details, consult guidance on providing text alternatives for images.
همین مورد ممکن است برای کدهای جاوا اسکریپت نیز اتفاق بیفتد، به طور مثال استفاده از type برای وارد کردن کدهای جاوا اسکریپت الزامی است و لذا مثال زیر اشتباه است:<script>
</script>
نمونه خطای دریافتی:required attribute "type" not specified
کد صحیح:<script type="text/javascript">
</script>
استفاده از کاراکتر & در آدرس های وب
اگر در آدرس های وب (URL) موجود در صفحات سایت یا وبلاگ شما از کاراکتر & استفاده شود، خطای زیر را دریافت خواهید کرد:
& did not start a character reference. (& probably should have been escaped as &.)
برای رفع این خطا باید به جای علامت & از کاراکتر استاندارد ;amp& در تمام لینک ها استفاده کنید، به طور مثال لینک زیر صحیح نیست:<a href="http://www.yoursite.com/?q=1&t=title">link</a>
نمونه صحیح:<a href="http://www.yoursite.com/?q=1&t=title">link</a>
استفاده از تگ embed
اگر چه تگ embed معمولا در صفحات وب برای نمایش کلیپ های فلش، پخش ویدئو، صدا و... مورد استفاده قرار می گیرد، اما جالب است که سرویس اعتبارسنجی w3c آن را معتبر نمی داند و نمونه خطای زیر را ممکن است نمایش دهد:
element "embed" undefined
برای رفع این گونه مشکلات یک راه حل (که به نظر تنها راه حل کاربردی نیز می رسد) استفاده از document.write در جاوا اسکریپت است، بدین صورت کدهایی که باید مستقیم در صفحه قرار گیرند با واسطه جاوا اسکریپت درج می شوند، به طور مثال از کد زیر می توان برای درج کلیپ فلش استفاده کرد بدون اینکه کدنویسی نامعتبر شود:<script type="text/javascript">
/* <![CDATA[ */
document.write('<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" id="flashmovie" width="120" height="90">');
document.write('<param name="flashmovie" value="flashmovie.swf" />');
document.write('<param name="bgcolor" value="#666666" />');
document.write('<param name="quality" value="high" />');
document.write('<param name="seamlesstabbing" value="false" />');
document.write('<param name="allowscriptaccess" value="samedomain" />');
document.write('<embed type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash" name="flashmovie" width="120" height="90" src="flashmovie.swf" bgcolor="#666666" quality="high" seamlesstabbing="false" allowscriptaccess="samedomain">');
document.write('</embed>');
document.write('</object>');
/* ]]> */
</script>
تعریف چندباره id
هر عنصر در صفحات وب مجاز به استفاده از یک id منحصر به فرد است و لذا اگر چند عنصر با یک id در کدنویسی خود داشته باشیم با خطای زیر مواجه خواهیم شد:
ID "div-id" already defined
برای رفع این خطا باید در کد خود به دنبال id های مشترک باشید و برای هر عنصر از یک id منحصر به فرد استفاده کنید.چینش اشتباه تگ ها درون هم
استفاده از تگ ها در html باید طبق استاندارد خاصی انجام شود، به طور مثال درون تگ p که مربوط به پاراگراف است، مجاز به استفاده از تگ div نیستیم.
نمونه خطای دریافتی:
document type does not allow element "div" here; missing one of "object", "applet", "map", "iframe", "button", "ins", "del" start-tag
لذا نمونه زیر اشتباه است:<p><div></div></p>
نمونه صحیح:<div><p></p></div>
به این حالت در اصطلاح تگ های آشیانه ای یا nested می گویند که باید اصول و استاندارد آنها در کدنویسی رعایت شود.در پایان این مطلب یادآور می شویم که خطاهای اعتبارسنجی محدود به موارد گفته شده نیستند، از طرفی اگر سایت یا وبلاگ فعلی شما دارای خطاهای زیادی است ولی با این حال در موتورهای جستجو رتبه خوبی دارد، شاید اصلاح و استانداردسازی کدها چندان هم ضروری نباشد، چرا که خیلی از موارد خطای w3c از دید موتورهای جستجو مشکل جدی تلقی نمی شوند و تنها تعداد خاصی از آنها تاثیر مستقیم بر رتبه سایت یا وبلاگ شما دارند.

رتبه بندی الکسا (Alexa) چیست و چقدر اهمیت دارد؟!
حل مشکل محتوای تکراری (Duplicate Content) در سایت
چگونه سایت یا وبلاگ را برای موتورهای جستجو بهینه سازی کنیم؟
پیج رنک چیست و چگونه می توان آن را افزایش داد؟
مقایسه خطای 404 و کد 301 ریدایرکت (Redirect)


Bad value for attribute aria-describedby on element a: An IDREFS value must contain at least one non-whitespace character
Element style not allowed as child of element div in this context. (Suppressing further errors from this subtree.)
<a href="index.html" id="my-page" aria-describedby="">read more</a>
که در قسمت aria-describedby هیچ متنی تنظیم نشده است و به فرض باید به صورت زیر باشد:aria-describedby="my_link"
خطای دوم مربوط به استفاده از تگ style داخل تگ div در قسمتی خارج از تگ head در صفحه است، به فرض:<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>title</title>
</head>
<body>
<script></script>
<div>
<style>
استفاده اشتباه از تگ استایل
</style>
</div>
</body>
</html>
از نظر استاندارد کدنویسی HTML تگ های style باید صرفا بین تگ های head در صفحه درج شوند و اگر خارج از این چارچوب باشند در ابزارهای اعتبارسنجی خطا نمایش داده می شود، رفع این خطاها به سئو سایت کمک می کند اما اگر از نظر فنی امکان تغییر ساده چینش تگ ها میسر نیست خیلی هم اهمیت حیاتی ندارد و در روند جاری صفحه خللی ایجاد نمی کند (اغلب سایت های وب کم و بیش این خطاها را دارند).دومین مورد برای کدهای html هستش و اینه که من رو سایتم افزونه راکت نصب کردم و الان داره ارور در مورد قابلیت بارگذاری با تاخیر این افزونه میده. من برای سرعت سایتم نیاز دارم که لیزی لود فعال باشه اما از این طرف هم توی بررسی کدهای html این ارور رو میده.
ممنون میشم در مورد این دو مشکل راهنمایی بفرمایید.
https://helpx.adobe.com/robohelp/kb/search-issue-responsive-html5.html
نکته: لطفا پیش از هرگونه تغییری از اطلاعات فعلی پشتیبان داشته باشید.حذف شد
این end slider رو بردارم یا بزارم مشکل هنوز وجود داره اصلا ربطی به این نداره تو کامپیوتر اوکیه فقط تو گوشی وقتی این دکمه زرد مایل به سیاه بیاد درست میشه و بارش برف قطع میشه انگار رو همون جا که بوده هیپنوتیزم میشه بعضی مواقع وبلاگ رو بالا میارم و و اون نقطه نمیاد و وبلاگ میلرزه اینا مهم نیست فقط خواستم بگم این یکمی مشکل رو حل میکنه اما مشکل هنوز وجود داره. درواقع این مشکل با چیزی که گفتین داخل کامپیوتر و لپ تاپم حل شده با فایرفاکس و کروم امتحان کردم دیدم کامپیوتر اوکیه اما با دو تا از گوشی هام که سامسونگ هستن امتحان کردم مشکل برای گوشیم برطرف نشده. یعنی مشکل کجاست خیلی ممنون میشم پیگیری بکنید تشکر. کد خام این قالب به این صورته:حذف شد
😘😘😘حذف شد
دقیقا این end slider که سه تا عکس اول وبلاگ به صورت خودکار میان رو بردارید خطا رو به وضوح مشاهده میکنید ممنون میشم زودتر بگید مشکل کجاس تشکر<style>
html {
overflow-x: hidden;
}
</style>
اگر به هر دلیل مشکل برطرف نشد اعلام کنید که دقیقتر بررسی کنیم.$(document).ready(function(){
$("#chat > a.x1").click(function(){
$("#chat > a.x1").css({"background-color":"red","color":"#FFFFFF"})
})
})
تورو خدا به ایمیلم پیام بدید من بتونم کد درست رو براتون بفرستمتوی هاست دانلود من یه ریشه داریم و داخلش یه فایل index.php و فولدر Files هست و داخل فولدر Files هم تمامی فایل ها یا فرمت zip دارن یا png. حالا من توی ریشه از فایل htaccess زیر استفاده می کنم.
RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
RewriteCond %{HTTP_HOST} ^www.(.+)$ [NC]
RewriteRule ^(.*)$ https://%1/$1 [L,R=301]
RewriteCond %{REQUEST_URI} (/[^.]*|\.(php|zip))$ [NC]
RewriteRule ([a-z0-9_]+) index.php [NC]
# Change default directory pages.
DirectoryIndex index.php
# Prevent viewing of htaccess file.
<Files .htaccess>
order allow,deny
deny from all
</Files>
<files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</files>
# Prevent directory listings
Options All -Indexes
<FilesMatch "\.(asp|aspx|ini|log|sh|zip|php|png)$">
Order Allow,Deny
Deny from all
</FilesMatch>
<Files *.*>
ForceType application/octet-stream
Header set Content-Disposition attachment
</Files>
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ index.php
و توی فولدر Files از htaccess زیر استفاده می کنم.# Prevent viewing of htaccess file.
<Files .htaccess>
order allow,deny
deny from all
</Files>
<files ~ "^.*\.([Hh][Tt][Aa])">
order allow,deny
deny from all
satisfy all
</files>
# Prevent directory listings
Options All -Indexes
<FilesMatch "\.(asp|aspx|ini|log|sh|zip|php|png)$">
Order Allow,Deny
Deny from all
</FilesMatch>
<Files *.*>
ForceType application/octet-stream
Header set Content-Disposition attachment
</Files>
آیا کدها درست هستن؟ و زیادی ننوشتم؟ یا چیزی از قلم بیفته؟ تمامی آدرس ها (چه فایل باشه چه دایرکتوری و ....) همه پاس داده بشه به index.php و از طرف دیگه هیچ فایلی با لینک مستقیم قابل دانلود نیست و تمام فایل ها هم application/octet-stream شدن!!!!راستش خودم هم نفهمیدم چیکار کردم :)
ببخشید. اگه جواب بدین ممنون میشم.
<Files *.*>
ForceType application/octet-stream
Header set Content-Disposition attachment
</Files>
باعث دانلود تمام فایل ها صرف نظر از پسوند آنها می شود که احتمالا با سایر دستورات تناقض دارد (به فرض دانلود مستقیم فایل png مجاز نیست اما با این دستور این فایل باید مستقیما دانلود شود)، در هر صورت تایید کامل کد نیازمند تست و آزمایش و خطا در سرور سایتتان است.من به تازگی یه هاست ویژه دانلود خریدم که امکان استفاده از کدهای PHP رو داره ولی دیتابیس نداره. حالا می خوام کلی فایل با فرمت های مختلف داخلش آپلود کنم که تحت هیچ شرایطی با ورود آدرس مستقیم نشه دانلودشون کرد و همه فایل ها که در فولدر Files هستن به فایل index.php که در ریشه اصلی هست پاس داده بشن و اگه آدرس اصلی فایل رو توی مرورگر بزنیم چیزی نمایش داده نشه (ارور 404 بده یا بر اسای همون فایل index.php رفتار کنه)
طبق تحقیقاتی که کردم مثل اینکه میشه این کار رو با htaccess کرد. اما نمیدونم کدش چی میشه. ممنون میشم راهنماییم کنید.
و آیا htaccess قابل اعتماده و اگه کانفیگش کنیم دیگه کسی تحت هیچ شرایطی به فایل ها دسترسی نداره؟ یا قابل دور زدن هست؟
ممنونم.
من با جنگو کار میکنم و به مشکل خوردم برای استایل دهی از bootstrap استفاده میکنیم من css only رو از bootstrap کپی میکنم و داخل سند html قرار میدم ولی به من ارور میده
میتونید کمک کنید؟
من قصد دارم از یه ادیتور برای صفحات وب خودم و textarea استفاده کنم. تحقیقات زیادی کردم و ادیتورهای مختلفی وجود داره مثل tiny و CK و .... اما ممکنه همشون حملات xss داشته باشند به خاطر همین قصد دارم از ادیتور مارک داون استفاده کنم.
این ادیتور هم نسخه های مختلفی داره.
خواستم ببینم به نظر شما از چه مارک داونی استفاده کنم بهتره؟ و برای تامین امنیت فیلد ورودی با مارک داون، در سمت سرور در php از چه فانکشنی استفاده کنم که اطلاعات به صورت امن و مناسب ذخیره بشن؟
ممنونم. این خیلی برای من حیاتیه و خیلی تحقیق کردم اما به جایی نرسیدم.
در صورتی که با ساز و کار حملات XSS آشنا باشید مشکلی برای استفاده از ادیتورها وجود ندارد، چه از طریق Textarea چه ادیتور و حتی از طریق متد GET امکان حملات XSS وجود دارد، در این حملات معمولا کد اجرایی یا لینک مخرب به ورودی برنامه اضافه می شود و این ورودی بعدا می تواند در جایی از سایت به همان صورت چاپ شده و یک اسکریپت را در مرورگر کاربر اجرا (و به فرض اطلاعات کوکی را سرقت کند) یا کاربر بر روی یک لینک مخرب کلیک و به صفحه هکر هدایت شود.
با این توضیح حملات XSS زمانی تکمیل می شود که ورودی در جایی از برنامه به همان شکل اجرا گردد، لذا برای استفاده از ادیتورها انجام چند گام زیر توصیه می شود:
- تنها ثبت یک سری از تگ های امن HTML مانند br و... مجاز باشد، البته این تگ ها را هم بهتر است در سمت کاربر قبل از ارسال به سرور به یک عبارت اختصاصی (به فرض <-[BR]->) تبدیل کرده و کل ورودی را با توابعی مانند htmlentities از حالت تگ خارج کنیم.
- در صورتی که استفاده از htmlentities مورد نظر نباشد حداقل تگ های اسکریپت، لینک و... باید ایمن سازی شوند.
- قبل از ذخیره اطلاعات در دیتابیس حتما از روش های ایمن سازی مانند Bind و Prepared Statements استفاده کنیم (البته این مورد بیشتر به SQL Injection مربوط می شود اما در مجموعه اقدامات جهت حفظ امنیت سایت مورد نیاز است).
- دقت کنیم که هرکجا متن ارسال شده از سمت یک کاربر برای دیگران چاپ می شود به صورت امن باشد (تگ های اسکریپت با معادل HTML آنها غیرفعال شوند یا آدرس های لینک به صورت متنی و نمایشی چاپ شوند).
یه سوال داشتم
من یه برنامه نوشتم که وقتی تگ a کار میکنه صفحه جدید باز شده سریع عوض میشه و یه صفحه دیگه رو باز میکنه
ایراد از کجاشه ؟؟
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.