ניתוח בקשות באמצעות לשונית ה-network

מדריך לניתוח תנועה בשרת באמצעות לשונית ה-network של כלי המפתחים
סוג הבקשה - במקרה הזה POST

כל דבר שאנו עושים ברשת הוא בעצם קריאה שאנחנו מבצעים לשרת. נכנסים לאתר? קריאה לשרת. ממלאים את הפרטים שלנו בטופס ולוחצים על שליחה? קריאה לשרת. צופים בסרט? הרבה קריאות לשרת. בכל פעם שמתבצעת שליחה או קבלה של מידע מהרשת יש לנו תקשורת עם שרת.

פרוטוקול http הוא לא ׳תמידי׳. כלומר כשאני ניגש לשרת ומבצע קריאה. ברגע שהמידע יורד אלי לאתר, נגמרת הבקשה. אם נקביל את זה לשיחת טלפון, זה כמו שאני מתקשר למישהו, שואל אותו שאלה. הוא אומר לי את התשובה ומנתק. אם אני רוצה לשאול שוב, שאלה זהה או שאלה אחרת, אני צריך ליצור תקשורת שוב.

ההבנה הזו היא הבנה חשובה כאשר אנו מנסים להבין איך אתר אינטרנט עובד. בתחילה אני מכניס את הכתובת (או מקליק על קישור) לאתר. זו קריאה ראשונה. הקריאה הזו מחזירה לי דף אינטרנט וזה הכל. הדפדפן שלי טוען את דף האינטרנט וזהו פה התקשורת נגמרת. עכשיו, יכול להיות שעל דף האינטרנט יש דברים שמייצרים לנו עוד בקשות – למשל בקשות לתמונות או למידע נוסף. זה יכול להיות באמצעות ג׳אווהסקריפט או באמצעים אחרים. העניין הוא שכל בקשה היא בקשה נפרדת ורק אנחנו יוזמים את הבקשות. אתר האינטרנט אינו יכול ליזום תקשורת אלינו בפרוטוקול http. יש פרוטוקולים אחרים שמאפשרים תקשורת דו כיוונית אבל לא http.

כאשר אני נכנס לאתר הזה, אני משגר בקשה ל-internet-israel.com ומקבל תשובה. התשובה הזו היא דף HTML. כשהדפדפן טוען את ה-HTML, יש הוראות ב-HTML לטעון עוד דברים מהשרת. תמונות, דפי HTML נוספים או מידע נוסף. ניתן לראות את זה אם פותחים את כלי המפתחים. הסברתי על כלי המפתחים של כרום בכמה מאמרים אבל גם אם אתם לא מכירים אותו, לחצו על F12 בחלונות או command + shift + i במק. שימו לב שיש כמה לשוניות – ביחרו את לשונית ה-network. מהרגע הזה כל התנועה שלכם תתועד בלשונית.

לשונית ה-network של אינטרנט ישראל
לשונית ה-network של אינטרנט ישראל

כאן אפשר לראות שהבקשה הראשונה היא ל-internet-israel.com והתגובה היא document. זה בעצם מסמך HTML. הוא מבצע קריאות נוספות: לקובץ CSS שקובע את עיצוב המסמך, לתמונות שנמצאות על המסמך וכו׳. בדף הזה אין לי סקריפטים שמבצעים טעינה של תוכן, אבל אם היו כאלו, הם היו נמצאים ברשימה הזו.

ניתן בקלות לראות כל בקשה – מי קרא לה (במקרה של האתר שלנו דף ה-HTML) ולאן היא נשלחה.

ניתוח מקור הבקשה דרך כלי המפתחים
ניתוח מקור הבקשה דרך כלי המפתחים

כאן אפשר לראות שנשלחה בקשה אל wp-content/uploads/2017/07/me200X200-e1499073476304.jpg שזה בדיוק הכתובת של תמונת הפנים שלי המפארת את האתר.

אם מתבצעות קריאות נוספות באתר שלנו, אנו נראה קריאות נוספות בתחתית. שימו לב למשל לכוכבים בתחתית מאמר זה. מדובר בפיצ׳ר שמאפשר לנו לדרג מאמר. כשאנחנו לוחצים על הכוכב, סקריפט מיוחד שולח בשמנו בקשה אל השרת עם כתובת המזהה של המאמר ודירוג. אם לשונית ה-network תהיה פתוחה, אוכל לראות את הבקשה:

בקשת הדירוג שנשלחת לאחר הלחיצה
בקשת הדירוג שנשלחת לאחר הלחיצה – שימו לב לסוג הבקשה – XHR

ה-XHR אומר לנו שמי ששלח את הבקשה הוא סקריפט ג׳אווהסקריפט. הסקריפט הזה הופעל כתוצאה מהלחיצה שלנו במקרה הזה אבל יש עוד לא מעט בקשות XHR שנשלחות גם ללא פעולה מצידנו. אם נלחץ על הבקשה, נוכל לראות פירוט יותר גדול שלה:

פירוט הבקשה - מופיע לאחר הלחיצה
פירוט הבקשה – מופיע לאחר הלחיצה

