การย้ายข้อมูลไปยังโหมดแซนด์บ็อกซ์ Iframe

Apps Script ใช้แซนด์บ็อกซ์ความปลอดภัยเพื่อมอบการแยกที่มีการป้องกันสําหรับแอปพลิเคชัน Google Workspace ในบางสถานการณ์ โหมดแซนด์บ็อกซ์ทั้งหมดจะยุติการให้บริการแล้ว ยกเว้น IFRAME แอปที่ใช้โหมดแซนด์บ็อกซ์รุ่นเก่าจะใช้โหมด IFRAME ที่ใหม่กว่าโดยอัตโนมัติ

แอปที่ใช้โหมดเดิมกับบริการ HTML ก่อนหน้านี้อาจต้องเปลี่ยนแปลงโหมด IFRAME เพื่อจัดการความแตกต่างต่อไปนี้

  • ปัจจุบันคุณต้องลบล้างแอตทริบิวต์ target ของลิงก์โดยใช้ target="_top" หรือ target="_blank"
  • ไฟล์ HTML ที่แสดงโดยบริการ HTML ต้องมีแท็ก <!DOCTYPE html>, <html> และ <body>
  • ไลบรารี api.js ตัวโหลดเนทีฟของ Google ไม่โหลดโดยอัตโนมัติในโหมด IFRAME
  • ผู้ใช้เครื่องมือเลือกต้องเรียกใช้ 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> ในส่วนหัวของหน้าเว็บที่แนบมาด้วย

<!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>

ไลบรารีตัวโหลด 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 ใน HTML5 ซึ่งจะไม่รองรับในเบราว์เซอร์รุ่นเก่าบางรุ่น เช่น Internet Explorer 9 ปัญหานี้อาจเกิดขึ้นหากโปรเจ็กต์ Apps Script ทั้งสองรายการมีลักษณะดังนี้

  • ใช้ HtmlService และ
  • ใช้แซนด์บ็อกซ์ EMULATED หรือ NATIVE ไว้ก่อนหน้านี้

การย้ายแอปเหล่านี้ไปยังโหมดแซนด์บ็อกซ์ของ IFRAME บ่งบอกว่าแอปอาจไม่ทํางานในเบราว์เซอร์รุ่นเก่าบางรุ่น (โดยเฉพาะ IE9 และรุ่นก่อนหน้า) ซึ่งไม่รองรับฟีเจอร์แซนด์บ็อกซ์ของ iframe ของ HTML5 อีกต่อไป

แอปที่ส่งคําขอโหมด IFRAME อยู่แล้วหรือไม่ได้ใช้ HtmlService เลยจะไม่ได้รับผลกระทบจากปัญหานี้

ต้องมี HTTPS สําหรับทรัพยากรที่นําเข้าแล้ว

แอปพลิเคชันก่อนหน้าที่นําเข้าทรัพยากรโดยใช้ HTTP ต้องเปลี่ยนไปใช้ HTTPS แทน

ระบบจะไม่ป้องกันการส่งแบบฟอร์มโดยค่าเริ่มต้นอีกต่อไป

ต่ํากว่า NATIVE แซนด์บ็อกซ์แบบฟอร์ม HTML ถูกป้องกันไม่ให้ส่งและไปยังส่วนต่างๆ ของหน้าเว็บ ดังนั้น นักพัฒนาแอปจึงเพิ่มแฮนเดิล onclick ลงในปุ่มส่งโดยไม่ต้องกังวลเกี่ยวกับสิ่งที่เกิดขึ้นหลังจากนั้น

เมื่อใช้โหมด IFRAME แต่จะส่งแบบฟอร์ม HTML ได้ และในกรณีที่องค์ประกอบแบบฟอร์มไม่มีแอตทริบิวต์ action ระบุไว้ แบบฟอร์มจะส่งไปยังหน้าว่าง แย่ลง iframe ภายในจะเปลี่ยนเส้นทางไปยังหน้าว่างก่อนที่เครื่องจัดการ onclick จะมีโอกาสเสร็จสิ้น

วิธีแก้ไขคือ วิธีเพิ่มโค้ด JavaScript ในหน้าเว็บที่ป้องกันไม่ให้องค์ประกอบแบบฟอร์มส่งเข้ามาจริง เพื่อให้เครื่องจัดการคลิกมีเวลาทํางานได้

<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 การสื่อสารระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์