Chrome Apps का सुरक्षा मॉडल, iframe में बाहरी कॉन्टेंट और इनलाइन के इस्तेमाल की अनुमति नहीं देता
स्क्रिप्टिंग और eval(). इन पाबंदियों को बदला जा सकता है. हालांकि, आपका बाहरी कॉन्टेंट ऐसा होना चाहिए
को ऐप से अलग किया जाता है.
आइसोलेटेड कॉन्टेंट, ऐप्लिकेशन के डेटा या किसी भी एपीआई को सीधे ऐक्सेस नहीं कर सकता. क्रॉस-ऑरिजिन का इस्तेमाल करें इवेंट पेज और सैंडबॉक्स किए गए कॉन्टेंट और सीधे तौर पर एपीआई ऐक्सेस न कर सके.
बाहरी संसाधनों का रेफ़रंस देना
ऐप्लिकेशन, कॉन्टेंट की सुरक्षा के बारे में नीति का इस्तेमाल करते हैं. इसलिए, यह नीति कई तरह के रिमोट यूआरएल इस्तेमाल करने की अनुमति नहीं देती है, इसलिए
किसी ऐप्लिकेशन पेज से सीधे तौर पर बाहरी इमेज, स्टाइलशीट या फ़ॉन्ट का रेफ़रंस नहीं दिया जा सकता. इसके बजाय, आप यह कर सकते है:
इन संसाधनों को फ़ेच करने के लिए, क्रॉस-ऑरिजिन 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(). सैंडबॉक्स के लिए, मेनिफ़ेस्ट फ़ील्ड की जानकारी देखें.
हालांकि, इसमें ट्रेड-ऑफ़ नहीं है: सैंडबॉक्स किए गए पेज, Chrome का इस्तेमाल नहीं कर सकते.* एपीआई. अगर आपको ये काम करने हैं
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 ऐप्लिकेशन में कॉन्टेंट शामिल है, इसलिए इसकी ज़रूरत नहीं है. इस बारे में ज़्यादा जानने के लिए, यह देखें 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);
ज़्यादा जानकारी के लिए, सैंडबॉक्स सैंपल देखें.