Blog Belajar HTML: Tag Iframe Sandbox HTML5

Pada tag <iframe> HTML5 terdapat atribut sandbox yang berfungsi untuk pembatasan izin skrip tambahan pada bingkai iframe, contohnya javascript. Jika atribut sandbox diaktifkan murni tanpa value yang terdaftar maka semua pembatasan skrip ekstra dilakukan.

Contoh sederhanya, tanpa atribut sandbox Anda dapat menggukan plugin Facebook atau Twitter share untuk membagikan artikel ke media sosial meskipun sebuah situs ditampilkan dalam iframe. Lihat perbedaan berikut:

tanpa atribut sandbox: nosanbox.html


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html"> </iframe>
    </body>
</html>

Tampilan seperti normal:

Tanpa atribut sandbox.

dengan atribut sandbox: withsandbox.html



    
        
            Contoh tag iframe sandbox


<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox> </iframe>
    </body>
</html>

Tampilan:

Skrip plugin media sosial tidak dizinkan.

Selain javascript beberapa skrip yang diblokir adalah pop ups, form, pointer lock dan top navigation. Untuk mengizinkannya satu per satu, Anda dapat mendeklarasikannya di atribut sandbox:

allow-same-origin: Allows the content to be treated as being from its normal origin. If this keyword is not used, the embedded content is treated as being from a unique origin.

allow-top-navigation: Allows the embedded browsing context to navigate (load) content to the top-level browsing context. If this keyword is not used, this operation is not allowed.

allow-forms: Izinkan submit form (tag form) dalam iframe.
allow-popups: Izinkan window pop ups seperti dari window.open.
allow-scripts: Izinkan javasript di iframe.
allow-pointer-lock: Izinkan konteks browsing Pointer Lock API.
allow-same-origin: Izinkan konten di iframe seperti layaknya di situs asli.
allow-top-navigation: Bisa dibaca di sini.

Contoh penggunaan atribut, misalnya allow-same-origin allow scripts: sandboxproperti.html

<!DOCTYPE HTML>
    <html>
        <head>
            <title>Contoh tag iframe sandbox</title>
        </head>
    <body>
        <iframe width="1000" height="600" src="http://tipspengetahuan.com/solusi-bagi-yang-tak-mampu-beli-gambar-untuk-postingan-tekno-3864.html" sandbox="allow-same-origin allow-scripts"> </iframe>
    </body>
</html>

Untuk atribut lain, contohnya ganti allow-scripts dengan allow-forms.

Referensi tulisan:

iframe; ditulis oleh: Kontributor MDN, developer.mozilla.org, diakses 11 Desember 2014.
About MDN by Mozilla Contributors is licensed under CC-BY-SA 2.5.
HTML <iframe> sandbox Attribute; ditulis oleh: w3schools.com, w3schools.com, diakses 11 Desember 2014

Sunday, January 11, 2015

Tag Iframe Sandbox HTML5

No comments:

Post a Comment