Nội dung bên ngoài

Mô hình bảo mật Ứng dụng Chrome không cho phép nội dung bên ngoài trong iframe và việc sử dụng nội dung cùng dòng tập lệnh và eval(). Bạn có thể ghi đè những hạn chế này nhưng nội dung bên ngoài của bạn phải tách biệt với ứng dụng.

Nội dung tách biệt không thể truy cập trực tiếp vào dữ liệu của ứng dụng hoặc bất kỳ API nào. Sử dụng nhiều nguồn gốc XMLHttpRequests và sau khi gửi thông báo để giao tiếp giữa trang sự kiện với nội dung trong hộp cát và truy cập gián tiếp vào các API.

Tham chiếu các tài nguyên bên ngoài

Chính sách bảo mật nội dung mà các ứng dụng sử dụng không cho phép dùng nhiều loại URL từ xa. Vì vậy, bạn không thể trực tiếp tham chiếu hình ảnh, biểu định kiểu hoặc phông chữ bên ngoài từ trang ứng dụng. Thay vào đó, bạn có thể sử dụng XMLHttpRequests nhiều nguồn gốc để tìm nạp các tài nguyên này, sau đó phân phát chúng qua URL blob:.

Yêu cầu về tệp kê khai

Để có thể thực hiện XMLHttpRequests nhiều nguồn gốc, bạn cần thêm quyền cho các URL từ xa máy chủ lưu trữ:

"permissions": [
    "...",
    "https://supersweetdomainbutnotcspfriendly.com/"
  ]

XMLHttpRequest nhiều nguồn gốc

Tìm nạp URL từ xa vào ứng dụng và phân phát nội dung trong ứng dụng dưới dạng 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();

Bạn nên lưu các tài nguyên này trên thiết bị để chúng có thể sử dụng khi không có mạng.

Nhúng trang web bên ngoài

Thẻ webview cho phép bạn nhúng nội dung trên web bên ngoài vào ứng dụng của mình, ví dụ: web . Tính năng này thay thế các iframe trỏ đến các URL từ xa (bị tắt bên trong Ứng dụng Chrome). Bỏ thích iframe, thẻ webview sẽ chạy trong một quy trình riêng. Điều này có nghĩa là việc khai thác bên trong nó sẽ vẫn bị tách biệt và không thể có được đặc quyền cấp cao. Hơn nữa, vì bộ nhớ (cookie, v.v.) tách biệt với ứng dụng, không có cách nào để nội dung trên web truy cập vào bất kỳ của ứng dụng.

Thêm phần tử WebView

Phần tử webview của bạn phải chứa URL đến nội dung nguồn và chỉ định kích thước của nội dung đó.

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

Cập nhật cơ sở lưu trú

Để thay đổi linh động các thuộc tính src, width và height của thẻ webview, bạn có thể đặt các thuộc tính đó trực tiếp trên đối tượng JavaScript hoặc sử dụng hàm DOM setAttribute.

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

Hộp cát về nội dung cục bộ

Cơ chế hộp cát cho phép phân phát các trang cụ thể trong một nguồn gốc duy nhất và dạng hộp cát. Sau đó, các trang này miễn trừ Chính sách bảo mật nội dung của họ. Trang hộp cát có thể sử dụng iframe, tập lệnh cùng dòng và eval(). Xem nội dung mô tả về trường trong tệp kê khai cho sandbox.

Tuy nhiên, bạn vẫn có một sự đánh đổi: các trang hộp cát không thể sử dụng Chrome.* API. Nếu bạn cần làm những việc như eval(), hãy làm theo cách này để được miễn trừ CSP, nhưng bạn sẽ không thể sử dụng nội dung mới mẻ và thú vị.

Sử dụng tập lệnh cùng dòng trong hộp cát

Dưới đây là mẫu trang hộp cát sử dụng tập lệnh cùng dòng và eval():

<html>
  <body>
    <h1>Woot</h1>
    <script>
      eval('console.log(\'I am an eval-ed inline script.\')');
    </script>
  </body>
</html>

Đưa hộp cát vào tệp kê khai

Bạn cần đưa trường sandbox vào tệp kê khai và liệt kê các trang ứng dụng sẽ được phân phát trong một hộp cát:

"sandbox": {
  "pages": ["sandboxed.html"]
}

Mở một trang hộp cát trong một cửa sổ

Giống như mọi trang ứng dụng khác, bạn có thể tạo một cửa sổ để mở trang hộp cát trong đó. Sau đây là một mẫu tạo hai cửa sổ, một cho cửa sổ ứng dụng chính chưa được tạo hộp cát và một cho cửa sổ trang hộp cát:

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

Nhúng trang hộp cát vào trang ứng dụng

Bạn cũng có thể nhúng các trang hộp cát vào một trang ứng dụng khác bằng 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>

Gửi thư đến các trang có trong hộp cát

Có hai phần để gửi thư: bạn cần đăng thư từ trang/cửa sổ người gửi, và nghe thông báo trên trang/cửa sổ nhận.

Đăng tin nhắn

Bạn có thể dùng postMessage để giao tiếp giữa ứng dụng của mình và nội dung trong hộp cát. Sau đây là ví dụ tập lệnh nền sẽ đăng thông báo lên trang hộp cát mà thông báo đó sẽ mở:

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.', '*');
     });
});

Nói chung trên web, bạn nên chỉ định chính xác nguồn gốc mà thư được gửi đi. Các ứng dụng Chrome không có quyền truy cập vào nguồn gốc duy nhất của nội dung trong hộp cát nên bạn chỉ có thể thêm tất cả vào danh sách cho phép nguồn gốc làm nguồn gốc được chấp nhận ("*"). Ở đầu nhận, bạn thường nên kiểm tra máy chủ gốc; nhưng vì nội dung trong Ứng dụng Chrome có chứa nội dung đó nên không cần thiết. Để tìm hiểu thêm, hãy xem window.postMessage.

Nghe tin nhắn và trả lời

Dưới đây là trình nhận thông báo mẫu được thêm vào trang hộp cát của bạn:

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

Để biết thêm thông tin chi tiết, hãy xem mẫu sandbox.