IFRAME Sandbox 모드로 이전

보안 샌드박스를 사용하는 Apps Script 외부 IP 주소 없이도 Google Workspace 애플리케이션을 실행할 수 있습니다 전체 이제 IFRAME를 제외하고 샌드박스 모드가 지원 종료됩니다. 이전 샌드박스를 사용하는 앱 모드는 이제 자동으로 최신 IFRAME 모드를 사용합니다.

이전에 HTML 서비스와 함께 이러한 이전 모드를 사용한 앱은 다음과 같은 차이점을 해결하기 위해 IFRAME 모드를 변경합니다.

  • 이제 target="_top" 또는target <ph type="x-smartling-placeholder">target="_blank"</ph>
  • 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 사용 시 이제 구성 시 setOrigin()를 호출해야 합니다. PickerBuilder를 사용하고 원본 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 샌드박스 모드는 iframe 샌드박스 사용할 수 있습니다. 이 기능은 Internet Explorer 9과 같은 일부 이전 브라우저에서는 지원되지 않습니다. 이 Apps Script 프로젝트에 다음 두 가지가 모두 있는 경우 문제가 될 수 있습니다.

  • HtmlService 사용
  • 이전에 EMULATED 또는 NATIVE 샌드박스를 사용함

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

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

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

HTTP를 사용하여 리소스를 가져온 이전 애플리케이션은 대신 HTTPS를 사용하세요.

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

NATIVE개 미만의 샌드박스 HTML 양식이 실제로 제출되지 않았습니다. 페이지를 탐색할 수 있습니다. 개발자가 onclick 제출 버튼에 전달하므로 그 후에 일어난 상황에 대해 걱정할 필요가 없습니다.

IFRAME 모드를 사용하면 HTML 양식을 제출할 수 있으며 요소에 지정된 action 속성이 없으면 빈 페이지로 제출됩니다. 더 안 좋은 점은 내부 iframe이 onclick 완료될 가능성이 있습니다.

해결 방법은 다음과 같은 형식을 사용하지 못하게 하는 자바스크립트 코드를 페이지에 추가하는 것입니다. 요소가 실제로 제출되지 않도록 하여 클릭 핸들러가 함수:

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