MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

Learning the Web

De objecte a iframe - altres tecnologies d'incrustació

This translation is incomplete. Please help translate this article from English.

Per ara, realment, s'aconseguit penjar coses incrustades en les pàgines web, incloent imatges, àudio i vídeo. En aquest punt ens agradaria fer un petit pas a banda, mirant a alguns elements que ens permetin introduir una àmplia varietat de tipus de contingut en les pàgines web: els elements <iframe>, <embed> i <object>. Els <iframe>s són per incrustar altres pàgines web, i els altres dos, permeten incrustar arxius PDF, SVG, i fins i tot, flash - una tecnologia que està en camí de desaparèixer, però que encara es veu semi-regular.

Requisits Previs: Coneixements bàsics d'informàtica, programari bàsic instal.lat, coneixement bàsic de tractar amb arxius, familiaritat-se amb els fonaments d'HTML (com s'explica en Inici amb HTML) i els articles anteriors d'aquest mòdul.
Objectiu: Aprendre com inserir elements en pàgines web fent servir <object>, <embed> i <iframe>, com pel·lícules Flash i altres pàgines web.

Una breu història de la incrustació

Fa molt de temps, a la web, era popular l'ús de marcs (frames) per crear llocs web - petites parts d'un lloc web que s'emmagatzemaven en pàgines HTML individuals. Aquests eran inserits en un document mestre anomenat conjunt de marcs (frameset), el que permetia especificar l'àrea de la pantalla de cada marc ple, com una manera de dimensionar columnes i files d'una taula. Aquests van ser considerats un súmmum de frescor a mitjans i finals dels 90, però no hi havia proves, que tenir la pàgina web dividida en trossos més petits com aquest era millor per la velocitat de descàrrega - sent especialment notable que les connexions de xarxa era tan lentes en aquell temps. Però, van tenir molts problemes, que sobrepassaven els aspectes positius com la velocitat de la xarxa, ara més ràpida, pel que ja no es veu la seva utilització.

Una mica més tard (finals dels 90, principis de 2000), les tecnologies de plug-in es van fer molt populars, com els Java Applets i Flash - aixó va permetre els desenvolupadors web incrustar un contingut ric en pàgines web com vídeo i animacions, que simplement no estaven disponibles a través d'HTML. La incrustació d'aquestes tecnologies es va aconseguir mitjançant elements com <object>, i el menys usat <embed>, van ser molt útils a l'hora. Des de llavors, han caigut en desús a causa de molts problemes, inclosa l'accessibilitat, la seguretat, mida del fitxer, i més; avui dia la majoria dels dispositius mòbils no són compatibles amb aquest tipus de plugins, i el suport d'escriptori està en el camí de ser exclòs.

Finalment, l'element <iframe> va aparèixer (juntament amb altres formes d'inserir contingut, com <canvas>, <video>, etc.) Això va proporcionar una manera de incrustar un document web sencer dins d'un altre, com si es tractés d'un <img> o un altre element, i s'utilitza regularment en l'actualitat.

Sortint de la lliçó de la història, anem a seguir endavant i veure com utilitzar alguns d'aquests.

Aprenentatge actiu: usos clàssics d'incrustació

En aquest article saltarem directament a una secció d'aprenentatge actiu, per donar-vos immediatament una idea real del que les tecnologies d'incrustació són útils. El món en línia està molt familiaritzat amb Youtube, però moltes persones no saben sobre algunes dels mecanismes d'intercanvi que té disponibles. Vegem com Youtube ens permet incrustar un vídeo en qualsevol pàgina que ens agradi, utilitzant un <iframe>.

  1. En primer lloc, anar a Youtube i trobar un vídeo que us agradi.
  2. A continuació en el vídeo trobareu un botó Compartir - seleccioneu aquesta opció per mostrar les opcions d'ús compartit.
  3. Seleccioneu l'opció Inserir i se us donarà un cert codi <iframe> - copieu aquest.
  4. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.

Per als punts de bonificació, també es podria tractar d'insertar un Google Map en l'exemple:

  1. Aneu a Google Maps i trobar un mapa que us agradi.
  2. Feu clic al "Hamburger Menu" (tres línies horitzontals) a la part superior esquerra de la interfície d'usuari.
  3. Seleccioneu l'opció Compartir o insetar un mapa.
  4. Seleccionar l'opció insertar un mapa, us donarà un cert codi <iframe> - copieu aquest.
  5. Inserir-lo en el quadre d'entrada de sota, i veureu quin és el resultat a la sortida.

