لا يسمح نموذج أمان تطبيقات Chrome بالمحتوى الخارجي في إطارات iframe واستخدام التنسيقات المضمَّنة
البرمجة النصية وeval(). يمكنك تجاوز هذه القيود، ولكن يجب أن يكون المحتوى الخارجي
معزولة عن التطبيق.
لا يمكن للمحتوى المعزول الوصول مباشرةً إلى بيانات التطبيق أو أي من واجهات برمجة التطبيقات. استخدام مصادر متعددة XMLHttpRequests وما بعد المراسلة للاتصال بين صفحة الحدث والمحتوى في وضع الحماية الوصول غير المباشر إلى واجهات برمجة التطبيقات.
الإشارة إلى الموارد الخارجية
ولا تسمح سياسة أمان المحتوى التي تستخدمها التطبيقات باستخدام أنواع عديدة من عناوين URL البعيدة، ولذلك
لا يمكن أن تشير بشكل مباشر إلى صور أو أوراق أنماط أو خطوط خارجية من صفحة تطبيق. بدلاً من ذلك، يمكنك
استخدام طلبات XMLHttpRequests مشتركة المنشأ لجلب هذه الموارد، ثم عرضها عبر عناوين URL blob:.
متطلبات ملف البيان
لتتمكن من تقديم طلبات XMLHttpRequests مشتركة المنشأ، عليك إضافة إذن لعناوين URL البعيدة. المضيف:
"permissions": [
"...",
"https://supersweetdomainbutnotcspfriendly.com/"
]
طلب XMLHttpRequest من مصادر متعددة
يمكنك استرجاع عنوان URL البعيد إلى التطبيق وعرض محتواه على شكل عنوان URL لـ 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 التي تشير إلى عناوين URL بعيدة، والتي يتم إيقافها داخل تطبيقات Chrome. إلغاء الإعجاب
iframe، يتم تشغيل العلامة webview في عملية منفصلة. وهذا يعني أن الاستغلال بداخلها سوف
سيظلوا معزولين ولن يتمكنوا من الحصول على أذونات مميزة وعالية المستوى. علاوة على ذلك، نظرًا لأن تخزينها
(ملفات تعريف الارتباط وغيرها) عن التطبيق، فلا توجد طريقة لمحتوى الويب للوصول إلى أي من
التطبيق.
إضافة عنصر WebView
يجب أن يشتمل العنصر webview على عنوان URL المؤدي إلى المحتوى المصدر وتحديد أبعاده.
<webview src="http://news.google.com/" width="640" height="480"></webview>
تعديل المواقع
لتغيير الخصائص src وwidth وheight ديناميكيًا لعلامة webview، يمكنك اتّباع إحدى الخطوتَين التاليتَين:
إعداد هذه السمات مباشرةً على كائن 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.* واجهات برمجة التطبيقات. إذا كنت بحاجة إلى القيام بأشياء مثل
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 مضمّن، لن تحتاج إلى ذلك. لمزيد من المعلومات، يُرجى مراجعة 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);
لمزيد من التفاصيل، يمكنك الاطّلاع على نموذج وضع الحماية.