बाहरी कॉन्टेंट

Chrome ऐप्लिकेशन का सुरक्षा मॉडल, iframe में बाहरी कॉन्टेंट और इनलाइन स्क्रिप्टिंग और eval() के इस्तेमाल की अनुमति नहीं देता. आप इन पाबंदियों को बदल सकते हैं, लेकिन आपकी बाहरी सामग्री ऐप्लिकेशन से अलग होनी चाहिए.

आइसोलेटेड कॉन्टेंट, ऐप्लिकेशन के डेटा या किसी भी एपीआई को सीधे ऐक्सेस नहीं कर सकता. इवेंट पेज और सैंडबॉक्स किए गए कॉन्टेंट के बीच बातचीत करने और सीधे एपीआई को ऐक्सेस करने के लिए, क्रॉस-ऑरिजिन XMLHttpRequests और पोस्ट-मैसेजिंग का इस्तेमाल करें.

बाहरी संसाधनों का रेफ़रंस देना

ऐप्लिकेशन की ओर से इस्तेमाल की जाने वाली कॉन्टेंट की सुरक्षा नीति कई तरह के रिमोट यूआरएल के इस्तेमाल की अनुमति नहीं देती है. इसलिए, किसी ऐप्लिकेशन पेज से बाहरी इमेज, स्टाइलशीट या फ़ॉन्ट का सीधे तौर पर रेफ़रंस नहीं दिया जा सकता. इसके बजाय, इन रिसॉर्स को फ़ेच करने के लिए, क्रॉस-ऑरिजिन XMLHttpRequests का इस्तेमाल करें. इसके बाद, उन्हें blob: यूआरएल के ज़रिए उपलब्ध कराया जा सकता है.

मेनिफ़ेस्ट फ़ाइल के लिए ज़रूरी शर्तें

क्रॉस-ऑरिजिन XMLHttpRequests का इस्तेमाल करने के लिए, आपको रिमोट यूआरएल के होस्ट के लिए एक अनुमति जोड़नी होगी:

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

क्रॉस-ऑरिजिन XMLHttpRequest

रिमोट यूआरएल को ऐप्लिकेशन में फ़ेच करें और उसका कॉन्टेंट, blob: यूआरएल के तौर पर दिखाएं:

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://supersweetdomainbutnotcspfriendly.com/image.png', true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
  var img = document.createElement('img');
  img.src = window.URL.createObjectURL(this.response);
  document.body.appendChild(img);
};

xhr.send();

हो सकता है कि आप इन संसाधनों को स्थानीय रूप से सेव करना चाहें, ताकि ये ऑफ़लाइन उपलब्ध हों.

बाहरी वेब पेजों को एम्बेड करना

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

वेबव्यू एलिमेंट जोड़ें

आपके webview एलिमेंट में, सोर्स कॉन्टेंट का यूआरएल शामिल होना चाहिए और उसके डाइमेंशन के बारे में बताना चाहिए.

<webview src="http://news.google.com/" width="640" height="480"></webview>

प्रॉपर्टी अपडेट करें

webview टैग की src, width, और height प्रॉपर्टी को डाइनैमिक तौर पर बदलने के लिए, इन प्रॉपर्टी को सीधे JavaScript ऑब्जेक्ट पर सेट करें या setAttribute DOM फ़ंक्शन का इस्तेमाल करें.

document.querySelector('#mywebview').src =
    'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
    'src', 'http://blog.chromium.org/');

सैंडबॉक्स लोकल कॉन्टेंट

सैंडबॉक्सिंग की मदद से, तय किए गए पेजों को सैंडबॉक्स और यूनीक ऑरिजिन में दिखाया जा सकता है. इसके बाद, इन पेजों को कॉन्टेंट की सुरक्षा के बारे में नीति से छूट मिल जाती है. सैंडबॉक्स किए गए पेजों में iframe, इनलाइन स्क्रिप्टिंग, और eval() का इस्तेमाल हो सकता है. sandbox के लिए मेनिफ़ेस्ट फ़ील्ड की जानकारी देखें.

हालांकि, इसमें अहम भूमिका है: सैंडबॉक्स किए गए पेजों के लिए Chrome का इस्तेमाल नहीं किया जा सकता.* API. अगर आपको eval() जैसे काम करने हैं, तो सीएसपी से छूट पाने के लिए इस रास्ते पर जाएं. हालांकि, आप नए बेहतरीन प्रॉडक्ट इस्तेमाल नहीं कर पाएंगे.

