सैंडबॉक्स किए गए iframe में eval() का इस्तेमाल करें

Chrome का एक्सटेंशन सिस्टम, डिफ़ॉल्ट रूप से कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) को लागू करता है. यह नीति काफ़ी सख्त होती है. नीति से जुड़ी पाबंदियां आसान हैं: स्क्रिप्ट को अलग-अलग JavaScript फ़ाइलों में, लाइन के बाहर ले जाना चाहिए. इनलाइन इवेंट हैंडलर को addEventListener का इस्तेमाल करने के लिए बदलना चाहिए. साथ ही, eval() को बंद किया जाना चाहिए.

हालांकि, हम जानते हैं कि परफ़ॉर्मेंस को ऑप्टिमाइज़ करने और आसानी से एक्सप्रेशन बनाने के लिए, कई लाइब्रेरी eval() और eval जैसे कंस्ट्रक्ट का इस्तेमाल करती हैं. जैसे, new Function(). टेंप्लेट लाइब्रेरी में, इस तरह के बदलाव लागू करने की संभावना ज़्यादा होती है. कुछ फ़्रेमवर्क (जैसे, Angular.js) में सीएसपी की सुविधा पहले से मौजूद होती है. हालांकि, कई लोकप्रिय फ़्रेमवर्क को अब तक ऐसे तरीके के साथ अपडेट नहीं किया गया है जो एक्सटेंशन के eval-लेस वर्ल्ड के साथ काम करता हो. इसलिए, इस सुविधा के लिए सहायता हटाने से, डेवलपर के लिए ज़्यादा मुश्किलें आ रही हैं.

इस दस्तावेज़ में, सैंडबॉक्सिंग को सुरक्षित तरीके के तौर पर पेश किया गया है. इससे, सुरक्षा से समझौता किए बिना, इन लाइब्रेरी को अपने प्रोजेक्ट में शामिल किया जा सकता है.

सैंडबॉक्स क्यों?

eval एक्सटेंशन में खतरनाक है, क्योंकि इसके ज़रिए चलाए जाने वाले कोड के पास, एक्सटेंशन के ज़्यादा अनुमति वाले एनवायरमेंट में मौजूद हर चीज़ का ऐक्सेस होता है. chrome.* के कई बेहतरीन एपीआई उपलब्ध हैं, जिनसे उपयोगकर्ता की सुरक्षा और निजता पर गंभीर असर पड़ सकता है. डेटा चोरी करना हमारे लिए सबसे आसान काम है. हम एक सैंडबॉक्स का सुझाव देते हैं. इसमें eval, एक्सटेंशन के डेटा या अहम एपीआई को ऐक्सेस किए बिना कोड को लागू कर सकता है. न कोई डेटा, न कोई एपीआई, न कोई समस्या.

हम ऐसा करने के लिए, एक्सटेंशन पैकेज में मौजूद कुछ एचटीएमएल फ़ाइलों को सैंडबॉक्स में डालते हैं. जब भी कोई सैंडबॉक्स किया गया पेज लोड होगा, तो उसे यूनीक ऑरिजिन पर ले जाया जाएगा. साथ ही, उसे chrome.* एपीआई का ऐक्सेस नहीं दिया जाएगा. अगर हम iframe के ज़रिए, सैंडबॉक्स किए गए इस पेज को अपने एक्सटेंशन में लोड करते हैं, तो हम उसमें मैसेज भेज सकते हैं. साथ ही, उसे उन मैसेज पर किसी तरह से कार्रवाई करने की अनुमति दे सकते हैं. इसके बाद, हम उसके नतीजे मिलने का इंतज़ार कर सकते हैं. मैसेज भेजने के इस आसान तरीके से, हमें अपने एक्सटेंशन के वर्कफ़्लो में eval से चलने वाले कोड को सुरक्षित तरीके से शामिल करने के लिए ज़रूरी जानकारी मिलती है.

सैंडबॉक्स बनाना और उसका इस्तेमाल करना

