محتوای خارجی

مدل امنیتی Chrome Apps محتوای خارجی در iframe و استفاده از اسکریپت‌های درون خطی و eval() را ممنوع می‌کند. می‌توانید این محدودیت‌ها را لغو کنید، اما محتوای خارجی شما باید از برنامه جدا باشد.

محتوای ایزوله نمی‌تواند مستقیماً به داده‌های برنامه یا هر یک از APIها دسترسی داشته باشد. از XMLHttpRequests و پیام‌رسانی متقاطع برای برقراری ارتباط بین صفحه رویداد و محتوای جعبه‌پشتی و دسترسی غیرمستقیم به APIها استفاده کنید.

ارجاع به منابع خارجی

خط‌مشی امنیت محتوای مورد استفاده برنامه‌ها استفاده از انواع نشانی‌های اینترنتی راه دور را مجاز نمی‌داند، بنابراین نمی‌توانید مستقیماً به تصاویر خارجی، شیوه نامه‌ها یا فونت‌های صفحه برنامه ارجاع دهید. در عوض، می‌توانید از XMLHttpRequest‌های متقاطع برای واکشی این منابع استفاده کنید، و سپس آنها را از طریق URL‌های blob: ارائه کنید.

نیاز آشکار

برای اینکه بتوانید 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 به شما امکان می دهد محتوای وب خارجی را در برنامه خود جاسازی کنید، به عنوان مثال، یک صفحه وب. جایگزین iframe هایی می شود که به URL های راه دور اشاره می کنند که در داخل برنامه های Chrome غیرفعال شده اند. برخلاف iframes، تگ webview در یک فرآیند جداگانه اجرا می شود. این بدان معنی است که یک اکسپلویت در داخل آن همچنان ایزوله خواهد بود و نمی تواند امتیازات بالایی را به دست آورد. علاوه بر این، از آنجایی که ذخیره سازی آن (کوکی ها و غیره) از برنامه جدا شده است، هیچ راهی برای دسترسی محتوای وب به هیچ یک از داده های برنامه وجود ندارد.

عنصر مشاهده وب را اضافه کنید

عنصر webview شما باید شامل URL محتوای منبع باشد و ابعاد آن را مشخص کند.

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

به روز رسانی خواص

برای تغییر پویا ویژگی‌های src ، width و height تگ webview ، می‌توانید آن ویژگی‌ها را مستقیماً روی شی جاوا اسکریپت تنظیم کنید یا از تابع setAttribute DOM استفاده کنید.

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

محتوای محلی سندباکس

Sandboxing به صفحات مشخص شده اجازه می دهد تا در یک منبع منحصر به فرد جعبه شنی ارائه شوند. سپس این صفحات از خط مشی امنیتی محتوای خود مستثنی هستند. صفحات Sandbox می توانند از iframe، اسکریپت درون خطی و eval() استفاده کنند. شرح فیلد مانیفست را برای جعبه ایمنی بررسی کنید.

اگرچه این یک معامله است: صفحات sandbox نمی‌توانند از کروم استفاده کنند.* APIها. اگر نیاز به انجام کارهایی مانند eval() دارید، به این مسیر بروید تا از CSP معاف شوید، اما نمی‌توانید از چیزهای جالب جدید استفاده کنید.

از اسکریپت های درون خطی در جعبه شنی استفاده کنید

در اینجا یک صفحه sandboxed نمونه است که از یک اسکریپت درون خطی و 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"]
}

باز کردن یک صفحه sandbox در یک پنجره

درست مانند سایر صفحات برنامه، می‌توانید پنجره‌ای ایجاد کنید که صفحه sandbox در آن باز می‌شود. در اینجا نمونه‌ای وجود دارد که دو پنجره ایجاد می‌کند، یکی برای پنجره اصلی برنامه که sandbox نشده است و دیگری برای صفحه sandboxed:

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

جاسازی یک صفحه sandbox در صفحه برنامه

صفحات Sandboxed را نیز می توان با استفاده از 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 برای برقراری ارتباط بین برنامه خود و محتوای جعبه شنی استفاده کنید. در اینجا یک نمونه اسکریپت پس‌زمینه است که پیامی را به صفحه sandbox که باز می‌کند ارسال می‌کند:

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 مراجعه کنید.

برای پیام گوش دهید و پاسخ دهید

در اینجا یک نمونه گیرنده پیام است که به صفحه sandbox شما اضافه می شود: 

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

برای جزئیات بیشتر، نمونه سندباکس را بررسی کنید.