IFRAME স্যান্ডবক্স মোডে স্থানান্তরিত করুন

নির্দিষ্ট কিছু পরিস্থিতিতে গুগল ওয়ার্কস্পেস অ্যাপ্লিকেশনগুলির জন্য সুরক্ষামূলক বিচ্ছিন্নতা প্রদান করতে গুগল অ্যাপস স্ক্রিপ্ট একটি সিকিউরিটি স্যান্ডবক্স ব্যবহার করে। IFRAME ছাড়া বাকি সব স্যান্ডবক্স মোড এখন বন্ধ করে দেওয়া হয়েছে। পুরোনো স্যান্ডবক্স মোড ব্যবহারকারী অ্যাপগুলি এখন স্বয়ংক্রিয়ভাবে নতুন IFRAME মোড ব্যবহার করবে।

যেসব অ্যাপ আগে HTML সার্ভিসের সাথে এই পুরোনো মোডগুলো ব্যবহার করত, IFRAME মোডের জন্য নিম্নলিখিত পার্থক্যগুলো সমাধানের উদ্দেশ্যে কিছু পরিবর্তন করতে হতে পারে:

  • এখন আপনাকে অবশ্যই target="_top" অথবা target="_blank" ব্যবহার করে লিঙ্কের target অ্যাট্রিবিউটটি ওভাররাইড করতে হবে।
  • HTML সার্ভিস দ্বারা পরিবেশিত HTML ফাইলগুলিতে অবশ্যই <!DOCTYPE html>, <html>, এবং <body> ট্যাগ অন্তর্ভুক্ত থাকতে হবে।
  • IFRAME মোডে gapi লোডার লাইব্রেরি ( api.js ) স্বয়ংক্রিয়ভাবে লোড হয় না।
  • পিকার ব্যবহারকারীদের setOrigin কল করতে হবে কারণ কন্টেন্ট একটি নতুন ডোমেইন থেকে পরিবেশন করা হচ্ছে।
  • IE9 সহ কিছু পুরোনো ব্রাউজার সমর্থিত নয়।
  • আমদানিকৃত রিসোর্সগুলিতে এখন অবশ্যই HTTPS ব্যবহার করতে হবে।
  • ফর্ম জমা দেওয়া এখন আর ডিফল্টরূপে প্রতিরোধ করা হয় না।

এই পার্থক্যগুলো পরবর্তী বিভাগগুলোতে বিস্তারিতভাবে আলোচনা করা হয়েছে।

IFRAME মোডে আপনাকে লিঙ্ক টার্গেট অ্যাট্রিবিউটটি _top অথবা _blank এ সেট করতে হবে।

কোড.জেএস 

function doGet() {
  var template = HtmlService.createTemplateFromFile('top');
  return template.evaluate();
}

শীর্ষ.html 

<!DOCTYPE html>
<html>
 <body>
   <div>
     <a href="http://google.com" target="_top">Click Me!</a>
   </div>
 </body>
</html>

এছাড়াও আপনি মূল ওয়েব পেজের head সেকশনের মধ্যে <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 ফাইলে নির্দিষ্ট কিছু HTML ট্যাগ স্বয়ংক্রিয়ভাবে যুক্ত হয়ে যেত, কিন্তু IFRAME মোড ব্যবহার করলে এমনটা হয় না।

IFRAME ব্যবহার করে আপনার প্রোজেক্ট পেজগুলো যেন সঠিকভাবে পরিবেশিত হয়, তা নিশ্চিত করতে আপনার পেজের কন্টেন্টকে নিম্নলিখিত টপ-লেভেল ট্যাগগুলোর মধ্যে রাখুন:

<!DOCTYPE html>
<html>
  <body>
    <!-- Add your HTML content here -->
  </body>
</html>

gapi লোডার লাইব্রেরিটি অবশ্যই স্পষ্টভাবে লোড করতে হবে।

