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.