Si cometeu un error, sempre es pot restablir amb el botó de Reinici. Si aconseguiu realment queda encallats, feu clic al botó Mostra solució per veure una resposta.

Iframes en detall

Per tant, això va ser fàcil i divertit oi? Els elements <iframe> estan dissenyats per permetre inserir altres documents web dins del document actual. Això és molt bó per incorporar continguts de tercers al lloc web en que no es pot tenir control directe sobre i no es vol haver d'implementar la seva pròpia versió - com els vídeo de proveïdors de vídeo en línia, sistemas de comentarios como Disqus, mapes de proveïdors de mapes en línia, pancartes publicitaries, etc. Els exemples editables en directe que s'han estat usant a través d'aquest curs s'implementen utilitzant <iframe>s.

Hi ha alguns Problemes de seguretat greus a considerar amb els <iframe>s, com veurem més endavant, però això no vol dir que no s'hagin d'utilitzar en els llocs web - només requereix una mica de coneixement i un raonament. Explorarem el codi en una mica més de detall. Digueu que voleu incloure en el glossari MDN en una de les seves pàgines web - podreu intentar alguna cosa com això:

<iframe src="https://developer.mozilla.org/en-US/docs/Glossary"
        width="100%" height="500" frameborder="0"
        allowfullscreen sandbox>
  <p> <a href="https://developer.mozilla.org/en-US/docs/Glossary">
    Fallback link for browsers that don't support iframes
  </a> </p>
</iframe>

Aquest exemple inclou els elements essencials bàsics necessaris per utilitzar un <iframe>:

allowfullscreen
Si s'estableix, el <iframe> és capaç de ser col·locat en la manera de pantalla completa amb Full Screen API (està fora de l'abast per a aquest article).
frameborder
Si s'estableix en 1, això indica al navegador per establir una frontera entre aquest marc i altres marcs, que és el comportament per defecte. 0 elimina la frontera. L'ús d'aquest realment no es recomana més, ja que el mateix efecte es pot aconseguir, millor, mitjançant border: none; en el CSS.
src
Aquest atribut, igual que amb <video>/<img>, conté una ruta que apunta a la URL del document per a ser incrustat.
width i height
Aquests atributs especifiquen l'amplada i l'alçada que es vol que tingui el iframe.
Contingut alternatiu
De la mateixa manera que altres elements similars com <video>, pot incloure el contingut alternatiu entre les etiquetes d'obertura i tancament <iframe></iframe> que apareixeran si el navegador no suporta l'etiqueta <iframe>. En aquest cas hem inclòs un enllaç a la pàgina en el seu lloc. És poc probable trobar-se amb qualsevol navegador que no sigui compatible amb <iframe>s avui dia.
sandbox
Aquest atribut, funciona en navegadors una mica més modern que la resta de les característiques <iframe> (per exemple, Internet Explorer 10 i superior) sol·licita la configuració de seguretat reforçada; direm més sobre això en la següent secció.

Nota: Per tal de millorar la velocitat, és una bona idea establir l'atribut src de l'iframe amb JavaScript després que el contingut principal s'hagi carregat. Això fa que la pàgina s'utilitzi més aviat i disminueixi el temps de càrrega de la pàgina oficial (una mètrica important SEO).

Problemes de seguretat

Esmentem abans els problemes de seguretat - Entrarem en això en detall, una mica més, ara. No esperem que es pugui entendre tot aquest contingut perfectament la primera vegada; només volem fer-vos conscients d'aquesta preocupació, i proporcionar una referència per tornar a mesura que tingueu més experiéncia i començar a considerar l'ús de <iframe>s en els vostres experiments i treball. A més, no hi ha necessitat de tenir por i no utilitza <iframe>s - només s'ha de tenir cura. Seguiu llegint...

Els fabricants de navegadors i desenvolupadors web han après per les males que els iframes són un objectiu comú (terme oficial: attack vector) per a les persones dolentes a la web (sovint anomenat hackers, o més exactament, crackers) per atacar, si estan tractant de modificar maliciosament la vostre pàgina web, o enganyar a la gent a fer alguna cosa que no volen fer, com revelar informació sensible com noms d'usuari i contrasenyes. A causa d'això, els enginyers d'especificacions i els desenvolupadors de navegadors han desenvolupat diversos mecanismes de seguretat per fer <iframe>s més segurs, i també estan les millors pràctiques a tenir en compte - anem a cobrir alguns d'aquests a continuació.