যেসব স্ক্রিপ্ট gapi লোডার লাইব্রেরি ( api.js ) স্বয়ংক্রিয়ভাবে লোড হওয়ার উপর নির্ভরশীল ছিল, সেগুলোকে অবশ্যই এই লাইব্রেরিটি স্পষ্টভাবে লোড করার জন্য পরিবর্তন করতে হবে, যেমনটি নিম্নলিখিত উদাহরণে দেখানো হয়েছে:

<script src="https://apis.google.com/js/api.js?onload=onApiLoad">
</script>

গুগল পিকার এপিআই পরিবর্তন

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)-এর আইফ্রেম স্যান্ডবক্সিং বৈশিষ্ট্যের উপর ভিত্তি করে তৈরি। এটি ইন্টারনেট এক্সপ্লোরার ৯-এর মতো কিছু পুরোনো ব্রাউজারে সমর্থিত নয়। এটি একটি সমস্যা হতে পারে যদি আপনার অ্যাপস স্ক্রিপ্ট প্রজেক্টে একই সাথে নিম্নলিখিত বিষয়গুলো থাকে:

  • HtmlService ব্যবহার করে, এবং
  • পূর্বে ব্যবহৃত EMULATED বা NATIVE স্যান্ডবক্সিং

এই অ্যাপগুলিকে IFRAME স্যান্ডবক্স মোডে স্থানান্তরিত করার অর্থ হল, সেগুলি কিছু পুরোনো ব্রাউজারে (বিশেষ করে IE9 এবং তার আগের সংস্করণগুলিতে) আর কাজ নাও করতে পারে, যেগুলি HTML5-এর আইফ্রেম স্যান্ডবক্সিং বৈশিষ্ট্য সমর্থন করে না।

যেসব অ্যাপ ইতিমধ্যেই IFRAME মোডের জন্য অনুরোধ করে অথবা HtmlService একেবারেই ব্যবহার করে না, সেগুলো এই সমস্যা দ্বারা প্রভাবিত হবে না।

আমদানিকৃত রিসোর্সের জন্য এখন HTTPS আবশ্যক।

পূর্ববর্তী অ্যাপ্লিকেশনগুলো, যেগুলো HTTP ব্যবহার করে রিসোর্স ইম্পোর্ট করত, সেগুলোকে অবশ্যই HTTPS ব্যবহার করার জন্য পরিবর্তন করতে হবে।

ফর্ম জমা দেওয়া এখন আর ডিফল্টরূপে প্রতিরোধ করা হয় না।

NATIVE স্যান্ডবক্সিংয়ের অধীনে এইচটিএমএল ফর্মগুলো থেকে প্রকৃতপক্ষে সাবমিট হওয়া এবং পেজে নেভিগেট করা যেত না। এর ফলে, একজন ডেভেলপার সাবমিট বাটনে একটি onclick হ্যান্ডলার যোগ করতে পারতেন এবং এরপর কী ঘটবে তা নিয়ে তাকে চিন্তা করতে হতো না।

তবে IFRAME মোডে HTML ফর্ম সাবমিট করা যায়, এবং যদি কোনো ফর্ম এলিমেন্টে action অ্যাট্রিবিউট নির্দিষ্ট করা না থাকে, তাহলে সেটি একটি ফাঁকা পেজে সাবমিট হবে। আরও খারাপ ব্যাপার হলো, onclick হ্যান্ডলারটি তার কাজ শেষ করার আগেই ভেতরের আইফ্রেমটি সেই ফাঁকা পেজে রিডাইরেক্ট করে দেবে।

এর সমাধান হলো আপনার পেজে এমন জাভাস্ক্রিপ্ট কোড যোগ করা যা ফর্মের উপাদানগুলোকে প্রকৃতপক্ষে সাবমিট হতে বাধা দেয়, যাতে ক্লিক হ্যান্ডলারগুলো কাজ করার জন্য সময় পায়:

// 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);

একটি সম্পূর্ণ উদাহরণ HtmlService গাইডের 'ক্লায়েন্ট-টু-সার্ভার কমিউনিকেশন' অংশে পাওয়া যাবে।