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

אני לא אכנס להסבר הטכני על קידוד Base64, מלבד העובדה שמדובר בדרך להכניס מידע בינארי (כמו תמונות למשל) לתוך קובץ ASCII (למשל קובץ HTML). שימוש לגיטימי לקידוד כזה הוא למשל לקחת תמונה ולהציב אותה בתוך קובץ HTML וכך לחסוך קריאת HTTP.

רוצים דוגמה? אני מתאר לעצמי שכן – שימו לב לתמונה הזו:

איך יצרתי אותה? פשוט לקחתי תמונת gif קיימת בשם israel.gif והמרתי אותה לקידוד 64, לקחתי את הקידוד והדבקתי אותו בתגית image. ממש כך:

<img src='data:image/gif;base64,R0lGODlhFAANANUAAAMDhc/P6IuLx+rq9PX1+s3N57Cw2aOj04yMyKGh0rGx2czM58zM5nNzvPb2+19fsPLy+YyMx7e33GdntMTE46+v2MbG5JKSyv7+//Dw97m53mVls1xcrnd3vvv7/c7O6JCQyfT0+crK5gAAg/Pz+RkZkP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAUAA0AAAZbQJJwSCwWS8ikcrkcOZ9PAABKFVmvokJAYQgUsFeTeGwiDCKIgYPMZms2icOE0q6bIB1xg2BvSzgXIA8WfWweGQICIRh1YFYLARUGHwyOIlRQUphPTJ2dRqCgQQA7' />

איך המרתי את התמונה לקובץ? יש ממירים לקידוד base64 שעובדים ברשת בחינם. אני השתמשתי בקוד PHP קטן שמשמש אותי להמרת תמונות. הוא מובא כאן לשם הדוגמה בלבד:

<?php
$file = "israel.gif";
if($fp = fopen($file,"rb", 0))
{
   $picture = fread($fp,filesize($file));
   fclose($fp);

   $base64 = chunk_split(base64_encode($picture));
   $tag = "<img src='data:image/gif;base64,$base64' />";
   print $tag;
}

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

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

print "This site is hacked. MUHAHAHA!";

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

$my_code = 'print "This site is hacked. MUHAHAHA!";';
$base64 = base64_encode($my_code);
print $base64;

הטקסט This site is hacked. MUHAHAHA! נראה בצורתו ה-base64 כך:

cHJpbnQgIlRoaXMgc2l0ZSBpcyBoYWNrZWQuIE1VSEFIQUhBISI7

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

base64_decode($base64)

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

eval("print 2*2;");

יציג לנו 4.

אם אני אקח את המחרוזת שלי, יעשה לה base64_decode על מנת להפוך אותה לטקסט רגיל ואת הטקסט הזה אני אדחוף ל-eval, מה שיש בתוכה ירוץ – הנה הדוגמה!

eval(base64_decode('cHJpbnQgIlRoaXMgc2l0ZSBpcyBoYWNrZWQuIE1VSEFIQUhBISI7'));

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

print(base64_decode('cHJpbnQgIlRoaXMgc2l0ZSBpcyBoYWNrZWQuIE1VSEFIQUhBISI7'));

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

רוב הטרוניות שיש על אינטרנט אקספלורר נובעות בדרך כלל מחוסר התאמתו לתקני האינטרנט, על כך שצריך לשבור את הראש על CSS עבורו, על כך שיש תקלות JavaScript מוזרות – במיוחד אם אתם לא משתמשים ב-jQuery וכו' וכו'. אך רבים מתעלמים מכך שהדפדפן המוזר (בגרסת 8 ומטה) מסוגל גם לתת שגיאות אקזוטיות יותר שגם מפתח מנוסה לא יאמין שהן מתקיימות. אני אדגים באמצעות סיפור אמיתי שהתרחש – בתקווה שתזכרו אותו ואם וכאשר תקלה דומה תקרה אצלכם, תוכלו לנסות ולפתור אותה.

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

הדבר הראשון שעשיתי הוא כמובן לחשוד שבאג JavaScript מוזר מונע את ההקלקה או תוקע את תהליך ההורדה, או איזה אלמנט CSS מתפרע 'מכסה' את הקישור ומונע הקלקה. הדברים האלו קורים לא מעט פעמים ואם היה לי שקל על פעם ששמעתי 'זה לא עובד באינטרנט אקספלורר', הייתי כבר מולטי מיליארדר. השתמשתי בכלי המפתחים של אינטרנט אקספלורר על מנת לרנדר את הדף כמו אינטרנט אקספלורר 8 וניסיתי ללחוץ על הורדת הקובץ – עבד!

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

