מעבר למצב IFRAME Sandbox

במצבים מסוימים, Apps Script משתמש בארגז חול לאבטחה כדי לספק בידוד מגן לאפליקציות של Google Workspace. כל מצבי הארגז הווירטואלי (Sandbox) הוצאו משימוש, חוץ מ-IFRAME. אפליקציות שמשתמשות במצבי ארגז חול ישנים יותר משתמשות עכשיו אוטומטית במצב IFRAME החדש יותר.

יכול להיות שיהיה צורך לבצע שינויים באפליקציות שהשתמשו בעבר במצבים הישנים האלה עם שירות ה-HTML, כדי להתאים אותן למצב IFRAME. הסיבה לכך היא ההבדלים הבאים:

  • עכשיו צריך להגדיר מאפיין target שונה לקישור באמצעות target="_top" או target="_blank"
  • קובצי HTML שמוצגים על ידי שירות ה-HTML חייבים לכלול את התגים <‎!DOCTYPE html>,‏ <html> ו-<body>
  • ספריית הטוען המקורי של Google‏ api.js לא נטענת אוטומטית במצב IFRAME
  • משתמשי Picker צריכים להתקשר אל setOrigin() כי התוכן מוגש מדומיין חדש
  • חלק מהדפדפנים הישנים, כולל IE9, לא נתמכים
  • מעכשיו, משאבים מיובאים חייבים להשתמש ב-HTTPS
  • כברירת מחדל, כבר לא נמנעת שליחת טפסים

ההבדלים האלה מפורטים בקטעים הבאים.

במצב IFRAME, צריך להגדיר את מאפיין יעד הקישור לאחד מהערכים הבאים: _top או _blank:

Code.js

function doGet() {
  var template = HtmlService.createTemplateFromFile('top');
  return template.evaluate();
}

top.html

<!DOCTYPE html>
<html>
 <body>
   <div>
     <a href="http://google.com" target="_top">Click Me!</a>
   </div>
 </body>
</html>

אפשר גם לעקוף את המאפיין הזה באמצעות התג <base> בקטע head של דף האינטרנט המכיל:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
  </head>
  <body>
   <div>
     <a href="http://google.com">Click Me!</a>
   </div>
 </body>
</html>

תגי HTML ברמה העליונה

במצב ארגז חול NATIVE (וגם EMULATED), תגי HTML מסוימים יתווספו אוטומטית לקובץ ‎ .html של Apps Script, אבל זה לא קורה כשמשתמשים במצב IFRAME.

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

<!DOCTYPE html>
<html>
  <body>
    <!-- Add your HTML content here -->
  </body>
</html>

צריך לטעון באופן מפורש ספריית טוען של Native Javascript

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

<script src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>

שינוי ב-Google Picker API

כשמשתמשים ב-Google Picker API, צריך עכשיו להפעיל את setOrigin() כשיוצרים את PickerBuilder ולהעביר את המקור google.script.host.origin, כמו בדוגמה הבאה:

function createPicker(oauthToken) {
  var picker = new google.picker.PickerBuilder()
      .addView(google.picker.ViewId.SPREADSHEETS) // Or a different ViewId
      .setOAuthToken(oauthToken)
      .setDeveloperKey(developerKey)
      .setCallback(pickerCallback)
      .setOrigin(google.script.host.origin) // Note the setOrigin
      .build();
  picker.setVisible(true);
}

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

תמיכה בדפדפנים

מצב ארגז החול IFRAME מבוסס על התכונה iframe sandboxing ב-HTML5. האפשרות הזו לא נתמכת בדפדפנים ישנים יותר, כמו Internet Explorer 9. זו יכולה להיות בעיה אם פרויקט Apps Script שלך:

  • נעשה שימוש ב-HtmlService, ו
  • השתמשתם בעבר ב-EMULATED או ב-NATIVE sandboxing

העברת האפליקציות האלה למצב ארגז חול של IFRAME פירושה שהן לא יפעלו יותר בדפדפנים ישנים מסוימים (בעיקר IE9 וגרסאות קודמות) שלא תומכים בתכונת ארגז החול של iframe ב-HTML5.

הבעיה הזו לא משפיעה על אפליקציות שכבר מבקשות מצב IFRAME או שלא משתמשות ב-IFRAME בכלל.HtmlService

מעכשיו נדרש HTTPS למשאבים מיובאים

צריך לשנות אפליקציות קודמות שייבאו משאבים באמצעות HTTP כך שישתמשו ב-HTTPS במקום זאת.

כברירת מחדל, כבר לא נמנעת שליחת טפסים

בקטע NATIVE נמנעה שליחה של טפסי HTML וניווט בדף. לכן, מפתח יכול פשוט להוסיף onclick handler ללחצן השליחה ולא לדאוג לגבי מה שקורה אחרי.

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

הפתרון הוא להוסיף קוד JavaScript לדף כדי למנוע את השליחה של רכיבי הטופס, כך שיהיה ל-handlers של הקליקים זמן לפעול:

<script>
  // Prevent forms from submitting.
  function preventFormSubmit() {
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; i++) {
      forms[i].addEventListener('submit', function(event) {
        event.preventDefault();
      });
    }
  }
  window.addEventListener('load', preventFormSubmit);
</script>

דוגמה מלאה אפשר למצוא במדריך HtmlService בקטע Client-to-Server Communication.