קאפצ'ה נגד בוטים - CAPTCHA Against Bots

תמלול ההרצאה: קאפצ'ה נגד בוטים - CAPTCHA Against Bots

הטקסט המלא של הדקות הראשונות בהרצאה «קאפצ'ה נגד בוטים - CAPTCHA Against Bots» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:04

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

2. 00:50

   creation ובואו ניקח כאן create fake fake counts יש לנו פה את הפונקציה הזאת אנחנו רוצים לא לרוץ בבת אחת מפני שהאתר חוסם על ידי dos attack אז הגנה מפני מידוס הטאקס אז אנחנו רוצים to set interval ולהגיד לו תשמע כל שנייה תייצר לנו אג'קס ריקווסט בוא נשים את זה פה ובוא תגלוש רגע יש לי פה שגיאה לא לא לא תשים לי את זה באמת בצורה כזאת כל שנייה תבצע לי אג'אקס ריקווסט ל-API Authentication בואו

3. 02:05

   נראה רגע בקונטרולרים איפה זה רג'יסטר אז יש לנו רג'יסטר נכון ב-API Authentication ורג'יסטר גלוש לכתובת הזאת ושלח לנו כאן איזשהו אובייקט דאטה שהאובייקט הזה מכיל את מה שאנחנו אמורים להכיל ב-registration הרגיל.

4. 02:37

   בואו ניכנס רגע ל-register הרגיל, ולא ל-HTML שלו, ל-JavaScript שלו. האמת, בואו נעתיק את כל זה, זה יהיה רעיון טוב, כי האקר כן יכול להגיע, אפילו את כל זה, האקר כן יכול להגיע ל-JavaScript ולראות איך ה-JavaScript מתנהג, ה-JavaScript כמובן שנמצא ב-client side,

5. 03:02

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

6. 03:12

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

7. 03:43

   כאן, בואו ניקח כאן איזושהי פונקציה כלשהי, function get function random string. תן לי איזה מכרוזת רנדומלית, const str שווה, בואו ניקח סתם math random ונבצע את זה עם מכרוזת ריקה.

8. 04:14

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

9. 04:32

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

10. 04:50

    יש לנו יוזר, אנחנו שולחים את היוזר, הנה פה. בינתיים בואו ניגש לקונטרולרים, נלך ל-out ונדפיס פה console.log של requestBody, מה בעצם מגיע מהלקוח כל שנייה.

11. 05:15

    בואו נעצור את הריצה וננקה, נריץ. ניגש לאתר שלנו, הנה הלחצן test fake account creation ונשים את זה האמת קצת בצד, נלחץ עליו וכל שנייה אנחנו רואים שיש לנו כאן איזה יוזר חדש שנוצר רנדומלי לחלוטין.

12. 05:49

    אוקיי, זה מעניין אבל האם זה משפיע לנו על הדאטאבייס? בואו נראה. נלך לדאטאבייס, נגדיל את זה רגע, נלך לטבלת היוזרים, נרפרש ושימו לב מה יש פה.

13. 06:02

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

14. 06:19

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

15. 06:39

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

16. 06:58

    כן, הפסיק לגמרי. את זה נסגור. כרגע האתר לא רץ. נפתח ונריץ אותו מחדש. Node-up, בכדי שהאפליקציה כן תרוץ, יופי.

17. 07:13

    אז אנחנו רוצים להגן על זה מפני יצירת מידע פיקטיבי. השיטה היום שמאפשרת לבצע הגנה כזאת נקראת קפצ'ה. קפצ'ה זה קיצור של Completely Automated Public Turing Test to Tell Computers and Humans Apart.

18. 07:38

    האמת שפספסתי פה טיפה מה זה. Completely automated public Turing test to tell computers and humans apart. מה זה בעצם הדבר הזה? אז קודם כל מה זה public Turing test?

19. 07:55

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

20. 08:21

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

21. 08:46

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

22. 09:05

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

23. 09:25

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

24. 09:34

    אז לצורך כך יש לנו npm i express session, בואו תתקייני לי את ה-session שנוכל לעבוד איתו, תכף אתם תראו למה אנחנו צריכים אותו. והדבר הבא, האמת בואו קודם כל, אם התקנו את ה-session, בואו נפעיל אותו.

25. 09:59

    אז אנחנו רוצים לבוא לפה, const session require, ויש לנו כאן express session. בשביל להפעיל אותו, הדבר הבא שעשינו היה לשים, איפה זה?

26. 10:21

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

27. 11:10

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

28. 11:48

    נתקין את זה svg זה קונספט של תמונה תמונה מסוג svg תמונה וקטורית כזאת good זה done הדבר הבעיה הבאה שאנחנו רוצים לבצע זה לגשת לאאות' קונטרולר ולהגיד דבר כזה:

29. 12:08

    אנחנו רוצים שכאשר היוזר רוצה לעשות הרשמה, קודם כל צריך לקבל מאיתנו את אותה קפצ'ה. עכשיו, לא כל כך דיברתי על מה זה בעצם קפצ'ה.

30. 12:22

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

31. 12:40

    אז אנחנו רוצים להחזיר לו את אותה התמונה. אז כאן אנחנו בונים ראוט, router.get, כי אני מחזיר לו. בואו נקרא לו קפצ'ה קפצ'ה.

32. 12:54

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

33. 13:14

    אז אנחנו רוצים עכשיו להשתמש ולהשיג תמונה כזאת. אז בואו ניקח פה const svgCaptcha.require svgCaptcha. אנחנו רוצים לבוא לפה ולבצע constcaptcha שווה