Iफ़्रेम सैंडबॉक्स मोड पर माइग्रेट करना

Apps Script, कुछ मामलों में Google Workspaceऐप्लिकेशन को सुरक्षित रखने के लिए, सुरक्षा सैंडबॉक्स का इस्तेमाल करता है. IFRAME को छोड़कर, अब सभी सैंडबॉक्स मोड बंद कर दिए गए हैं. पुराने सैंडबॉक्स मोड का इस्तेमाल करने वाले ऐप्लिकेशन, अब नए IFRAME मोड का इस्तेमाल अपने-आप करते हैं.

जिन ऐप्लिकेशन ने पहले HTML सेवा के साथ इन पुराने मोड का इस्तेमाल किया था उन्हें IFRAME मोड के लिए बदलाव करने पड़ सकते हैं. ऐसा, इन अंतरों को ठीक करने के लिए करना होगा:

  • अब आपको target="_top" या target="_blank" का इस्तेमाल करके, लिंक के target एट्रिब्यूट को बदलना होगा
  • एचटीएमएल सेवा की मदद से दिखाई जाने वाली एचटीएमएल फ़ाइलों में, <!DOCTYPE html>, <html>, और <body> टैग शामिल होने चाहिए
  • Google नेटिव लोडर लाइब्रेरी api.js, IFRAME मोड में अपने-आप लोड नहीं होती
  • Picker का इस्तेमाल करने वाले लोगों को setOrigin() को कॉल करना होगा, क्योंकि कॉन्टेंट नए डोमेन से दिखाया जाता है
  • यह सुविधा IE9 के साथ-साथ कुछ पुराने ब्राउज़र पर काम नहीं करती
  • इंपोर्ट किए गए संसाधनों को अब एचटीटीपीएस का इस्तेमाल करना होगा
  • फ़ॉर्म सबमिट करने पर अब डिफ़ॉल्ट रूप से रोक नहीं लगाई जाती

इन दोनों के बीच के फ़र्क़ के बारे में, नीचे दिए गए सेक्शन में बताया गया है.

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>

टॉप-लेवल एचटीएमएल टैग

NATIVE (और EMULATED) सैंडबॉक्स मोड में, कुछ एचटीएमएल टैग, 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 पिकर एपीआई में बदलाव

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 सैंडबॉक्स मोड पर माइग्रेट करने का मतलब है कि हो सकता है कि वे कुछ पुराने ब्राउज़र (खास तौर पर IE9 और उससे पहले के वर्शन) पर काम न करें. ये ऐसे ब्राउज़र हैं जो एचटीएमएल5 के iframe सैंडबॉक्सिंग की सुविधा के साथ काम नहीं करते.

जिन ऐप्लिकेशन ने पहले से ही IFRAME मोड का अनुरोध किया है या जो HtmlService का इस्तेमाल बिलकुल नहीं करते उन पर इस समस्या का कोई असर नहीं पड़ेगा.

इंपोर्ट किए गए संसाधनों के लिए, अब एचटीटीपीएस ज़रूरी है

एचटीटीपी का इस्तेमाल करके रिसॉर्स इंपोर्ट करने वाले पिछले ऐप्लिकेशन को, एचटीटीपीएस का इस्तेमाल करने के लिए बदलना होगा.

फ़ॉर्म सबमिट करने पर अब डिफ़ॉल्ट रूप से रोक नहीं लगाई जाती

NATIVE में, सैंडबॉक्सिंग की वजह से एचटीएमएल फ़ॉर्म को सबमिट करने और पेज पर नेविगेट करने से रोका गया था. इस बात को ध्यान में रखते हुए, डेवलपर सबमिट बटन में onclick हैंडलर जोड़ सकता है. इसके बाद, उसे इस बात की चिंता नहीं करनी पड़ेगी कि क्या होगा.

हालांकि, IFRAME मोड में एचटीएमएल फ़ॉर्म सबमिट किए जा सकते हैं. अगर किसी फ़ॉर्म एलिमेंट में 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 की गाइड में क्लाइंट-टू-सर्वर कम्यूनिकेशन में देखा जा सकता है.