Chrome Apps নিরাপত্তা মডেল আইফ্রেমে বাহ্যিক সামগ্রী এবং ইনলাইন স্ক্রিপ্টিং এবং eval() ব্যবহারের অনুমতি দেয় না৷ আপনি এই বিধিনিষেধগুলিকে ওভাররাইড করতে পারেন, তবে আপনার বাহ্যিক সামগ্রী অবশ্যই অ্যাপ থেকে বিচ্ছিন্ন করা উচিত।
বিচ্ছিন্ন বিষয়বস্তু সরাসরি অ্যাপের ডেটা বা কোনো API অ্যাক্সেস করতে পারে না। ক্রস-অরিজিন XMLHttpRequests এবং পোস্ট-মেসেজিং ব্যবহার করুন ইভেন্ট পৃষ্ঠা এবং স্যান্ডবক্স করা বিষয়বস্তুর মধ্যে যোগাযোগ করতে এবং পরোক্ষভাবে API-এ অ্যাক্সেস করুন।
বাহ্যিক সম্পদ উল্লেখ করা
অ্যাপ্লিকেশানগুলির দ্বারা ব্যবহৃত বিষয়বস্তু নিরাপত্তা নীতি অনেক ধরণের দূরবর্তী URL ব্যবহারকে অনুমোদন করে না, তাই আপনি সরাসরি একটি অ্যাপ পৃষ্ঠা থেকে বহিরাগত ছবি, স্টাইলশীট বা ফন্ট উল্লেখ করতে পারবেন না৷ পরিবর্তে, আপনি এই সংস্থানগুলি আনতে ক্রস-অরিজিন XMLHttpRequests ব্যবহার করতে পারেন এবং তারপরে blob: URL-এর মাধ্যমে সেগুলি পরিবেশন করতে পারেন।
ম্যানিফেস্ট প্রয়োজনীয়তা
ক্রস-অরিজিন XMLHttpRequests করতে সক্ষম হতে, আপনাকে দূরবর্তী URL এর হোস্টের জন্য একটি অনুমতি যোগ করতে হবে:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
ক্রস-অরিজিন XMLHttpRequest
অ্যাপে দূরবর্তী URL আনুন এবং একটি blob: URL:
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 ট্যাগ আপনাকে আপনার অ্যাপে বাহ্যিক ওয়েব সামগ্রী এম্বেড করতে দেয়, উদাহরণস্বরূপ, একটি ওয়েব পৃষ্ঠা৷ এটি আইফ্রেমগুলিকে প্রতিস্থাপন করে যা দূরবর্তী URL গুলিকে নির্দেশ করে, যা Chrome Apps-এর মধ্যে অক্ষম করা আছে৷ আইফ্রেমের বিপরীতে, webview ট্যাগ একটি পৃথক প্রক্রিয়ায় চলে। এর মানে হল যে এটির ভিতরে একটি শোষণ এখনও বিচ্ছিন্ন থাকবে এবং উচ্চতর বিশেষাধিকার পেতে সক্ষম হবে না। অধিকন্তু, যেহেতু এর স্টোরেজ (কুকিজ, ইত্যাদি) অ্যাপ থেকে আলাদা করা হয়েছে, তাই ওয়েব কন্টেন্টের জন্য অ্যাপের কোনো ডেটা অ্যাক্সেস করার কোনো উপায় নেই।
ওয়েবভিউ উপাদান যোগ করুন
আপনার webview উপাদানে অবশ্যই উৎস বিষয়বস্তুর URL অন্তর্ভুক্ত করতে হবে এবং এর মাত্রা নির্দিষ্ট করতে হবে।
<webview src="http://news.google.com/" width="640" height="480"></webview>
বৈশিষ্ট্য আপডেট করুন
webview ট্যাগের src , width এবং height বৈশিষ্ট্যগুলিকে গতিশীলভাবে পরিবর্তন করতে, আপনি হয় সরাসরি জাভাস্ক্রিপ্ট অবজেক্টে সেই বৈশিষ্ট্যগুলি সেট করতে পারেন, অথবা setAttribute DOM ফাংশনটি ব্যবহার করতে পারেন।
document.querySelector('#mywebview').src =
'http://blog.chromium.org/';
// or
document.querySelector('#mywebview').setAttribute(
'src', 'http://blog.chromium.org/');
স্যান্ডবক্স স্থানীয় বিষয়বস্তু
স্যান্ডবক্সিং নির্দিষ্ট পৃষ্ঠাগুলিকে স্যান্ডবক্সযুক্ত, অনন্য উত্সে পরিবেশন করার অনুমতি দেয়। এই পৃষ্ঠাগুলি তখন তাদের বিষয়বস্তু সুরক্ষা নীতি থেকে অব্যাহতিপ্রাপ্ত৷ স্যান্ডবক্সযুক্ত পৃষ্ঠাগুলি iframes, ইনলাইন স্ক্রিপ্টিং এবং eval() ব্যবহার করতে পারে। স্যান্ডবক্সের জন্য ম্যানিফেস্ট ক্ষেত্রের বিবরণ দেখুন।
যদিও এটি একটি ট্রেড-অফ: স্যান্ডবক্সযুক্ত পৃষ্ঠাগুলি ক্রোম ব্যবহার করতে পারে না৷* APIগুলি৷ আপনি যদি eval() এর মত কিছু করতে চান, তাহলে CSP থেকে অব্যাহতি পেতে এই রুটে যান, কিন্তু আপনি দুর্দান্ত নতুন জিনিস ব্যবহার করতে পারবেন না।
স্যান্ডবক্সে ইনলাইন স্ক্রিপ্ট ব্যবহার করুন
এখানে একটি নমুনা স্যান্ডবক্সযুক্ত পৃষ্ঠা যা একটি ইনলাইন স্ক্রিপ্ট এবং 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 Apps বিষয়বস্তু রয়েছে, তাই এটি প্রয়োজনীয় নয়৷ আরও জানতে, 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);
আরো বিস্তারিত জানার জন্য, স্যান্ডবক্স নমুনা দেখুন.