Di chuyển sang chế độ Hộp cát IFRAME

Apps Script sử dụng một hộp cát bảo mật để cung cấp khả năng tách biệt bảo vệ cho Google Workspaceứng dụng trong một số trường hợp nhất định. Tất cả các chế độ hộp cát hiện đã ngừng hoạt động, ngoại trừ IFRAME. Các ứng dụng dùng chế độ hộp cát cũ hiện sẽ tự động dùng chế độ IFRAME mới.

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

  • Bây giờ, 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"
  • Tệp HTML do Dịch vụ HTML phân phát phải bao gồm các thẻ <!DOCTYPE html>, <html> và <body>
  • Thư viện trình tải gốc của Google api.js không tự động tải ở chế độ IFRAME
  • Người dùng Picker 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ũ hơn, bao gồm cả IE9, không được hỗ trợ
  • Các tài nguyên đã nhập giờ đây phải sử dụng HTTPS
  • Theo mặc định, tính năng gửi biểu mẫu không còn bị chặn

Những khác biệt này được nêu chi tiết trong các phần sau.

Ở chế độ IFRAME, bạn cần đặt thuộc tính đích 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 cách sử dụng thẻ <base> trong phần tiêu đề của trang web đính kèm:

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

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

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

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

Thư viện trình tải JavaScript gốc phải được tải một cách rõ ràng

Những tập lệnh dựa vào tính năng tải tự động của thư viện trình tải gốc 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

Giờ đây, khi sử dụng API Bộ chọn của Google, bạn phải gọi setOrigin() khi tạo bộ chọnBuilder và truyền vào 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 hoạt động, hãy xem bài viết 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ũ hơn, chẳng hạn như Internet Explorer 9. Đây có thể là vấn đề nếu dự án Apps Script của bạn:

  • sử dụng HtmlService và
  • hộp cát EMULATED hoặc NATIVE từng sử dụng

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

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

Hiện tại, bạn bắt buộc phải sử dụng HTTPS cho các tài nguyên đã nhập

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, tính năng gửi biểu mẫu không còn bị chặn

Trong NATIVE, các biểu mẫu HTML hộp cát không thực sự gửi và điều hướng trang. Do đó, nhà phát triển chỉ cần thêm trình xử lý onclick vào nút gửi và không phải lo lắng về điều gì sẽ xảy ra sau đó.

Tuy nhiên, với chế độ IFRAME, bạn được phép gửi các biểu mẫu HTML. Nếu phần tử biểu mẫu không có thuộc tính action nào được chỉ định thì phần tử đó sẽ được 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ó thể hoàn tất.

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

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

Bạn có thể xem một ví dụ đầy đủ trong hướng dẫn htmlService Giao tiếp từ máy khách đến máy chủ.