IFRAME Sandbox 모드로 이전

Apps Script는 보안 샌드박스를 사용하여 특정 상황에서 애플리케이션을 보호적으로 격리합니다. Google Workspace이제 IFRAME를 제외한 모든 샌드박스 모드가 지원 중단됩니다. 이전 샌드박스 모드를 사용하는 앱은 이제 자동으로 최신 IFRAME 모드를 사용합니다.

이전에 HTML 서비스에서 이러한 이전 모드를 사용한 앱은 다음과 같은 차이점을 해결하기 위해 IFRAME 모드를 변경해야 할 수 있습니다.

  • 이제 target="_top" 또는 target="_blank"를 사용하여 링크의 target 속성을 재정의해야 합니다.
  • 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>

래핑 웹페이지의 head 섹션 내에서 <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 태그가 Apps Script .html 파일에 자동으로 추가되지만 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를 사용할 때 PickerBuilder를 구성할 때 setOrigin()를 호출하고 다음 예와 같이 출처 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 샌드박스 모드는 HTML5의 iframe 샌드박스 처리 기능을 기반으로 합니다. Internet Explorer 9과 같은 일부 이전 브라우저에서는 지원되지 않습니다. Apps Script 프로젝트가 다음 두 가지 조건을 모두 충족하는 경우 문제가 될 수 있습니다.

  • HtmlService를 사용합니다.
  • 이전에 EMULATED 또는 NATIVE 샌드박스를 사용한 경우

이러한 앱을 IFRAME 샌드박스 모드로 이전하면 HTML5의 iframe 샌드박스 기능을 지원하지 않는 일부 이전 브라우저 (특히 IE9 이하)에서 더 이상 작동하지 않을 수 있습니다.

이미 IFRAME 모드를 요청하거나 HtmlService를 전혀 사용하지 않는 앱은 이 문제의 영향을 받지 않습니다.

이제 가져온 리소스에 HTTPS가 필요합니다.

HTTP를 사용하여 리소스를 가져온 이전 애플리케이션은 대신 HTTPS를 사용하도록 변경해야 합니다.

양식 제출이 더 이상 기본적으로 차단되지 않음

NATIVE의 경우 HTML 양식 샌드박스로 인해 실제로 페이지를 제출하고 탐색할 수 없었습니다. 따라서 개발자는 제출 버튼에 onclick 핸들러를 추가하기만 하면 되며 그 이후에 발생하는 상황에 대해 걱정할 필요가 없습니다.

그러나 IFRAME 모드에서는 HTML 양식을 제출할 수 있으며 양식 요소에 action 속성이 지정되지 않은 경우 빈 페이지에 제출됩니다. 더 나쁜 것은 onclick 핸들러가 완료되기 전에 내부 iframe이 빈 페이지로 리디렉션된다는 점입니다.

해결 방법은 클릭 핸들러가 작동할 시간을 갖도록 양식 요소가 실제로 제출되지 않도록 하는 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 가이드 클라이언트-서버 통신에서 확인할 수 있습니다.