Clickjacking és un tipus d'atac iframe comú on els pirates informàtics incrustan un iframe invisible en el document (o incrustan el document en el seu propi lloc web maliciós) i el fan servir per capturar les interaccions dels usuaris. Aquesta és una forma comuna de confondre als usuaris o robar dades confidencials.

Un exemple ràpid, primer - intenteu carregar l'exemple anterior, mostrat previament, en el vostre navegador - es pot trobar en Github (veure el codi font també). No veureu, realment, res que apareigui a la pàgina, i si ens fixem en la consola en les eines de desevolupament del navegador, veureu un missatge que us indica perquè. En Firefox, se hos dirá, càrrega denegada per X-Frame-Options: https://developer.mozilla.org/en-US/docs/Glossary, no permet marcs. Això es deu al fet que els desenvolupadors que van construir MDN han inclòs una configuració al servidor que serveix a les pàgines del lloc web de no permetre que siguin incrustades a l'interior de <iframe>s (veure Configure CSP directives, més avall). Això té sentit - una pàgina sencere MDN no té molt sentit incrustar-la en altres pàgines, llevat que es vulgui fer alguna cosa com incrustar-la el vostre lloc i reclamar-les com a propies - o l'intent de robatori de dades a través de clickjacking, que són alhora coses molt dolentes, que es poden fer. A més, si tothom comences a fer això, tot l'ample de banda addicional començaria a costar-li molts diners a Mozilla.

Només incrustar quan sigui necessari

De vegades té sentit incrustar el contingut de tercers - com vídeos i mapes youtube - però ens podem estalviar molts mals de cap si només incrusten contingut de tercers quan sigui completament necessari. Una bona regla d'or per a la seguretat web és "Mai es pot ser massa cautelós. Si ho heu fet, torneu a comprovar-ho de totes maneres. Si algú més ho ha fet, se suposa que és perillós fins que es demostri el contrari".

A més de la seguretat, també s'ha d'estar al tant de les qüestions de la propietat intel·lectual. La majoria dels continguts té drets d'autor, fora de línia i en línia, fins i tot continguts que no us ho espereu (per exemple, la majoria de les imatges de Wikimedia Commons). Mai mostrar el contingut de la vostra pàgina web a menys que el propietari o els propietaris hagin donat per escrit, l'autorització inequívoca. Les sancions per infracció de drets d'autor són greus. Un cop més, mai es pot ser massa cautelós.

Si el contingut és llicenciat, s'ha d'obeir els termes de la llicència. Per exemple, el contingut MDN és sota llicència CC-BY-SA. Això vol dir, que s'ha d'acreditar adequadament quan se cita el nostre contingut, fins i tot si es realitzen canvis substancials.

Utilitzar HTTPS

HTTPS és la versió encriptada de HTTP. S'h de fer servir, HTTPS, en els vostres llocs web sempre que sigui possible:

  1. HTTPS redueix la possibilitat que el contingut remot hagi estat manipulat en trànsit,
  2. HTTPS impedeix que el contingut incrustat accedeixi al contingut del vostre document principal, i viceversa.