בפירוט אנחנו ממש נכנסים ל׳קישקע׳ של הבקשה. אנחנו יכולים לראות איזה פרטים נשלחו ב-request ומה השרת שלח בחזרה ב-response.

מה שהשרת שלח בבקשה
מה שהשרת שלח בבקשה

בדוגמה הזו למשל אפשר לראות שהשרת שלח את המזהה של הפוסט ואת הדירוג שלנו. במקרה הזה 5. כאמור רוב הבקשות זה לא איזה מדע טילים אלא מידע שהמשתמש ביקש לשלוח. אם זה למשל תגובה בטוקבק, אנחנו נוכל לחפש ולמצוא את הטקסט של התגובה. כמו בדוגמה הבאה:

שליחת טוקבק בהארץ
שליחת טוקבק בהארץ

יש לפעמים בקשות שנכשלות, ואז נראה אותם בצבע אדום. הבקשות האלו יכולות להכשל בגלל שהשרת המרוחק לא זמין, בעיות חיבור או בגלל שתוסף על הדפדפן בולם את הבקשות האלו. למשל תוספי אנטי פרסום.

אחד הדברים הכי חשובים להבנת בקשות הוא להבין איזה סוג בקשה זו. בגדול יש לנו כמה סוגי בקשות בפרוטוקול. סוג הבקשה הידוע ביותר הוא בקשת GET – שאומר ׳תביא׳. כשאנחנו נכנסים לאתר (כלומר מבצעים בקשה) אנחנו מבצעים בקשת GET. בגדול, בקשת GET היא בקשה לקבלת מידע. אבל כשאנו רוצים לשלוח מידע, מקובל לעשות את זה בבקשת POST. כשלחצנו על הדירוג למשל או שכתבנו את הטוקבק – ביצענו בקשת POST כי אנחנו שלחנו מידע לשרת. אפשר לראות את הסוג של הבקשה גם בפרטי הבקשה בלשונית ה-network.

סוג הבקשה - במקרה הזה POST
סוג הבקשה – במקרה הזה POST

ישנם כמה סוגי בקשות, כמו PUT, DELETE ו-OPTIONS אבל בגדול רוב הבקשות שתראו הן GET שמשמשת למשיכת מידע ואי אפשר להעביר באמצעותן פרמטרים ו-POST שאפשר להעביר באמצעותן פרמטרים לשרת.

אפשר כן לרמות ולשלוח פרמטרים לשרת באמצעות GET. איך? באמצעות ה-URL. כאשר יש לי סימן שאלה, כל מה שאחריו נחשב כפרמטר. למשל: https://internet-israel.com?p=6883. הפרמטר הוא p והערך שלו הוא 6883. אם נסתכל עליו בלשונית נוכל לראות שלמרות שזו בקשת GET, יש לנו פרמטרים שנקראים Query Strings Parameters:

בקשת GET עם פרמטרים שמועברים ב-URL
בקשת GET עם פרמטרים שמועברים ב-URL

ליד כל בקשה נראה גם את הקוד של המענה של הבקשה. יש לא מעט קודים אבל אפשר להסביר אותם באופן הבא (הרעיון של סטיב לוש במקור)
1xx: חכה
2xx: בבקשה
3xx: לך מפה
4xx: you fucked up
5xx: I fucked up

אם זה 301 למשל, זו הפניה מחדש. מי שיצר את הבקשה יקבל מענה אבל לא מהשרת המקורי. בדרך כלל אנחנו נראה בקשה מסוג 200 – תקין. או 403 – לא מאושר. או 404 – לא נמצא וכך הלאה. אם השרת מחורבש הוא יחזיר 500 – לא תקין.

לסיכום – כל בקשה שאנו מבצעים רשומה ולהיות מתועדת בלשונית ה-Network של כלי המפתחים (כל כלי מפתחים). אם אנו פותחים את כל המפתחים ומבצעים את הבקשה אנחנו נראה כל בקשה שהיא ונוכל לשחזר אותה. איך? על זה במאמר הבא.

פוסטים נוספים שכדאי לקרוא

מיקרו בקרים

הפעלת מסך oled קטנטן עם esp32

יצירת מערכת מולטימדיה שלמה בגודל של בול דואר עם מיקרובקר ובעלות של דולרים בודדים. וגם על הדרך נלמד על ת׳רדים

למפתחי ובוני אתרי אינטרנט

מדריך לשאילתות יעילות ל Chat GPT

כל אחד יכול לשאול את GPT, אבל אם תרצו לשאול אותו שאלות על תכנות – יש כמה שיטות וטיפים ליעל את העבודה מולו.

תמונה מצוירת של רובוט שמנקה HTML
יסודות בתכנות

סניטציה – למה זה חשוב

הסבר על טכניקה פשוטה וידועה מאד שאנו מפעילים על מידע לפני שאנחנו מציגים אותו ב-HTML באפליקציה או באתר.

פתרונות ומאמרים על פיתוח אינטרנט

עבודה עם GPT למתכנתים

אני עובד עם GPT כמה חודשים טובים באופן צמוד. הוא כלי חזק וכדאי ממש להשתמש בו, אבל יש לו גם חסרונות ומגבלות שכדאי להכיר.

גלילה לראש העמוד