Di chuyển sang Chế độ hộp cát IFRAME

Google Apps Script sử dụng hộp cát bảo mật để cung cấp khả năng cách ly bảo vệ cho các ứng dụng Google Workspace trong một số trường hợp. Tất cả các chế độ hộp cát hiện đều không còn được dùng nữa, ngoại trừ IFRAME. Các ứng dụng sử dụng chế độ hộp cát cũ hiện tự động sử dụng chế độ IFRAME mới hơn.

Các ứng dụng trước đây sử dụng các chế độ cũ này với Dịch vụ HTML có thể cần thực hiện các thay đổi cho chế độ IFRAME để giải quyết những điểm khác biệt sau:

  • Giờ đây, bạn phải ghi đè thuộc tính target của đường liên kết bằng cách sử dụng target="_top" hoặc target="_blank"
  • Các tệp HTML do Dịch vụ HTML phân phát phải bao gồm thẻ <!DOCTYPE html>, <html> và <body>
  • Thư viện trình tải gapi (api.js) không tự động tải ở chế độ IFRAME
  • Người dùng bộ chọn cần gọi setOrigin vì nội dung được phân phát từ một miền mới
  • Một số trình duyệt cũ, bao gồm cả IE9, không được hỗ trợ
  • Giờ đây, các tài nguyên đã nhập phải sử dụng HTTPS
  • Theo mặc định, việc gửi biểu mẫu không còn bị ngăn chặn nữa

Những điểm khác biệt này được trình bày chi tiết trong các phần sau.

Ở chế độ IFRAME, bạn cần đặt thuộc tính mục tiêu liên kết thành _top hoặc _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>

Bạn cũng có thể ghi đè thuộc tính này bằng thẻ <base> trong phần đầu của trang web bao quanh:

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

Thẻ HTML cấp cao nhất

Ở chế độ hộp cát NATIVE (và EMULATED), một số thẻ HTML sẽ tự động được thêm vào tệp .html của Apps Script, nhưng điều này không xảy ra khi sử dụng chế độ IFRAME.

Để đảm bảo các trang dự án của bạn được phân phát đúng cách bằng IFRAME, hãy gói nội dung trang trong các thẻ cấp cao nhất sau:

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

Phải tải rõ ràng thư viện trình tải gapi

Các tập lệnh dựa vào việc tự động tải thư viện trình tải gapi (api.js) phải được thay đổi để tải thư viện này một cách rõ ràng, như trong ví dụ sau:

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

Thay đổi API Bộ chọn của Google

Khi sử dụng API Bộ chọn của Google, giờ đây, bạn phải gọi setOrigin khi tạo PickerBuilder và truyền nguồn gốc google.script.host.origin, như minh hoạ trong ví dụ sau:

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);
}

Để xem ví dụ đầy đủ về cách thức hoạt động, hãy xem phần Hộp thoại mở tệp.

Hỗ trợ trình duyệt

Chế độ hộp cát IFRAME dựa trên tính năng hộp cát iframe trong HTML5. Tính năng này không được hỗ trợ trong một số trình duyệt cũ, chẳng hạn như Internet Explorer 9. Điều này có thể gây ra vấn đề nếu dự án Apps Script của bạn:

  • sử dụng HtmlService và
  • trước đây sử dụng hộp cát EMULATED hoặc NATIVE

Việc di chuyển các ứng dụng này sang chế độ hộp cát IFRAME có nghĩa là chúng có thể không còn hoạt động trên một số trình duyệt cũ (đáng chú ý là IE9 và các phiên bản cũ hơn) không hỗ trợ tính năng hộp cát iframe của HTML5.

Các ứng dụng đã yêu cầu chế độ IFRAME hoặc không sử dụng HtmlService sẽ không bị ảnh hưởng bởi vấn đề này.

Giờ đây, các tài nguyên đã nhập phải sử dụng HTTPS

Các ứng dụng trước đây nhập tài nguyên bằng HTTP phải được thay đổi để sử dụng HTTPS.

Theo mặc định, việc gửi biểu mẫu không còn bị ngăn chặn nữa

Trong hộp cát NATIVE, các biểu mẫu HTML bị ngăn chặn gửi và di chuyển trang. Do đó, nhà phát triển có thể thêm trình xử lý onclick vào nút gửi và không phải lo lắng về những gì xảy ra sau đó.

Tuy nhiên, với chế độ IFRAME, các biểu mẫu HTML được phép gửi và nếu một phần tử biểu mẫu không có thuộc tính action được chỉ định, thì biểu mẫu đó sẽ gửi đến một trang trống. Tệ hơn nữa, iframe bên trong sẽ chuyển hướng đến trang trống trước khi trình xử lý onclick có cơ hội hoàn tất.

Giải pháp là thêm mã JavaScript vào trang để ngăn các phần tử biểu mẫu thực sự gửi, để trình xử lý lượt nhấp có thời gian hoạt động:

// 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);

Bạn có thể xem ví dụ hoàn chỉnh trên hướng dẫn HtmlService về Giao tiếp từ máy khách đến máy chủ.