अगर आपको सीधे कोड में जाना है, तो सैंडबॉक्सिंग सैंपल एक्सटेंशन पाएं और शुरू करें. यह Handlebars टेंप्लेट लाइब्रेरी के ऊपर बनाए गए छोटे मैसेजिंग एपीआई का काम करने वाला उदाहरण है. इसमें आपको शुरुआत करने के लिए ज़रूरी सभी चीज़ें मिल जाएंगी. अगर आपको इस बारे में थोड़ी और जानकारी चाहिए, तो यहां दिए गए सैंपल को देखें.

मेनिफ़ेस्ट में फ़ाइलों की सूची

सैंडबॉक्स में चलने वाली हर फ़ाइल को एक्सटेंशन मेनिफ़ेस्ट में शामिल किया जाना चाहिए. इसके लिए, sandbox प्रॉपर्टी जोड़ें. यह एक अहम चरण है और इसे आसानी से भुलाया जा सकता है. इसलिए, दोबारा जांच लें कि आपकी सैंडबॉक्स की गई फ़ाइल, मेनिफ़ेस्ट में शामिल है या नहीं. इस सैंपल में, हम "sandbox.html" नाम की फ़ाइल को सैंडबॉक्स में डाल रहे हैं. मेनिफ़ेस्ट एंट्री इस तरह दिखती है:

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

सैंडबॉक्स की गई फ़ाइल लोड करना

सैंडबॉक्स की गई फ़ाइल के साथ कुछ दिलचस्प करने के लिए, हमें उसे ऐसे कॉन्टेक्स्ट में लोड करना होगा जहां इसे एक्सटेंशन के कोड से ऐक्सेस किया जा सके. यहां, sandbox.html को iframe के ज़रिए एक्सटेंशन पेज में लोड किया गया है. पेज की JavaScript फ़ाइल में एक कोड होता है. यह कोड, ब्राउज़र ऐक्शन पर क्लिक करने पर सैंडबॉक्स में एक मैसेज भेजता है. इसके लिए, यह पेज पर iframe को ढूंढता है और उसके contentWindow पर postMessage() को कॉल करता है. मैसेज एक ऑब्जेक्ट है, जिसमें तीन प्रॉपर्टी होती हैं: context, templateName, और command. हम context और command के बारे में थोड़ी देर में बताएंगे.

service-worker.js:

chrome.action.onClicked.addListener(() => {
  chrome.tabs.create({
    url: 'mainpage.html'
  });
  console.log('Opened a tab with a sandboxed page!');
});

extension-page.js:

let counter = 0;
document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('reset').addEventListener('click', function () {
    counter = 0;
    document.querySelector('#result').innerHTML = '';
  });

  document.getElementById('sendMessage').addEventListener('click', function () {
    counter++;
    let message = {
      command: 'render',
      templateName: 'sample-template-' + counter,
      context: { counter: counter }
    };
    document.getElementById('theFrame').contentWindow.postMessage(message, '*');
  });

खतरनाक काम करना

sandbox.html लोड होने पर, यह Handlebars लाइब्रेरी को लोड करती है. साथ ही, Handlebars के सुझाव के मुताबिक इनलाइन टेंप्लेट बनाती और कंपाइल करती है:

extension-page.html:

<!DOCTYPE html>
<html>
  <head>
    <script src="mainpage.js"></script>
    <link href="styles/main.css" rel="stylesheet" />
  </head>
  <body>
    <div id="buttons">
      <button id="sendMessage">Click me</button>
      <button id="reset">Reset counter</button>
    </div>

    <div id="result"></div>

    <iframe id="theFrame" src="sandbox.html" style="display: none"></iframe>
  </body>
</html>

sandbox.html:

   <script id="sample-template-1" type="text/x-handlebars-template">
      <div class='entry'>
        <h1>Hello</h1>
        <p>This is a Handlebar template compiled inside a hidden sandboxed
          iframe.</p>
        <p>The counter parameter from postMessage() (outer frame) is:
          </p>
      </div>
    </script>

    <script id="sample-template-2" type="text/x-handlebars-template">
      <div class='entry'>
        <h1>Welcome back</h1>
        <p>This is another Handlebar template compiled inside a hidden sandboxed
          iframe.</p>
        <p>The counter parameter from postMessage() (outer frame) is:
          </p>
      </div>
    </script>

