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 แทน
การส่งแบบฟอร์มไม่ได้ถูกป้องกันโดยค่าเริ่มต้นแล้ว
ภายใต้แบบฟอร์ม HTML แซนด์บ็อกซ์ NATIVE
ถูกป้องกันไม่ให้ส่งจริง
และไปยังส่วนต่างๆ ของหน้า ด้วยเหตุนี้ นักพัฒนาซอฟต์แวร์จึงเพิ่ม 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 การสื่อสารระหว่างไคลเอ็นต์กับเซิร์ฟเวอร์