לי מותקן אינטרנט אקספלורר 9 שלמרות שאני מבקש ממנו לרנדר את הדף כאינטרנט אקספלורר 8 – הוא עובד כמו מלך והדפדפן המקורי אינטרנט אקספלורר 8 שמותקן אצל י' (ובדקתי גם דפדפני אינטרנט אקספלורר 8 אחרים במחשבי שאר חברי הצוות) הורדת הקובץ נתקעת. הדפדפן הארור עושה סימנים שהוא מוריד את הקובץ – אך alas, הוא לא מתחיל בהורדה אלא רק בוהה בך בעיני עגל מטופשות וכחולות בצורת e.

זה השלב שגם מפתח אינטרנט מנוסה מתחיל להזיע – אך פתרון הבעיה נעוץ בעובדה שזה עובד באינטרנט אקספלורר 9 שמרנדר לפי 8 ולא עובד באינטרנט אקספלורר 8 – סימן שלא מדובר פה בבאג ב-client side אלא בבאג או פיצ'ר משונה במיוחד שנמצא באינטרנט אקספלורר 8 עצמו. וזה הדבר החשוב ביותר שאתם צריכים לקחת אתכם מהמאמר הזה – לא כל בעיית אינטרנט אקספלורר נובעת מהרינדור השגוי והעקום של הדף – לפעמים זה סתם באג צולע בתוכנה עצמה.

האפליקציה שלנו ישבה על שרת secure (כלומר הכתובת שלו מתחילה ב-https). בדיקה מהירה הראתה שאם אני מתחבר לשרת באמצעות http, ההורדה עובדת דווקא בסדר גמור. לאחר גיגול נמרץ ויריקות אינספור על מסך המחשב, הסתבר שמקור התקלה נובע מכך שאינטרנט אקספלורר לא מוכן לקבל בתנאים מסוימים קבצים שמגיעים משרת https ומגיעים ללא ה-header הבא:

Cache-Control: private;

לשנות header לקובץ זה קל (תלוי באפליקציה שלכם, אבל זה לא אמור להיות מאד קשה), אם יש לכם דרופל זה אפילו עוד יותר קל:

function hook_file_download($filepath) {
        drupal_set_header('WHATEVER HEADER YOU WANT');
}

[אגב, בדרופל לא צריך לעשות את זה, כיוון שהם נתקלו בבאג ובמידה והשרת שעליו מאוחסן דרופל הוא מאובטח, דרופל יורה את ה-header הזה באופן אוטומטי בכל הורדת קובץ, במקרה שלנו הוא לא עשה את זה בגלל ארכיטקטורה מאד מסוימת, אבל זה סיפור אחר שאני לא יכול לספר כאן]

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

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

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

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

אני בונה עליכם שתגבו את הכל כמובן לפני שאתם מתעסקים בתבנית. כמו כן כל ההסברים מובאים AS IS. אם אתם לא מסתדרים, אתם מוזמנים לפנות למתכנת (לא אני, כי אני לא מתעסק עם זה) שיעשה את זה עבורכם. לעריכת הקוד ניתן להשתמש ב-notepad++, שימו לב שהקידוד שלכם מכוון ל-utf8.

שלב ראשון : footer.php

גשו לקובץ footer.php שיש בתיקית התבנית שלכם, חפשו ומיחקו את הטקסט הבא:

<?php
/* תבנית זו מוגנת בזכויות יוצרים, אין להוריד את הקישורים הנלווים לתבנית ללא אישור מפורש בכתב מאתר mastergate.co.il כולל הערה זו */
			//eval(base64_decode("d3BfY2FjaGUoKTs="));
/* תבנית זו מוגנת בזכויות יוצרים, אין להוריד את הקישורים הנלווים לתבנית ללא אישור מפורש בכתב מאתר mastergate.co.il כולל הערה זו */ ?>

שלב שני: functions.php

יש למחוק את השורה המאד ארוכה שמתחילה ב:

eval(gzinflate(base64_decode(str_rot13(strrev('O8/8//o//K//K7CCdraGe

שלב שלישי: home.php

יש לפתוח את home.php, בשורה הראשונה אנו נראה את הטקסט הבא:

<?php wp_get_header(); ?>

יש למחוק אותו ולהכניס במקומו את הטקסט:

<?php get_header(); ?>

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

<?php wp_get_footer(); ?>

יש למחוק אותו ולהכניס במקומו את הטקסט:

<?php get_footer(); ?>

שלב רביעי: single.php

בשורה הראשונה אנו נראה את הטקסט הבא:

<?php wp_get_header(); ?>

יש למחוק אותו ולהכניס במקומו את הטקסט:

<?php get_header(); ?>

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

<?php wp_get_footer(); ?>

יש למחוק אותו ולהכניס במקומו את הטקסט:

<?php get_footer(); ?>

שלב חמישי ואחרון: header.php

יש לגלול למטה, עד הסוף – בשורה האחרונה אנו נראה את זה:

<?php } ?>

יש למחוק את השורה הזו ולגלול חזרה למעלה, שם נראה את הטקסט:

<?php if (wp_loaded() === true) { ?>

הטקסט הזה יהיה צמוד לטקסט תחילת העמוד, יש למחוק אותו.

כל מה שנותר לעשות זה לשמור את הקבצים ולבדוק. אתם אמורים לראות את האתר כמו שתמיד הוא היה, מינוס הקרדיט ל-Mastergate ומינוס הקוד הזדוני כמובן.

והנה מדריך הוידאו:

חשוב לציין שראיתי מספר דוגמאות של קוד זדוני ב-Mastergate – הקוד הזדוני העיקרי ניתן להסרה באמצעים שפירטתי. אבל יש תבניות שבהן יש שתילה של פרסומות google ad words שמכניסות כסף ל-Mastergate ויתכן שגם קודים נוספים שעושים דברים אחרים. הפתרון המוצע כאן הוא בבחינת פתרון שעדיף לא להשתמש בו – עדיף להחליף את התבנית. השתמשו בפתרון הזה אך ורק אם עשיתם כל כך הרבה שינויים בתבנית של Mastergate שהחלפת תבנית היא בלתי אפשרית.

לטובת אנשי הלינוקס – הכנתי patch לתבנית arras של mastergate שקל להשתמש בו. להורדת ה-patch לחצו כאן. למי שלא יודע מה זה patch ואיך משתמשים בו – הנה קישור להסבר על patch.

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

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

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

כששמעתי על המקרה מיד פניתי לניצן וקיבלתי ממנו מידע ראשוני, ניגשתי והורדתי מספר תבניות מהאתר והסתכלתי על קוד ה-PHP. מה שראיתי הוא עניין מאד מאד מדאיג. אני לא אפרסם כאן ניתוח מלא של הקוד שאורכו כ-250 שורות (ניתוח כזה אמור להתפרסם יותר מאוחר בבלוג של ניצן) פורסם בבלוג של ניצן על ידי בוריס, יש שם שתי בעיות עיקריות:

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

2. שליחת נתונים על האתר לשרת של mastergate: שם האתר, דומיין האתר, מייל האדמין, מספר הפוסטים שיש באתר, גרסת ה-PHP של האתר ונתונים נוספים.
בנוסף, בחלק מהתבניות יש השתלה של מודעות גוגל שתמורתן עובר למסטרגייט.

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

ניתוח הקוד מלמד על כך שהקוד הזדוני גם מקבל מידע מהשרת של mastergate וכותב אותו על השרת המארח – דבר המהווה לא רק עבירת מחשוב חמורה אלא גם סכנה חמורה לאבטחת השרת והבלוג.

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

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

אם יש לכם תבנית אחרת ואתם רוצים לבדוק אותה – אתם יכולים להסתייע בתוסף TAC – מאד קל להשתמש בו: מורידים, מתקינים כמו כל תוסף אחר. ניגשים ללשונית העיצובים ובוחרים ב-TAC:

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

תוצאת בדיקת TAC

אפשר גם לבדוק ידנית, פתחו את קבצי התבנית שלכם (ניתן גם באמצעות עורך טקסט פשוט) וחפשו אחר המילים הבאות: eval, base64_decode, str_rot13, strrev ברוב המקרים (לא בכולם, אבל ברובם) הפונקציות האלו לא אמורות להיות בתבנית של וורדפרס.

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

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

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

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

כלי המפתחים של אינטרנט אקספלורר 9 יכול להיות מאד שימושי. במיוחד אם האפליקציה/אתר שלכם נראה מחורבש לחלוטין באינטרנט אקספלורר 7,8 או 9 (או בכולם). במדריך הקצר הזה אני מסביר כיצד משתמשים בכלי המפתחים למגוון מטרות שונות: רינדור העמוד כאינטרנט אקספלורר 7 או 8, שינוי תכונות של אלמנטים, עבודה עם JavaScript וכו'.

CSS? זה פשוט, לא? בת'כלס – כן. CSS אמור להיות פשוט ונחמד וכל מפתח אינטרנט אמור לדעת איך להשתמש בו, ולו מבחינה בסיסית.

אני לא הולך ללמד כאן CSS כמובן, אבל אני כן אנצל את הבמה לעבור על כמה סלקטורים שהם קצת מתקדמים ויתכן שאתם לא מכירים אותם.

סלקטור בן ישיר

כפי שאתם יודעים, הסלקטור:

div h1

יבחר את כל ה-h1 שנמצאים בתוך div, אבל אם נשתמש בסלקטור

div > h1

אנחנו נבחר את כל ה-h1 שהם הצאצאים הישירים של div למשל:

<div>
<h1>whatever</h1>
</div>

כאן ה-h1 ייבחר, אבל במבנה הבא הוא לא יבחר:

<div>
  <span>
    <h1>whatever</h1>
  </span>
</div>

אח מיידי

הסלקטור + משמש אותנו לבחור אחים מידיים, למשל:

h1 + h2

ישמש אותנו לבחור h2 שמגיע מיד לאחר h1, למשל:

<h1>Hello</h1>
<h2>test</h2>

סלקטור הכל

כוכבית או * היא הסלקטור שבוחר את כל האלמנטים, למשל הסלקטור:

div > *

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

סלקטורים של תכונות

אנחנו יכולים לבחור אלמנטים גם לפי התכונות שלהם! איך בדיוק? שימו לב:

img[title]

הסלקטור הזה בוחר רק img שיש להם title.

a[href][title]

הסלקטור החביב הזה בוחר רק קישורים שיש להם גם href וגם title.

input[type="text"]

הסלקטור הזה בוחר input מסוג text בלבד.

סלקטורים מבוססי תכונות הם סלקטורים של תקן CSS3 ויש עליהם הסבר יותר מקיף ודוגמאות בקישור.

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

הנה חדשות טובות לאלו מכם שמתאוששים רק עכשיו מהלם האלכוהול וחוסר השינה של ראש השנה האזרחי של שנת 2012 – מסתמן ששנת 2011 היתה השנה האחרונה של דפדפן אינטרנט אקספלורר 6 וכנראה ששנת 2012 תהיה השנה האחרונה של דפדפן אינטרנט אקספלורר 7.

על פי נתוני חברת statcounter שהצלבתי יחד עם נתוני net application עולה תמונה מעודדת מאד בנוגע לשימוש בדפדפני האינטרנט המקוללים אינטרנט אקספלורר 6 ואינטרנט אקספלורר 7.

אינטרנט אקספלורר 6

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

אינטרנט אקספלורר 7

בעוד ששנת 2011 היתה השנה האחרונה של אינטרנט אקספלורר 6, מסתמן והולך שזו השנה האחרונה של התאום התפלצתי שלו – אינטרנט אקספלורר 7. בדפדפן המאוס, שטוב רק במעט מהתפלץ שקדם לו, משתמשים נכון לעכשיו 5.21% מהגולשים. לשם השוואה, בתחילת שנת 2011, השתמשו באינטרנט אקספלורר 6 5.79% מהגולשים – כך שזה מהווה אינדקציה מצוינת שאחוז המשתמשים באינטרנט אקספלורר 7 בשנת 2012 ימשיך לרדת אל כיוון האחוז המינורי שיבטיח שאנו, מפתחי האינטרנט, לא נצטרך יותר לעבוד עימו לעולם. יש כאלו שחמישה אחוזים כבר מספיקים להם על מנת להפסיק לתמוך בדפדפן המחריד.

אינטרנט אקספלורר 8

הטרוניה העיקרית כנגד אינטרנט אקספלורר 8 היא שהוא אינו תומך כלל בתקני HTML 5 החדשים. כאן, למרבה הצער אין בשורות. אחוז השימוש בדפדפן נכון לעכשיו הוא 32.24%, אחוז משמעותי מאד שלא צפוי לרדת בתקופה הקרובה לצערנו המאד רב. האחוז הזה הולך ויורד בהתמדה (בתחילת השנה הוא היה 40%) אך עדיין הוא גבוה. כנראה שנאלץ לחיות עם אינטרנט אקספלורר 8 גם בתקופה הקרובה, אך משתמשי הדפדפן הזה יצטרכו לחיות בעולם שבו האפליקציות המתקדמות ביותר יהיו מחוץ להישג ידם.

בקרב מפתחי האינטרנט

כיוון שרוב הגולשים באינטרנט ישראל הם מפתחי אינטרנט או לפחות אנשים שקשורים לתחום האינטרנט, בדקתי במה משתמשים הגולשים באתר – רק בשביל הכיף – אין לסטטיסטיקה הזו ערך מדעי. במקרה הזה כרום מנצח בגדול, זה הדפדפן העיקרי בו משתמשים הגולשים באתר – 41 אחוזים מקוראי האתר מגיעים אליו עם כרום. בפער עצום מאחוריו, 19 אחוז מהגולשים עושים את זה עם אינטרנט אקספלורר 8. המקום השלישי שמור לפיירפוקס עם 17 אחוז מהגולשים שמחזיקים בו (כולל אני). 10 אחוזים משתמשים באינטרנט אקספלורר 9 וחמישה אחוזים משתמשים בספארי. שאר האחוזים שמורים לאופרה, הדפדפן האינהרנטי של אנדרואיד ושברירי אחוזים גם לכמה אמיצים שתעו לכאן עם אינטרנט אקספלורר 7 ואינטרנט אקספלורר 6.

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

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

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

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

צנזורה על ידי חסימה של DNS

ישנם מספר סוגי 'צנזורה', הפשוטה ביותר (שמעט ספקיות משתמשות בה) היא מחיקת האתר מרשומות ה-DNS המקומיות של הספקית. כלומר, אני מנתק את הזיקה בין הדומיין internet-israel.com לבין ה-IP שלו. הדרך הזו קלה מאד לעקיפה – פשוט משתמשים בשרת ה-DNS של גוגל! אני מעדיף להשתמש בו בכל מקרה כיוון שהוא אמין יותר משרת ה-DNS של הספקיות.

איך עושים את זה? בסרטון הבא הסברתי איך עושים את זה בחלונות 7:

כאן יש סרט הדרכה די מגניב על איך עושים את זה בחלונות XP.

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

צנזורה בחסימה ישירה

שימוש בפרוקסי

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

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

בסרטון הבא אני מסביר כיצד להתקין פוקסי פרוקסי ואיך אני נכנס לאתר שצינזרו אותו דרך פרוקסי חינמי שמצאתי – וכמובן איך למצוא פרוקסי.

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

VPN

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

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

שימושים לגיטימיים

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

סיכום

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

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

ההודעה של פייסבוק

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

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

הוספת אפליקציה לדף

רק כך תוכלו להוסיף אפליקציה לדף כלשהו – כולל הוספת לשוניות.

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

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

אני מתאר לעצמי שרובכם מכירים את ה-canvas שבאמצעותו אנחנו יכולים ליצור גרפיקה ואנימציה בתקן HTML5. אך התקן החדש מאפשר לנו ליצור גרפיקה באופן פשוט באמצעות SVG – שראשי התיבות שלו הן: Scalable Vector Graphics. קל מאד להשתמש ב-SVG, במיוחד אם אתם מכירים קצת פלאש ויצא לכם לעבוד עם Motion XML או אם אתם ממש שונאים JavaScript ולא בא לכם להתעסק עם ה-API של canvas.

כמה פשוט זה SVG?

שימו לב לריבוע היפה הזה:

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

איך עשיתי את זה? פשוט הדבקתי את הקוד הבא:

<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
   <rect fill="red"
   stroke="black"
   width="100"
   height="100"
   x="0" y="0" />
</svg>

פשוט, לא? אפשר להגדיר גם צורות נוספות כגון אליפסה, עיגול ומשולש. אפשר גם לצייר קו! הנה דוגמה:

וככה עושים את זה:

<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
   <line x1="10"
         y1="10"
         x2="150"
         y2="150"
         stroke="blue"
         stroke-width="3"/>
</svg>

ה-x1 וה-y1 הן נקודות ההתחלה, ו-x2 ו-y2 הן נקודות הסיום. פשוט, לא?
אפשר ליצור גם קוים יותר משוכללים עם polyline – שימו לב לגרף הזה:

את זה עשיתי עם הקוד הזה:

<svg version="1.1"  width="300" height="300" xmlns="http://www.w3.org/2000/svg">
<polyline points="0 100 , 20 150, 40 50, 60 75, 80 140, 100 300"
   fill="transparent"
   stroke="black"
   stroke-width="4"/>
</svg>