यह काम करता है! भले ही, Handlebars.compile new Function का इस्तेमाल करता है, लेकिन सब कुछ ठीक से काम करता है. आखिर में, हमें templates['hello'] में कंपाइल किया गया टेंप्लेट मिलता है.

नतीजा वापस भेजना

हम इस टेंप्लेट को इस्तेमाल के लिए उपलब्ध कराएंगे. इसके लिए, हम एक मैसेज लिसनर सेट अप करेंगे, जो एक्सटेंशन पेज से निर्देश स्वीकार करेगा. हम command का इस्तेमाल करके यह तय करेंगे कि क्या करना है. आपके पास, सिर्फ़ रेंडर करने के अलावा, और भी काम करने का विकल्प है. जैसे, टेंप्लेट बनाना? क्या उन्हें किसी तरह से मैनेज किया जा सकता है?), और context को रेंडर करने के लिए सीधे टेंप्लेट में पास कर दिया जाएगा. रेंडर किया गया एचटीएमएल, एक्सटेंशन पेज पर वापस भेज दिया जाएगा, ताकि एक्सटेंशन बाद में इसका इस्तेमाल कर सके:

 <script>
      const templatesElements = document.querySelectorAll(
        "script[type='text/x-handlebars-template']"
      );
      let templates = {},
        source,
        name;

      // precompile all templates in this page
      for (let i = 0; i < templatesElements.length; i++) {
        source = templatesElements[i].innerHTML;
        name = templatesElements[i].id;
        templates[name] = Handlebars.compile(source);
      }

      // Set up message event handler:
      window.addEventListener('message', function (event) {
        const command = event.data.command;
        const template = templates[event.data.templateName];
        let result = 'invalid request';

       // if we don't know the templateName requested, return an error message
        if (template) {
          switch (command) {
            case 'render':
              result = template(event.data.context);
              break;
            // you could even do dynamic compilation, by accepting a command
            // to compile a new template instead of using static ones, for example:
            // case 'new':
            //   template = Handlebars.compile(event.data.templateSource);
            //   result = template(event.data.context);
            //   break;
              }
        } else {
            result = 'Unknown template: ' + event.data.templateName;
        }
        event.source.postMessage({ result: result }, event.origin);
      });
    </script>

एक्सटेंशन पेज पर वापस आने पर, हमें यह मैसेज मिलेगा. साथ ही, हमें html पास किए गए डेटा का इस्तेमाल करके कुछ दिलचस्प काम करेंगे. इस मामले में, हम इसे सिर्फ़ सूचना के ज़रिए दिखाएंगे. हालांकि, एक्सटेंशन के यूज़र इंटरफ़ेस (यूआई) के हिस्से के तौर पर, इस एचटीएमएल का सुरक्षित तरीके से इस्तेमाल किया जा सकता है. innerHTML के ज़रिए इसे शामिल करने से, सुरक्षा से जुड़ा कोई ज़्यादा खतरा नहीं होता. ऐसा इसलिए, क्योंकि हम सैंडबॉक्स में रेंडर किए गए कॉन्टेंट पर भरोसा करते हैं.

इस तरीके से टेंप्लेट बनाना आसान हो जाता है. हालांकि, इसका इस्तेमाल सिर्फ़ टेंप्लेट बनाने के लिए नहीं किया जाता. कॉन्टेंट की सुरक्षा से जुड़ी सख्त नीति के तहत, ऐसा कोई भी कोड सैंडबॉक्स किया जा सकता है जो सही तरीके से काम नहीं करता. असल में, अपने एक्सटेंशन के उन कॉम्पोनेंट को सैंडबॉक्स करना अक्सर फ़ायदेमंद होता है जो सही तरीके से चलेंगे. इससे आपके प्रोग्राम के हर हिस्से को, सही तरीके से लागू करने के लिए ज़रूरी अनुमतियों के सबसे छोटे सेट पर पाबंदी लगाई जा सकती है. Google I/O 2012 के सुरक्षित वेब ऐप्लिकेशन और Chrome एक्सटेंशन लिखना प्रज़ेंटेशन में, इन तकनीकों के इस्तेमाल के कुछ अच्छे उदाहरण दिए गए हैं. यह प्रज़ेंटेशन 56 मिनट का है.