L'ús d'HTTPS requereix un certificat de seguretat, que pot ser car (encara que Let's Encrypt facilita les coses) - si no es pot aconseguir un, es pot fer servir el document principal amb HTTP. No obstant això, a causa del segon benefici descrit anteriorment sobre HTTPS , no importa el que costi, mai s'ha de incrustar contingut de tercers amb HTTP. (En el millor dels casos, el navegador web de l'usuari donarà un advertiment de por). Totes les empreses de renom que fan que el contingut disponible vagi incrustar a través d'un <iframe> ho farà disponible a través d'HTTPS - mirar les URL dins de l'atribut src d'<iframe> quan està incrustant contingut de Google Maps o Youtube, per exemple.

Nota: Les pàgines de Github permeten que el contingut se serveixi a través d'HTTPS de forma predeterminada, per la qual cosa és útil per allotjar contingut. Si utilitzeu altre allotjament i no esteu segurs, consulteu al vostre proveïdor d'allotjament, sobre això.

Utilitzar sempre l'atribut sandbox

Si es vol donar als atacants poc poder, com sigui possible, per fer coses dolentes al vostre lloc web, s'ha de donar els continguts incrustats, només, els permisos necessaris per realitzar-lo. Per descomptat, això també, s'aplica al vostre propi contingut. Un contenidor de codi el qual es pot utilitzar apropiadament - o per a les proves - però no pot causar cap mal a la resta de la base del codi (ja sigui accidental o maliciós) s'anomena sandbox.

El contingut sense sandbox pot fer molt (l'execució de JavaScript, l'enviament de formularis, finestres emergents, etc.) Per defecte s'ha d'imposar totes les restriccions disponibles mitjançant l'atribut sandbox  sense paràmetres, com es mostra en l'exemple anterior.

Si és absolutament necessari, es pot afegir permisos de tornada un per un (dins del valor d'atribut sandbox ="" ) - veure la referència d'entrada sandbox per a totes les opcions disponibles. Una nota important és que mai s'ha d'afegir tant allow-scripts i allow-same-origin al seu atribut sandbox - en aquest cas el contingut incrustat podria passar per alt la mateixa política de seguretat d'origen que deté l'execució de scripts de llocs i l'ús de JavaScript per desactivar completament la sandbox.

Nota: La Sandboxing no proporciona cap protecció si els atacants poden enganyar a la gent perquè visiti el contingut maliciós directament (fora d'un iframe). Si hi ha alguna possibilitat que cert contingut pot ser maliciós (per exemple, el contingut generat per l'usuari), si us plau feu servir un domini diferent del vostre lloc principal.

Configurar directives CSP

La CSP representa la content security policy, i proporciona un conjunt de capçaleres HTTP (metadades enviades juntament amb les seves pàgines web quan es serveixen des d'un servidor web) dissenyades per millorar la seguretat del document HTML. Quan es tracta de protegir <iframe>s, es pot configurar el servidor per a enviar una capçalera X-Frame-Options apropiada. Això pot evitar que altres llocs web incrustin el seu contingut en les vostres pàgines web (el que permetria clickjacking i una sèrie d'altres atacs), que és exactament el que els desenvolupadors MDN han fet, com hem vist anteriorment.

Nota: Es pot llegir el post de Frederik Braun On the X-Frame-Options Security Header per obtenir més informació d'antecedents sobre aquest tema. Òbviament, està fora de l'abast, per a una explicació completa, d'aquest article.

Els elements <embed> i <object>

Els elements <embed> i <object>  compleixen una funció diferent a <iframe> - aquests elements de propòsit general són eines d'inserció per a la incrustació de diversos tipus de contingut extern, que inclouen tecnologies de complements com els applets de Java i flash, PDF (es pot mostrar en un navegador amb un plugin PDF), i fins i tot el contingut com vídeos, SVG i les imatges!

Nota: Un plugin és un programari que proporciona accés als continguts del navegador que no pot llegir de forma nativa.

No obstant això, és poc probable que utilitzeu molt aquests elements - Els applets no s'han utilitzat durant anys, Flash ja no és molt popular, a causa d'una sèrie de raons (veure El cas contra els complements, més endavant), els arxius PDF tendeixen a estar millor enllaçats que incrustats, i altres continguts com a imatges i video tenen elements molt millors i més fàcils de manejar. Plugins i aquests mètodes d'incrustació són realment una tecnologia heretada, i els estem esmentant principalment en cas que us trobeu amb ells en certes circumstàncies com a intranets o projectes empresarials.

Si necessiteu incorporar contingut de plugin, aquest és el tipus d'informació que necessitareu, com a mínim:

  <embed> <object>
URL del contingut incrustat src data
accurate media type del contingut incrustat type type
l'altura i l'amplada (en píxels CSS) de la caixa controlada pel complement height
width
height
width
noms i valors, per alimentar el complement com paràmetres atributs ad hoc amb els noms i valors elements d'una sola etiqueta <param>, continguts dins <object>
Contingut HTML independent com a recurs alternatiu per a un recurs no disponible No suportat (<noembed> és obsolet) contingut dins <object>, després d'elements <param>

Nota: <object> requereix un atribut data, un atribut type, o tots dos. Si s'utilitzant ambdòs, també es pot utilitzar l'atribut typemustmatch (només implementat en Firefox, a partir d'aquest escrit). typemustmatch mante l'arxiu incrustat a que s'executi llevat que l'atribut type proporcioni el tipus de medi correcte. Per tant, typemustmatch pot conferir beneficis significatius de seguretat quan està incrustar el contingut d'un origen diferent (pot mantenir els atacants d'executar scripts arbitràries mitjançant el complement).

Heus aquí un exemple que utilitza l'element <embed> per  incrustar una pel lícula Flash (veure aquest en Github i comprovar el codi font també):

<embed src="whoosh.swf" quality="medium"
       bgcolor="#ffffff" width="550" height="400"
       name="whoosh" align="middle" allowScriptAccess="sameDomain"
       allowFullScreen="false" type="application/x-shockwave-flash"
       pluginspage="http://www.macromedia.com/go/getflashplayer">

Bastant horrible, no ho és. El HTML generat per l'eina d'Adobe Flash tendia a ser encara pitjor, l'ús d'un element <object> amb un element <embed> incrustat en ell, per cobrir totes les bases (fes un cop d'ull a un exemple). El flaix fins i tot va ser utilitzat amb èxit com a contingut alternatiu a HTML5 de vídeo, per un temps, però això cada vegada es veu més innecessari.

Ara veurem un exemple <object>, que insereix un PDF en una pàgina (vegeu l'exemple en viu i el codi font):

<object data="mypdf.pdf" type="application/pdf"
        width="800" height="1200" typemustmatch>
  <p>You don't have a PDF plugin, but you can <a href="myfile.pdf">download the PDF file.</a></p>
</object>

Els PDFs eren un pas necessari entre el paper i el digital, però plantegen molts reptes d'accessibilitat i poden ser difícils de llegir en pantalles petites. Encara tendeixen a ser popular en alguns cercles, però és molt millor enllaçar-los perquè puguin ser descarregats o llegits en una pàgina separada, en lloc de incrustar-los en una pàgina web.

El cas en contra dels complements (plugins)

Hi havia una vegada, que els complements (plugins) eran indispensables a la web. Recordeu els dies en què calia instal·lar Adobe Flash Player, només, per veure una pel·lícula en línia? Llavors teníem constantment alertes molestes sobre l'actualització de Flash Player i el seu entorn d'execució de Java. Les tecnologies web han crescut molt més robustes, i aquells dies s'han acabat. Per a la majoria de les aplicacions, és hora que deixin de lliurar contingut que depenguin dels complements (plugins), i comencin a prendre avantatge de les tecnologies web al seu lloc.

  • Ampliar el seu abast a tot el món. Tothom té un navegador, però els complements (plugins) són cada vegada mes rars, especialment entre els usuaris mòbils. Atès que la web és en gran part utilitzable sense complements (plugins), la gent prefereix anar als llocs web dels seus competidors, que instal·lar un complement (plugin).
  • Feu una pausa amb els mals de cap d'accessibilitat addicionals que vénen amb Flash i altres complements (plugins).
  • Mantenir-se allunyat dels riscos de seguretat addicionals. Adobe Flash és notoriament insegur, fins i tot després d'un sens fi de pegats. El 2015, Alex Stamos, director de seguretat de Facebook, fins i tot va demanar que se suspengues Adobe Flash.

Llavors, què s'ha de fer? Si es necessita interactivitat, HTML i JavaScript ens pot donar fàcilment la feina feta sense necessitat d'applets de Java o  tecnologia obsoleta ActiveX/BHO. En lloc de confiar en Adobe Flash, podem utilitzar vídeo HTML5 per les necessitats media, per a gràfics vectorials SVG i Canvas per a imatges i animacions complexes. Peter Elst escrivia fa uns anys que Adobe Flash no sol ser l'eina adequada per al treball, excepte per a jocs i aplicacions empresarials especialitzades. Pel que fa a ActiveX, fins i tot el navegador Microsoft Edge ja no ho suporta.

Sumari

El tema de la incrustació d'altres continguts en els documents web, de forma ràpida, pot arribar a ser molt complex, pel qual en aquest article hem tractat d'introduir d'una manera simple i familiar el que us pogui semblar d'una rellevancia immediata, mentre en seguit fent al·lusió a algunes de les característiques més avançades de les tecnologies involucrades. Per començar, és probable que feu servir la incrustació molt més enllà, inclouent continguts de tercers com mapes i vídeos en les vostres pàgines. A mesura que adquiriu més experiència, és probable que comenceu a trobar més usos per a ells.

Hi ha moltes altres tecnologies que impliquen la incrustació de continguts externs a més dels que hem tractat aquí. Vam veure alguns, en els articles anteriors, com <video>, <audio> i <img>, però hi ha altres a descobrir, com <canvas> per generar en JavaScript gràfics 2D i 3D, i <svg> per a incrustar gràfics vectorials. Aviat ens ocuparem de SVG en l'article següent del mòdul.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,