การย้ายข้อมูลไปยังโหมด IFRAME Sandbox

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

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

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