ক্রোম এক্সটেনশনে ইভাল ব্যবহার করা, ক্রোম এক্সটেনশনে ইভাল ব্যবহার করা

Chrome এর এক্সটেনশন সিস্টেম একটি মোটামুটি কঠোর ডিফল্ট সামগ্রী নিরাপত্তা নীতি (CSP) প্রয়োগ করে৷ নীতির বিধিনিষেধগুলি সহজবোধ্য: স্ক্রিপ্টকে অবশ্যই আলাদা জাভাস্ক্রিপ্ট ফাইলে লাইনের বাইরে সরানো উচিত, addEventListener ব্যবহার করার জন্য ইনলাইন ইভেন্ট হ্যান্ডলারদের রূপান্তর করতে হবে এবং eval() অক্ষম করা হয়েছে৷ Chrome অ্যাপ্লিকেশানগুলির আরও কঠোর নীতি রয়েছে এবং এই নীতিগুলি যে সুরক্ষা বৈশিষ্ট্যগুলি সরবরাহ করে তাতে আমরা বেশ খুশি৷

যাইহোক, আমরা স্বীকার করি যে বিভিন্ন ধরনের লাইব্রেরি কর্মক্ষমতা অপ্টিমাইজেশান এবং প্রকাশের সহজতার জন্য eval() এবং eval এর মতো গঠন যেমন new Function() ব্যবহার করে। টেমপ্লেটিং লাইব্রেরিগুলি বিশেষভাবে প্রয়োগের এই শৈলীর জন্য প্রবণ। যদিও কিছু কিছু (যেমন Angular.js ) বাক্সের বাইরে CSP সমর্থন করে, অনেক জনপ্রিয় ফ্রেমওয়ার্ক এখনও এমন একটি মেকানিজম আপডেট করেনি যা এক্সটেনশনের eval -লেস ওয়ার্ল্ডের সাথে সামঞ্জস্যপূর্ণ। সেই কার্যকারিতার জন্য সমর্থন অপসারণ তাই বিকাশকারীদের জন্য প্রত্যাশার চেয়ে বেশি সমস্যাযুক্ত প্রমাণিত হয়েছে।

এই নথিটি নিরাপত্তার সাথে আপস না করে আপনার প্রকল্পগুলিতে এই লাইব্রেরিগুলিকে অন্তর্ভুক্ত করার জন্য একটি নিরাপদ প্রক্রিয়া হিসাবে স্যান্ডবক্সিং প্রবর্তন করে৷ সংক্ষিপ্ততার জন্য, আমরা সর্বত্র এক্সটেনশন শব্দটি ব্যবহার করব, তবে ধারণাটি অ্যাপ্লিকেশনগুলিতে সমানভাবে প্রযোজ্য।

কেন স্যান্ডবক্স?

eval একটি এক্সটেনশনের ভিতরে বিপজ্জনক কারণ এটি যে কোডটি কার্যকর করে তার এক্সটেনশনের উচ্চ-অনুমতি পরিবেশের সমস্ত কিছুতে অ্যাক্সেস রয়েছে। একগুচ্ছ শক্তিশালী chrome.* API পাওয়া যায় যা ব্যবহারকারীর নিরাপত্তা এবং গোপনীয়তাকে মারাত্মকভাবে প্রভাবিত করতে পারে; সহজ ডেটা এক্সফিল্ট্রেশন আমাদের উদ্বেগের মধ্যে সবচেয়ে কম। অফারে সমাধান হল একটি স্যান্ডবক্স যেখানে eval এক্সটেনশনের ডেটা বা এক্সটেনশনের উচ্চ-মূল্যের APIগুলিতে অ্যাক্সেস ছাড়াই কোড কার্যকর করতে পারে৷ কোন ডেটা, কোন API, কোন সমস্যা নেই।

