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

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

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