المحتوى الخارجي

لا يسمح نموذج أمان تطبيقات Chrome بالمحتوى الخارجي في إطارات iframe واستخدام النصوص البرمجية المضمّنة وeval(). يمكنك تجاوز هذه القيود، ولكن يجب عزل المحتوى الخارجي عن التطبيق.

لا يمكن للمحتوى المنعزل الوصول مباشرةً إلى بيانات التطبيق أو أي من واجهات برمجة التطبيقات. استخدام طلبات XMLHttpRequest المشتركة المصدر والمراسلات اللاحقة للتواصل بين صفحة الحدث والمحتوى المحمي في وضع الحماية والوصول إلى واجهات برمجة التطبيقات بشكل غير مباشر.

الرجوع إلى الموارد الخارجية

تمنع سياسة أمان المحتوى التي تستخدمها التطبيقات استخدام أنواع عديدة من عناوين URL البعيدة، ولذلك لا يمكنك الإشارة مباشرةً إلى الصور أو أوراق الأنماط أو الخطوط الخارجية من صفحة تطبيق. بدلاً من ذلك، يمكنك استخدام طلبات XMLHttpRequest متعددة المصادر لاسترجاع هذه الموارد، وعرضها عبر عناوين URL الخاصة بـ blob:.

متطلبات ملف البيان

لتتمكّن من تنفيذ طلبات XMLHttpRequest من مصادر متعددة، عليك إضافة إذن لمضيف عنوان 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 أو استخدام دالة DOM setAttribute.

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);

لمزيد من التفاصيل، راجِع نموذج sandbox.