מעבר למצב 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 שהיה בשימוש בעבר

העברת האפליקציות האלה לIFRAME מצב ארגז חול (sandbox) עלולה לגרום לכך שהן לא יפעלו יותר בדפדפנים ישנים מסוימים (בעיקר 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.