אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » רשת האינטרנט » הגנה על המשתמשים עם noopener ו-noreferrer

הגנה על המשתמשים עם noopener ו-noreferrer

רן בר-זיק אוגוסט 25, 2019 7:07 am 7 תגובות

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

במאמר הזה אני מסביר על שתי תכונות rel חשובות שבוודאי יצא לכם לראות: noopener ו-noreferrer ולמה חשוב שהן יהיו בכל קישור יוצא שלכם שנפתח בטאב חדש.

noopener

כשאנחנו יוצרים קישור חיצוני לאתר שלנו, הרבה פעמים אנו יוצרים קישור עם target שהערך שלו הוא blank_ – משהו בסגנון הזה:

<a href="https://example.com" target="_blank">קישור רגיל</a>

לחיצה על הקישור הזה פותחת למשתמש טאב חדש. אבל יש משהו טריקי בטאב החדש הזה – יש לו גישה לאובייקט גלובלי בג'אווהסקריפט שנקרא window.opener. האובייקט הזה מאפשר לנו לשנות את כתובת ה-url של מי שמפנה לנו. כן! ממש ככה.

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

בדיוק בשביל זה יש לנו "rel="nopener – מה שהוא עושה זה פשוט מאוד – לא נותן לדף שנמצא בצד השני של הקישור גישה לאובייקט opener.

<a rel="noopener" href="https://example.com" target="_blank">קישור מוגן</a>

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

noreferrer

בעיה נוספת שיש לנו עם קישורים יוצאים היא שאנו מסגירים את ה-referrer שלנו. זה עלול להיות בעייתי אם אנו מקשרים ממערכות רגישות. נכון, אבטחה באמצעות הסתרה היא לא הרעיון הכי טוב – אבל מצד שני – זה לא אומר שאני צריך להפוך את החיים של כל תוקף לחיים קלים. חוץ מזה, אם בצד השני יש סקריפט של פייסבוק, חביבת המדור, אז אני לא רוצה לתת להם בחינם גישה למידע של מאיפה המשתמשים שלי הגיעו. אם אני מציב "rel="noreferrer אז אני מונע מאתר היעד גישה ל-referrer. כל מה שצריך זה:

<a rel="noreferrer" href="https://example.com" target="_blank">קישור מוגן</a>

גם פה הכנתי דף הדגמה פשוט וקל.

בוורדפרס זה קל

בוורדפרס, החל מגרסה 4.7, בכל קישור יוצא מוורדפרס שיש בו "target="_blank יש באופן אוטומטי גם norefferer וגם noopener. קחו למשל את הקישור הזה למשל – בידקו אותו בכלי המפתחים ותראו שיש בו אוטומטית noopener ו-noreffere. אם אתם משתמשים בוורדפרס, אתם מגינים על המשתמשים שלכם. לא משתמשים בוורדפרס? וודאו שהוספת התגיות האלו מתקיימת במערכת שלכם.

<a href="https://hebdevbook.com" target="_blank" rel=

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

כדאי תמיד להשאר מעודכנים! אם יש לכם טלגרם, בדקו את ערוץ הטלגרם של האתר שבו אני מעדכן על פוסטים חדשים 🙂 אם אתם רוצים ללמוד תכנות באופן מקיף ומסודר, הצטרפו לאלפי הלומדים בפרויקט "ללמוד ג'אווהסקריפט בעברית" שמלמד לתכנת בג'אווהסקריפט, ב-Node.js ובריאקט וגם מלמד על תרומה לקוד פתוח. גם ספרים דיגיטליים וגם ספרים מודפסים. בשיתוף הקריה האקדמית אונו ובתמיכת חברות מובילות כגון Wix, Outbrain, Elementor, Iron Source, Chegg, Really Good ועוד.

7 תגובות

  1. משתמש אנונימי (לא מזוהה) הגב אוגוסט 26, 2019 בשעה 1:26 pm

    noreferrer לא עובד בדף הדגמה

  2. פרטיותן הגב אוגוסט 27, 2019 בשעה 3:08 am

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

    • מישהו הגב נובמבר 6, 2019 בשעה 12:11 pm

      לא יודע לגבי הקליינט אבל זה אפשרי ברמת השרת, nginx נניח

  3. לירן הגב ספטמבר 1, 2019 בשעה 8:53 pm

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

  4. מיכה הגב יולי 3, 2020 בשעה 3:49 am

    האם noreferrer noopener מתאים גם לקישורים הפנימיים?

    • משתמש אנונימי (לא מזוהה) הגב יולי 26, 2020 בשעה 10:22 pm

      ???

  5. ליאור הגב יוני 26, 2022 בשעה 1:00 pm

    תוכל בבקשה להסביר מה עדיף לצרכי SEO ?
    NOOPENER
    NOTFOLLOW
    איזה תגית ולמה?

השארת תגובה

ביטול

ללמוד ג'אווהסקריפט בעברית

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-2000 תומכים - בואו ללמוד עכשיו איך לתכנת.

רשימת הנושאים
  • מדריכים
    • ריאקט
    • טייפסקריפט
    • ECMAScript 6
    • ES20XX
    • Node.js
    • Express
    • רספברי פיי
    • Babel
    • docker
    • MongoDB
    • Git
    • לימוד MySQL
    • SASS
    • jQuery
    • CSS3
    • HTML 5
    • SVN
    • LESS
  • פיתוח אינטרנט
    • פתרונות ומאמרים על פיתוח אינטרנט
    • jQuery Scripts
    • jQuery למתקדמים
    • יסודות בתכנות
    • נגישות אינטרנט
  • חדשות אינטרנט
  • מידע כללי על אינטרנט
    • רשת האינטרנט
    • בניית אתרי אינטרנט
  • rss logo

    לכל המאמרים

    לכל המאמרים שפורסמו באינטרנט ישראל משנת 2008 ועד עכשיו.
  • rss logo

    RSS Feed

    משתמשים בקורא RSS? אם כן, עקבו אחרי אינטרנט ישראל באמצעות פיד ה-RSS!
    מה זה RSS?
  • Twitter logo

    עקבו אחרי בטוויטר

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

    ערוץ הטלגרם של אינטרנט ישראל

    בערוץ הטלגרם של אינטרנט ישראל אני מפרסם את הפוסטים של באתר וכן עדכונים טכנולוגיים נוספים.
    מה זה טלגרם?
  • github logo

    הפרויקטים שלי בגיטהאב

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

כל הזכויות שמורות לרן בר-זיק ולאינטרנט ישראל | מדיניות הפרטיות של אתר אינטרנט ישראל | אתר אינטרנט ישראל נגיש לפי תקן WCAG 2.0 AA | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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