আমরা এক্সটেনশন প্যাকেজের ভিতরে নির্দিষ্ট HTML ফাইলগুলিকে স্যান্ডবক্স করা হিসাবে তালিকাভুক্ত করে এটি সম্পন্ন করি। যখনই একটি স্যান্ডবক্সযুক্ত পৃষ্ঠা লোড করা হয়, এটি একটি অনন্য উত্সে সরানো হবে এবং chrome.* APIs৷ যদি আমরা একটি iframe এর মাধ্যমে আমাদের এক্সটেনশনে এই স্যান্ডবক্স করা পৃষ্ঠাটি লোড করি, তাহলে আমরা এটিকে বার্তা পাঠাতে পারি, এটিকে সেই বার্তাগুলির উপর কোনোভাবে কাজ করতে দিতে পারি এবং এটি আমাদেরকে একটি ফলাফল ফিরিয়ে দেওয়ার জন্য অপেক্ষা করতে পারি। এই সহজ মেসেজিং মেকানিজম আমাদেরকে আমাদের এক্সটেনশনের ওয়ার্কফ্লোতে eval -চালিত কোড নিরাপদে অন্তর্ভুক্ত করার জন্য প্রয়োজনীয় সবকিছু দেয়।

একটি স্যান্ডবক্স তৈরি এবং ব্যবহার করা।

আপনি যদি সরাসরি কোডে ডুব দিতে চান, অনুগ্রহ করে স্যান্ডবক্সিং নমুনা এক্সটেনশনটি ধরুন এবং টেক অফ করুন ৷ এটি হ্যান্ডেলবার টেমপ্লেটিং লাইব্রেরির উপরে নির্মিত একটি ক্ষুদ্র বার্তাপ্রেরণ API এর একটি কার্যকরী উদাহরণ, এবং এটি আপনাকে যেতে যা যা প্রয়োজন তা আপনাকে দিতে হবে। আপনারা যারা একটু বেশি ব্যাখ্যা চান তাদের জন্য, আসুন এখানে একসাথে সেই নমুনাটি দেখি।

ম্যানিফেস্টে ফাইলের তালিকা করুন

প্রতিটি ফাইল যা একটি স্যান্ডবক্সের ভিতরে চালানো উচিত একটি sandbox বৈশিষ্ট্য যোগ করে এক্সটেনশন ম্যানিফেস্টে তালিকাভুক্ত করা আবশ্যক৷ এটি একটি গুরুত্বপূর্ণ পদক্ষেপ, এবং এটি ভুলে যাওয়া সহজ, তাই অনুগ্রহ করে দুবার চেক করুন যে আপনার স্যান্ডবক্স করা ফাইলটি ম্যানিফেস্টে তালিকাভুক্ত হয়েছে৷ এই নমুনায়, আমরা চতুরতার সাথে "sandbox.html" নামের ফাইলটিকে স্যান্ডবক্সিং করছি। ম্যানিফেস্ট এন্ট্রি এই মত দেখায়:

{
  ...,
  "sandbox": {
     "pages": ["sandbox.html"]
  },
  ...
}

স্যান্ডবক্স করা ফাইলটি লোড করুন

স্যান্ডবক্স করা ফাইলের সাথে আকর্ষণীয় কিছু করার জন্য, আমাদের এটিকে এমন একটি প্রসঙ্গে লোড করতে হবে যেখানে এটি এক্সটেনশনের কোড দ্বারা সম্বোধন করা যেতে পারে। এখানে, sandbox.html একটি iframe এর মাধ্যমে এক্সটেনশনের ইভেন্ট পৃষ্ঠায় ( eventpage.html ) লোড করা হয়েছে। eventpage.js- এ এমন কোড রয়েছে যা যখনই ব্রাউজার অ্যাকশনটিতে ক্লিক করা হয় তখনই পৃষ্ঠায় iframe খুঁজে বের করে এবং এর contentWindow এ postMessage পদ্ধতিটি কার্যকর করে স্যান্ডবক্সে একটি বার্তা পাঠায়। বার্তাটি এমন একটি বস্তু যেখানে দুটি বৈশিষ্ট্য রয়েছে: context এবং command । আমরা এক মুহূর্তের মধ্যে উভয় মধ্যে ডুব দেব.

chrome.browserAction.onClicked.addListener(function() {
 var iframe = document.getElementById('theFrame');
 var message = {
   command: 'render',
   context: {thing: 'world'}
 };
 iframe.contentWindow.postMessage(message, '*');
});

বিপজ্জনক কিছু করুন

যখন sandbox.html লোড করা হয়, তখন এটি হ্যান্ডেলবার লাইব্রেরি লোড করে এবং হ্যান্ডেলবার যেভাবে পরামর্শ দেয় সেভাবে একটি ইনলাইন টেমপ্লেট তৈরি ও সংকলন করে:

