Τα iFrames υπάρχουν εδώ και πολύ καιρό στο πρότυπο HTML. Στο HTML 4.0 όμως τοποθετήθηκαν μαζί με τα πλέον παρωχημένα Frames στην HTML-Variante Frameset. Τα Frames δεν λαμβάνονται ευρύτερα υπ' όψιν στο HTML5, ενώ τα ενσωματωμένα πλαίσια (iFrames) ναι.
Τα iFrames μας επιτρέπουν να ενσωματώσουμε άλλες ιστοσελίδες. Έτσι, ο περιηγητής αναπαράγει μια άλλη αρχείο HTML μέσα στην τρέχουσα ιστοσελίδα. Τα περιεχόμενα του παραθύρου του iFrame μπορούν να διαμορφωθούν μεμονωμένα.
Όταν αναφερόμαστε στα iFrames, φυσικά πρέπει να εξεταστεί διακριτικά την ασφάλεια αυτής της τεχνικής HTML. Ένα πρόβλημα εδώ αποτελεί ο κακόβουλος κώδικας που μπορεί να διακριθεί στις ιστοσελίδες μέσω iFrames απαρατήρητα. Αυτό είναι φυσικά ένα τεράστιο άγχος.
Ωστόσο, στο HTML5 υπάρχουν πλέον κατάλληλοι μηχανισμοί ασφαλείας για την αποφυγή αυτών των προβλημάτων. Περισσότερα σχετικά σε αυτό το εγχειρίδιο. Παρόλα αυτά, πρέπει να ληφθεί υπόψιν πριν από τη χρήση των iFrames ότι αυτά μπορεί να αποτελούν δυνητικό κίνδυνο, ειδικά επειδή τα νέα χαρακτηριστικά ασφαλείας δεν υποστηρίζονται ακόμη από όλους τους περιηγητές.
Στο HTML5 λοιπόν τα iFrames ανήκουν στον σταθερό πρότυπο και φέρνουν μερικά επιπλέον χαρακτηριστικά εδώ. Το παρακάτω παράδειγμα δείχνει πώς δίνονται οι iFrames.
<iframe src="http://www.psd-tutorials.de/" width="420" height="350"> <a href="http://www.psd-tutorials.de/">PSD-Tutorials.de</a> </iframe>
Στον περιηγητή το αποτέλεσμα φαίνεται όπως παρακάτω:
Στο στοιχείο iframe δόθηκε το χαρακτηριστικό src. Αυτό το src περιέχει ως τιμή τη σελίδα που θα εμφανιστεί. Μπορεί να πρόκειται για ένα τοπικό αρχείο. Ωστόσο, είναι επίσης δυνατή - όπως στο προηγούμενο παράδειγμα - η κλήση εξωτερικού πόρου.
Με τα δύο χαρακτηριστικά width και height καθορίζονται το πλάτος και το ύψος του iFrames. Αν το ενσωματωμένο περιεχόμενο είναι μεγαλύτερο από τον καθορισμένο μέγεθος του iFrame, εμφανίζονται γραμμές κύλισης.
Μεταξύ των ανοίγουσας και κλείσουσας ετικέτας <iframe> μπορούν να οριστούν οποιαδήποτε περιεχόμενα. Αυτά εμφανίζονται όμως μόνο σε περιηγητές που δεν γνωρίζουν το στοιχείο iframe.
Στο HTML5 εισάγονται νέα χαρακτηριστικά για τα iFrames, τα οποία σχετίζονται κυρίως με τη συμπεριφορά του Sandbox.
Στους περιηγητές, η Same Origin Policy εξασφαλίζει ότι μια ενσωματωμένη ιστοσελίδα δεν μπορεί να τροποποιηθεί κατά την εμφάνισή της. Αυτή η λειτουργία ασφαλείας είναι λογική. Παρ' όλα αυτά, δεν είναι πάντα ορθή. Γι' αυτό στο HTML5 προστέθηκε το καταληκτικό sandbox, μέσω του οποίου οι περιηγητές μπορούν να καθορίζουν ρητά ποιες άδειες θα δοθούν στο περιεχόμενο που ενσωματώνεται από μια εξωτερική σελίδα σε ένα iFrame.
<iframe sandbox="allow-forms" src="getusercontent.cgi?id=12193"> </iframe>
Τα iFrames που εξοπλίζονται με το χαρακτηριστικό sandbox δεν έχουν πρόσβαση στο DOM της ενσωματωμένης ιστοσελίδας. Επιπλέον, δεν επιτρέπεται η εκτέλεση σεναρίων και η αποθήκευση cookies. Αυτοί οι περιορισμοί μπορούν να αρθούν με διάφορες τιμές Sandbox.
Στο χαρακτηριστικό sandbox μπορούν να ανατεθούν διαφορετικές τιμές. Με το allow-forms η ενσωματωμένη ιστοσελίδα μπορεί να λάβει πληροφορίες από τον χρήστη μέσω φορμών. Οι χρήστες δε γνωρίζουν ότι η φόρμα δεν προέρχεται από την τρέχουσα σελίδα.
Αντίθετα, με το allow-some-origin η ενσωματωμένη ιστοσελίδα χειρίζεται ως εάν προέρχεται από τον ίδιο κεντρικό υπολογιστή. Με αυτή την τιμή αρθεί η Same Origin Policy.
Η τιμή allow-top-navigation επιτρέπει στο ενσωματωμένο περιεχόμενο να αλλάξει το περιεχόμενο του ανώτατου περιεχομένου περιήγησης.
Και τέλος, υπάρχει το allow-script. Μέσω αυτού επιτρέπεται στην ενσωματωμένη ιστοσελίδα να περιέχει JavaScript που μπορεί να επηρεάσει τη σελίδα που το ένθετε.
Παρακάτω παρουσιάζεται ένα παράδειγμα για το πώς θα μπορούσε να είναι μια σχετική οδηγία sandbox:
<iframe sandbox="allow-same-origin" src="http://www.psd-tutorials.de/"> </iframe>
Ωστόσο, μπορείτε επίσης να αναθέσετε πολλαπλές τιμές. Αυτές θα πρέπει να διαχωρίζονται με κενό. Δείτε ένα παράδειγμα εδώ:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http://www.psd-tutorials.de/"> </iframe>
Τα iFrames είναι συνήθως σχεδιασμένα για την ενσωμάτωση εξωτερικών περιεχομένων. Ωστόσο, μπορούν αλλιώς να συμπεριληφθούν επίσης.
<iframe src="http://www.psd-tutorials.de/" width="200" height="150" seamless> </iframe>
Αυτό το χαρακτηριστικό έχει τα χαρακτηριστικά του. Έτσι, τα στόχευσης στο ενσωματωμένο έγγραφο - αν δεν έχει ορισθεί κάτι διαφορετικό - εμφανίζονται στο παράθυρο περιηγήσεως στο οποίο έχει καθοριστεί το στοιχείο iframe. (Στον κανονικό ενσωματισμό, οι στόχευσης - αν δεν έχει καθοριστεί κάτι διαφορετικό - εμφανίζονται στο παράθυρο του iFrame).
Το seamless υποστηρίζεται προς το παρόν μόνο από το Google Canary, δηλαδή την αναπτυσσόμενη εκδοχή αυτού του περιηγητή.
Το άλλο
Σε αυτήν την περίπτωση λοιπόν λείπει το src-Attribut, μέσω του οποίου συνήθως υποδεικνύεται το αρχείο που πρόκειται να ενσωματωθεί.
Το περιεχόμενο που δίνεται μέσω του srcdoc θεωρείται ότι προέρχεται από έναν ξένο διακομιστή. Άρα υπόκειται πλήρως στη Same Origin Policy. Είναι ενδιαφέρον αυτή η συμπεριφορά για παραδείγματα σχετικά με τις ορισμούς σεναρίου. Επιτρέπεται οτιδήποτε HTML και JavaScript κώδικας. Ωστόσο, τα εισαγωγικά και το σύμβολο & πρέπει να περιγράφονται με τα ονομασμένα χαρακτηριστικά " και &.
Μπορείτε επίσης να ορίσετε άμεσα μια σελίδα εδώ και έτσι να εμφανίσετε το επιθυμητό περιεχόμενο.
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc=" <!DOCTYPE html> <html> <head> <title>PSD-Tutorials.de</title> </head> <body> <p>…</p> </body> </html>"> </iframe>
Δεν χρειάζεται να είναι απαραίτητα ένα πλήρες αρχείο HTML σε αυτήν την περίπτωση. Είναι φυσικά εφικτό και κάτι τέτοιο:
<iframe sandbox="allow-same-origin allow-forms allow-scripts" seamless="seamless" srcdoc="<p>PSD-Tutorials.de</p>"> </iframe>
Στον περιηγητή το περιεχόμενο εμφανίζεται ως εξής:
Πρόκειται λοιπόν για συνηθισμένη σύνταξη HTML, χωρίς σενάρια κλπ.
Μερικές σημειώσεις για τα χαρακτηριστικά που μέχρι τώρα χρησιμοποιούνταν για την οπτική μέριμνα: Πράγματα όπως τα scrolling, marginwidth και marginheight δεν επιτρέπονται πλέον στο HTML5. Αυτά τα γνωρίσματα αντικαθίστανται με CSS.
