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

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

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

  • अब आपको target="_top" या target="_blank" का इस्तेमाल करके, लिंक के target एट्रिब्यूट को बदलना होगा
  • एचटीएमएल सेवा से उपलब्ध कराई गई एचटीएमएल फ़ाइलों में <!DOCTYPE html>, <html>, और <body> टैग शामिल होने चाहिए
  • Google की नेटिव लोडर लाइब्रेरी api.js, IFRAME मोड में अपने-आप लोड नहीं होती
  • पिकर उपयोगकर्ताओं को 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 और इससे पहले के ब्राउज़र) पर काम न करें जो 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 गाइड क्लाइंट-टू-सर्वर कम्यूनिकेशन पर इसका पूरा उदाहरण देखें.