אינטרנט ישראל
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
  • ראשי
  • אודות רן בר-זיק ואינטרנט ישראל
  • ערוץ טלגרם
  • מסטודון
  • התחברו אלי בטוויטר
  • התחברו אלי בלינקדאין
  • ספר ג'אווהסקריפט
ראשי » פיתוח אינטרנט » jQuery Scripts » Cross-Origin Resource Sharing

Cross-Origin Resource Sharing

רן בר-זיק מאי 17, 2015 7:19 am אין תגובות

תקשורת בקליינט סייד בין דומיינים שונים בקלות. אפילו עם אקספלורר.

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

Cross-Origin Resource Sharing או CORS היא דרך מודרנית ובטוחה לאפשר בקשות AJAX בין שני דומיינים. במאמר זה אני אסביר מעט על הדרך הזו, איך היא עובדת ואיך אפשר באמצעותה להעביר מידע מדף שיושב בדומיין A לדף שיושב בדומיין B.

היסטוריה קצרה למי שצריך – כאשר יש לי בקשת AJAX מאינטרנט ישראל (למשל) לדומיין אחר כמו http://api.icndb.com, באופן טבעי הדפדפן לא יאפשר את הבקשה הזו מסיבות אבטחה. למשל על מנת למנוע מתקפות Phishing. מפתח שניסה לממש קריאה לדומיין אחר היה מגלה שהקריאה נחסמה.
היו מגוון שיטות לעקוף את החסימה – שימוש בפרוקסי, שימוש במעקף מוזר של פלאש וכמובן JSONP. על כולן כתבתי פה, אבל מותו של אינטרנט אקספלורר 7 פתח את הדרך למימוש של דרכים יותר נורמליות לעבודה בין שני דומיינים שונים.

איך זה עובד? בגדול זה תלוי במימוש שלכם ובשרת המרוחק – השרת המרוחק חייב להחזיר header שנראה ככה:

Access-Control-Allow-Origin: *

למי שלא יודע, בכל בקשת מידע דרך פרוטוקול http, אנו מקבלים headers שונים ומשונים. על מנת לראות את ה-header של השרת, אנו זקוקים לכלי מפתחים. פיירבאג או כרום dev tools הם כלים מספיקים. נכנס לדף שאליו אנו רוצים לבצע את הקריאה, למשל http://api.icndb.com/jokes/random. נפתח את כלי המפתחים, נלחץ על לשונית Net בפיירבאג או Network בכרום, נבחר ב-Headers ונוכל לראות שיש header מתאים של
Access-Control-Allow-Origin: *.

בדיקת headers בכלי הפיתוח של גוגל כרום
בדיקת headers בכלי הפיתוח של גוגל כרום
בדיקת headers בפיירבאג
בדיקת headers בפיירבאג

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

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

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

    req.open('GET', 'http://api.icndb.com/jokes/random', true);
    // Just like regular ol' XHR
    req.onreadystatechange = function() {
        if (req.readyState === 4) {
            if (req.status >= 200 && req.status < 400) {
              var response = JSON.parse(req.response);
              console.log(response.value.joke);
            } else {
                // Handle error case
            }
        }
    };
    req.send();

אבל אנחנו לא חיים בעולם מושלם אלא בעולם שיש בו גם את דפדפן השטן, באופן עקרוני אינטרנט אקספלורר 11 תומך ב-CORS באופן מלא כמעט כמו כל דפדפן מודרני. התפלצות מגרסת 8-10 יכולים באופן עקרוני לתמוך בזה באמצעות אימפלמנטציה לא תקנית של CORS כמיטב המסורת של מיקרוסופט. איך עושים את זה? מבצעים feature detection פשוט לתמיכה ב-CORS. במידה ואין תמיכה, מבצעים את האימפלמנטציה המיקרוסופטית המוזרה:

var req = new XMLHttpRequest();

// Feature detection for CORS
if (!('withCredentials' in req) && typeof XDomainRequest != "undefined") {
  req = new XDomainRequest();
}
req.open('GET', 'http://api.icndb.com/jokes/random', true);
// Just like regular ol' XHR
req.onreadystatechange = function() {
  if (req.readyState === 4) {
    if (req.status >= 200 && req.status < 400) {
      var response = JSON.parse(req.response);
      console.log(response.value.joke);
    } else {
      // Handle error case
    }
  }
};
req.send();

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

חשוב להדגיש שגם אם אתם נמצאים ב-https, לא תצליחו ליצור קשר עם http גם באמצעות CORS.

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

השארת תגובה

ביטול

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

ללמוד לתכנת ג'אווהסקריפט בעברית שגייס יותר משלוש מאות אלף שקל ולמעלה מ-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 | הצהרת הנגישות של האתר | אבטחת מידע ודיווח על בעיית אבטחת מידע

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