Tìm hiểu về iFrame Sandbox trong HTML5

Newsun · 19/10/2014

Thuộc tính sandbox là một thuộc tính cho thẻ <iframe> mới được đưa vào trong HTML5 nhằm tăng độ bảo mật khi chèn iframe.

Cú pháp tương tự như khi chèn iframe truyền thống, chỉ gắn thêm thuộc tính sandbox:

PHP:

<iframe src="https://demo.com" sandbox="" ></iframe>

hoặc

PHP:

<iframe src="https://demo.com" sandbox="thông_số_1 thông_số_2..." ></iframe>

Nếu được gán là rỗng (sandbox = "") thuộc tính sandbox sẽ hạn chế 1 số các tính năng của trang được load trong iframe (gửi form, popup hay chạy javascript....).

Ví dụ: Trang demo.com dùng đoạn script sau để chuyển hướng location về top:

PHP:

<script type="text/javascript">

 if (top.location.href != self.location.href)
 top.location.href = self.location.href;
</script>

Khi bạn chèn iframe vào trang domain.com:

PHP:

<iframe src="https://demo.com"></iframe>

Khi domain.com load xong, lập tức bị chuyển ép sang trang demo.com.

Điều này sẽ được ngăn chặn nếu bạn thêm thuộc tính sandbox cho iframe.

Thuộc tính sandbox được hỗ trợ trong tất cả các trình duyệt phổ biến hiện nay có hỗ trợ HTML5.

Lưu ý: Các thuộc tính sandbox không được hỗ trợ trong IE 9 và các phiên bản trước đó, hoặc trong Opera 12 và các phiên bản trước đó.

Các thuộc tính giá trị của sanbox:

"" : Áp dụng tất cả các hạn chế mặc định.
allow-same-origin : Cho phép iframe được thể hiện như nguyên bản.
allow-top-navigation : Cho phép iframe được truy xuất vào các thành phần của trang.
allow-forms : Cho phép iframe có thể gửi form.
allow-scripts : Cho phép các script trong iframe thực thi.

Có thể dùng nhiều thuộc tính giá trị cùng lúc để BỎ các hạn chế cụ thể và viết cách nhau một khoảng trắng.

Ví dụ:

PHP:

<iframe src="https://demo.com" sandbox="allow-forms allow-scripts" ></iframe>

Cho phép iframe demo.com được gửi form và thực thi script.

Cách kiểm tra xem trình duyệt có hỗ trợ iframe sandbox hay không cho deverloper:

Tạo 1 file php với nội dung và chạy:

PHP:

<?php
if ("sandbox" in document.createElement("iframe")) {
 echo "Trình duyệt này hỗ trợ sandbox.";
}

Tìm hiểu về iFrame Sandbox trong HTML5

Newsun

Believe in Good

〈 Phần mềm chụp ảnh trái tim bằng cánh tay

Tiêu chí đánh giá Backlink chất lượng 〉

Chủ đề liên quan