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>

상위 웹페이지의 헤드 섹션 내에 <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>

네이티브 자바스크립트 로더 라이브러리를 명시적으로 로드해야 함

네이티브 로더 라이브러리 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이 빈 페이지로 리디렉션됩니다.

해결 방법은 양식 요소가 실제로 제출하지 못하게 하는 자바스크립트 코드를 페이지에 추가하여 클릭 핸들러가 작동할 시간을 갖는 것입니다.

<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 가이드 클라이언트 간 통신을 참조하세요.