<script src="handlebars-1.0.0.beta.6.js"></script>
<script id="hello-world-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>Hello, !</h1>
  </div>
</script>
<script>
  var templates = [];
  var source = document.getElementById('hello-world-template').innerHTML;
  templates['hello'] = Handlebars.compile(source);
</script>

এই ব্যর্থ হয় না! যদিও Handlebars.compile new Function ব্যবহার করে শেষ হয়, জিনিসগুলি প্রত্যাশিতভাবে কাজ করে, এবং আমরা templates['hello'] ।

ফলাফল ফিরে পাস

ইভেন্ট পৃষ্ঠা থেকে আদেশ গ্রহণকারী একটি বার্তা শ্রোতা সেট আপ করে আমরা এই টেমপ্লেটটিকে ব্যবহারের জন্য উপলব্ধ করব৷ কী করা উচিত তা নির্ধারণ করতে আমরা পাস করা command ব্যবহার করব (আপনি কেবল রেন্ডারিংয়ের চেয়ে আরও বেশি কিছু করার কল্পনা করতে পারেন; সম্ভবত টেমপ্লেট তৈরি করা? সম্ভবত সেগুলিকে কোনও উপায়ে পরিচালনা করা?), এবং রেন্ডারিংয়ের জন্য context সরাসরি টেমপ্লেটে পাস করা হবে . রেন্ডার করা এইচটিএমএলটি ইভেন্ট পৃষ্ঠায় ফেরত পাঠানো হবে যাতে এক্সটেনশনটি পরে এটির সাথে কিছু কার্যকর করতে পারে:

<script>
  window.addEventListener('message', function(event) {
    var command = event.data.command;
    var name = event.data.name || 'hello';
    switch(command) {
      case 'render':
        event.source.postMessage({
          name: name,
          html: templates[name](event.data.context)
        }, event.origin);
        break;

      // case 'somethingElse':
      //   ...
    }
  });
</script>

ইভেন্ট পৃষ্ঠায় ফিরে, আমরা এই বার্তাটি পাব এবং আমাদের পাস করা html ডেটা নিয়ে আকর্ষণীয় কিছু করব৷ এই ক্ষেত্রে, আমরা এটিকে শুধুমাত্র একটি ডেস্কটপ বিজ্ঞপ্তির মাধ্যমে প্রতিধ্বনিত করব, কিন্তু এক্সটেনশনের UI-এর অংশ হিসাবে এই HTMLটিকে নিরাপদে ব্যবহার করা সম্পূর্ণরূপে সম্ভব৷ innerHTML এর মাধ্যমে এটি সন্নিবেশ করানো একটি গুরুত্বপূর্ণ নিরাপত্তা ঝুঁকি তৈরি করে না, কারণ কিছু চতুর আক্রমণের মাধ্যমে স্যান্ডবক্সড কোডের একটি সম্পূর্ণ আপসও উচ্চ-অনুমতি এক্সটেনশন প্রসঙ্গে বিপজ্জনক স্ক্রিপ্ট বা প্লাগইন সামগ্রীকে ইনজেক্ট করতে অক্ষম হবে।

এই প্রক্রিয়াটি টেমপ্লেটিংকে সহজ করে তোলে, তবে এটি অবশ্যই টেমপ্লেটিং এর মধ্যে সীমাবদ্ধ নয়। কন্টেন্ট নিরাপত্তা নীতির অধীনে বাক্সের বাইরে কাজ করে না এমন যেকোনো কোড স্যান্ডবক্স করা যেতে পারে; প্রকৃতপক্ষে, এটি প্রায়ই আপনার এক্সটেনশনের স্যান্ডবক্স উপাদানগুলির জন্য দরকারী যেগুলি সঠিকভাবে চালানোর জন্য আপনার প্রোগ্রামের প্রতিটি অংশকে সঠিকভাবে চালানোর জন্য প্রয়োজনীয় বিশেষাধিকারগুলির ক্ষুদ্রতম সেটে সীমাবদ্ধ করতে। Google I/O 2012-এর রাইটিং সিকিউর ওয়েব অ্যাপস এবং ক্রোম এক্সটেনশন উপস্থাপনা এই কৌশলগুলির কার্যকর কিছু উদাহরণ দেয়, এবং এটি আপনার সময়ের 56 মিনিটের মূল্য।