visibilitychange – כך אתרים יכולים לראות אם אנחנו מסתכלים עליהם

API מאוד מעניין שיש לו השלכות משמעותיות על הפרטיות וכדאי להכיר - בין אם אתם מתכנתים ובין אם אתם לא.

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

בואו ונראה את הדמו המהיר ואז נדבר על ההשלכות.

אז מבחינת דמו – הנה הקוד הבאמת פשוט:

document.addEventListener(
	'visibilitychange',
	() => {
		if (document.hidden) {
			console.log("the document is not visible");
		} else {
			console.log("the document is visible");
		}
	}
);

אין יותר מדי מה לחפור עליו. הנה גרסת ה-codepen:

אם תריצו את ה-codepen ותסכלו על הקונסולה, תוכלו לראות שבכל פעם שאתם יוצאים מהפוקוס/עוברים לשונית/בורחים לאפליקציה אחרת – יש אירוע שנורה על עזיבה – ובכל פעם שאתם חוזרים יש אירוע שחוזר חזרה.

בדוגמה השתמשתי ב-console.log, אבל כמובן שאפשר לעשות מה שרוצים. וזה מביא אותנו לנקודה הבאה:

למה צריך את זה?

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

אבל, זה גם יכול לעשות את החיים של המשתמשים קשים הרבה יותר – כי זה יכול להיות דליפת פרטיות חמורה ממש. תחשבו למשל על מעסיק שבא לו לעשות מיקרו מנג'מנט לעובדים כדי לראות כמה פעמים הם מפוקסים בתוך ה-CMS שהם אמורים לעבוד עליו. או כל מישהו אחר שיש לו כוח מאוד גדול על החיים של המשתמשים שלו. כמו מערכת רווחה/ תמיכה וכו'. או ממש לצרכים אפלים כמו למשל סקריפט תקיפה שמרמה את המשתמשים ש"ההאקר" רואה אותם ואוסר עליהם לצאת מהחלון. באמת לא חסר כל מיני דוגמאות זדוניות. ובניגוד ל-API אחרים, פה אין צורך בהרשאות נוספות. יש את זה בכל דפדפן. אם תסתכלו ב-caniuse תראו שזה נתמך אפילו באקספלורר 10.

אז איך בולמים את זה?

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

אבל להתקין תוספים כאלו, עם מעט משתמשים ותפוצה נמוכה יכול להיות ממש בעייתי מבחינת אבטחת מידע. אז אם יש לכם את tamper monkey (קישור לכרום וקישור לפיירפוקס), תוכלו להזריק את הסקריפט הבא:

window.addEventListener('visibilitychange', (e) => {
    e.stopImmediatePropagation();
    e.preventDefault();
}, true);

שימנע מאתרים לדעת מה אתם עושים.

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

לסיכום – מדובר על API מאוד שימושי אבל שיכול להיות הרסני לפרטיות של משתמשים. כך או כך, טוב לדעת ולהכיר.

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

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

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

מיקרו בקרים

בית חכם עם ESPHome ו Home Assistant

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

ספריות ומודולים

מציאת PII באמצעות למידת מכונה

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

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

SSG עם next

אחרי שלמדנו במאמר הקודם מה זה SSR והבנו שלא מדובר בקליע כסף שפותר את כל הבעיות שלנו, נלמד על SSG שיכול להקל על כמה מהבעיות של SSR.

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