이 페이지는 Cloud Translation API를 통해 번역되었습니다.

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 가이드 클라이언트 간 통신에서 확인할 수 있습니다.