सैंडबॉक्स में इनलाइन स्क्रिप्ट का इस्तेमाल करें

यहां सैंडबॉक्स किए गए एक पेज का उदाहरण दिया गया है. इसमें इनलाइन स्क्रिप्ट और eval() का इस्तेमाल किया गया है:

<html>
  <body>
    <h1>Woot</h1>
    <script>
      eval('console.log(\'I am an eval-ed inline script.\')');
    </script>
  </body>
</html>

मेनिफ़ेस्ट में सैंडबॉक्स शामिल करें

आपको मेनिफ़ेस्ट में sandbox फ़ील्ड को शामिल करना होगा और सैंडबॉक्स में दिखाए जाने वाले ऐप्लिकेशन पेजों की सूची बनानी होगी:

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

सैंडबॉक्स किए गए पेज को विंडो में खोलना

किसी भी अन्य ऐप्लिकेशन पेज की तरह, आप एक विंडो बना सकते हैं जिसमें सैंडबॉक्स किया गया पेज खुलता है. यहां एक सैंपल दिया गया है, जो दो विंडो बनाता है. एक मुख्य ऐप्लिकेशन विंडो के लिए है, जिसे सैंडबॉक्स नहीं किया गया है. वहीं, दूसरी विंडो सैंडबॉक्स किए गए पेज के लिए है:

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('window.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 0,
      'top': 0
    }
  });

  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400,
      'left': 400,
      'top': 0
    }
  });
});

किसी ऐप्लिकेशन पेज में सैंडबॉक्स किए गए पेज को एम्बेड करना

सैंडबॉक्स किए गए पेजों को iframe का इस्तेमाल करके, किसी दूसरे ऐप्लिकेशन पेज में भी एम्बेड किया जा सकता है:

<!DOCTYPE html>
<html>
<head>
</head>
  <body>
    <p>I am normal app window.</p>

    <iframe src="sandboxed.html" width="300" height="200"></iframe>
  </body>
</html>

सैंडबॉक्स किए गए पेजों पर मैसेज भेजना

मैसेज भेजने के दो हिस्से होते हैं: आपको भेजने वाले पेज/विंडो से मैसेज पोस्ट करना होगा और पाने वाले पेज/विंडो पर मैसेज सुनना होगा.

मैसेज पोस्ट करें

अपने ऐप्लिकेशन और सैंडबॉक्स किए गए कॉन्टेंट के बीच बातचीत करने के लिए, postMessage का इस्तेमाल किया जा सकता है. यहां बैकग्राउंड स्क्रिप्ट का एक नमूना दिया गया है, जो खुलने वाले सैंडबॉक्स किए गए पेज पर एक मैसेज पोस्ट करता है:

var myWin = null;

chrome.app.runtime.onLaunched.addListener(function() {
  chrome.app.window.create('sandboxed.html', {
    'bounds': {
      'width': 400,
      'height': 400
    }
  }, function(win) {
       myWin = win;
       myWin.contentWindow.postMessage('Just wanted to say hey.', '*');
     });
});

आम तौर पर, वेब की मदद से आपको यह बताना होता है कि मैसेज कहां से भेजा गया है. Chrome ऐप्लिकेशन के पास सैंडबॉक्स किए गए कॉन्टेंट के यूनीक ऑरिजिन का ऐक्सेस नहीं होता. इसलिए, सभी ऑरिजिन को ही स्वीकार किए जाने वाले ऑरिजिन ('*') के तौर पर अनुमति दी जा सकती है. आम तौर पर, Chrome ऐप्स के पास ऑरिजिन की जांच करनी होती है, लेकिन Chrome ऐप्स कॉन्टेंट शामिल है, इसलिए इसकी ज़रूरत नहीं है. ज़्यादा जानने के लिए, window.postMessage देखें.

मैसेज सुनें और उसका जवाब दें

यहां एक सैंपल मैसेज रिसीवर दिया गया है, जिसे आपके सैंडबॉक्स किए गए पेज में जोड़ा जाता है:

var messageHandler = function(event) {
  console.log('Background script says hello.', event.data);

  // Send a reply
  event.source.postMessage(
      {'reply': 'Sandbox received: ' + event.data}, event.origin);
};

window.addEventListener('message', messageHandler);

ज़्यादा जानकारी के लिए, sandbox सैंपल देखें.