En el último episodio de esta compilación de tutoriales de PHP, analizamos cómo trabajar con enlaces y URL y cómo, a veces, los caracteres especiales causarán estragos en nuestro HTML. Estos problemas pueden al menos romper un enlace, o en el peor de los casos, exponer una vulnerabilidad a intenciones maliciosas a través de los duendes de las redes que desean traer malicia a su aplicación web. Resulta que no son solo nuestras URL las que debemos proteger y codificar. También debemos ser conscientes de la gran colección de caracteres especiales que pueden aparecer en el texto de su HTML. Para esto, también tenemos formas convenientes de codificar y proteger nuestro marcado para asegurarnos de que su sitio web permanezca en posición vertical, intacto, funcionando sin problemas y, sobre todo, con la increíble presencia que es. ¡Hagámoslo!
Codificación HTML con PHP
HTML es el lenguaje de marcado de la web, y cuando se trata de eso, es el HTML lo que hace que la web funcione. Todos estos sofisticados lenguajes de programación son divertidos de usar para facilitar páginas dinámicas y demás, pero sin HTML, no tendríamos demasiado ahora, ¿verdad? Una de las cosas más comunes que hacemos con PHP, o cualquier otro lenguaje de programación basado en la web, es generar HTML sobre la marcha usando lógica y condiciones. Como sabemos, HTML hace uso de corchetes angulares y otros caracteres para proporcionar un medio al navegador para representar una página web. HTML tiene algunos caracteres reservados especiales que debe tener en cuenta, ya que tienen un significado específico para HTML.
< y >
Aquí están, los caracteres < y > . Estos dos caracteres son los que rodean los nombres de las etiquetas html en la página. Esto es lo que le indica al navegador que, oye, aquí está sucediendo algo realmente interesante y es necesario interpretar la información entre estas etiquetas como tal. Estos corchetes en ángulo también indican que los datos que contienen no deben enviarse a la página en forma legible por humanos. Aunque el navegador web ve algo como <b> este texto en negrita </b>, el usuario debería ver este texto en negrita . Dos estilos de codificación diferentes con dos significados diferentes.
Caracteres reservados HTML
Hay cuatro caracteres principales que están reservados en HTML a los que debemos prestar mucha atención. Aquí hay una tabla que los describe todos.
Personaje | Codificación |
< | & lt; |
> | & gt; |
Y | &erio; |
" | & quot; |
Lo que esto significa es que cuando desee que sus usuarios vean el carácter literal, debe proporcionar la versión codificada. Tal vez le gustaría decir algo como Twitter es más grande que Facebook y usar el signo mayor que. En el html real, Twitter es & gt; Facebook , sin embargo, el usuario verá que se muestra el Twitter real > Facebook . Si este o cualquiera de los otros caracteres reservados no está codificado correctamente, corre el riesgo de que su página no se muestre al usuario.
htmlspecialchars ( $string)
Primero examinaremos el uso de htmlspecialchars. Puede tener sentido observar un escenario roto, y luego veremos la solución usando htmlspecialchars. Supongamos que queremos incluir un enlace con un texto de anclaje específico. El texto de anclaje que nos gustaría mostrar es <Haga clic aquí> & Prosper! Entonces imagina, está bien, es bastante fácil, podemos colocar este texto que nos gusta entre las etiquetas de anclaje y crear nuestro enlace. Vamos a intentarlo.
¿Ves lo que hay ahí? Eso de ahí, es un fallo un poco gordo. La página no mostraba el texto que queríamos en absoluto. La razón de esto es que el navegador aparece y ve esos corchetes angulares y piensa que se trata de una etiqueta HTML. En este caso, sin embargo, no es HTML en absoluto. Son los corchetes angulares reales los que queremos que el usuario vea en el texto del enlace. ¡Es en momentos como este cuando htmlspecialchars viene al rescate! ¡Observar!
¡Agradable! Ahora, el texto del vínculo funciona según lo diseñado. Piense en htmlspecialchars como un método para deshabilitar HTML, por así decirlo. Deshabilita el HTML para el navegador y permite al usuario ver lo que normalmente ve el navegador. Un punto clave a tener en cuenta es que htmlspecialchars solo maneja los cuatro caracteres reservados enumerados en la tabla anterior. Ahora puede saber que hay una colección bastante grande de símbolos que podríamos querer mostrar en el texto de nuestro HTML que el navegador no sabrá cómo representar. Cosas como símbolos de marcas registradas, símbolos de derechos de autor, letreros At y muchos más. En este caso, necesitas sacar al perro grande, la función htmlentities.
htmlentities ( $string)
La función htmlentities cubre todos los caracteres que tienen una representación de entidad html equivalente en el idioma. Por lo tanto, htmlentities es mucho más poderoso. Para ilustrar esto, intentaremos ingresar algunos de los caracteres especiales más comunes que quizás desee tener en su página web. Probémoslo.
Esto puede aparecer en algunos dispositivos, sin embargo, es posible que obtenga solo una serie de caracteres de tipo jeroglífico realmente extraños. Para estar seguro, debe ajustar cualquier texto que tenga caracteres especiales en la función htmlentities de esta manera.
© ® ™ £ € ¥
La codificación de URL se encuentra con la codificación HTML
Es hora de subir de nivel a los amigos. Ahora que tenemos una buena comprensión de la codificación de URL de nuestro último episodio, así como los fundamentos de la codificación html a través de este tutorial lleno de acción, podemos unir la imagen completa para ver cómo funciona. Esto resumirá nuestro aprendizaje de URL y codificación HTML.
El resultado es una URL muy bien codificada con caracteres especiales o entidades contabilizadas, ¡lo cual es épico!
Práctica tabla de entidades HTML
Si alguna vez necesita una buena referencia para todas las entidades HTML que puede usar, aquí hay una lista de ellas. Esta lista es buena para conocer los caracteres que también deben ejecutarse a través de la función htmlentities.
| Varias entidades de caracteres ASCII. | |
| Símbolo | Codificación |
| UN | &Una tumba; |
| UN | & Agudo; |
| UN | & Acirc; |
| UN | & Atilde; |
| UN | & Auml; |
| UN | &Un anillo; |
| Æ | & AElig; |
| C | & Ccedil; |
| MI | & Egrave; |
| MI | & Eacute; |
| MI | & Ecirc; |
| MI | & Euml; |
| YO | & Igrave; |
| YO | & Iacute; |
| YO | & Icirc; |
| YO | & Iuml; |
| RE | & ETH; |
| NORTE | & Ntilde; |
| Ò | & Ograve; |
| Ó | & Oacute; |
| Ô | & Ocirc; |
| Õ | & Otilde; |
| Ö | & Ouml; |
| Ø | & Oslash; |
| Ù | & Ugrave; |
| Ú | & Uacute; |
| Û | & Ucirc; |
| Ü | & Uuml; |
| Ý | & Yacute; |
| Þ | &ESPINA; |
| ß | & szlig; |
| un | &una tumba; |
| un | & aacute; |
| un | & acirc; |
| un | & atilde; |
| un | & auml; |
| un | &un anillo; |
| æ | & aelig; |
| C | & ccedil; |
| mi | & egrave; |
| mi | & eacute; |
| mi | & ecirc; |
| mi | & euml; |
| yo | & igrave; |
| yo | & iacute; |
| yo | & icirc; |
| yo | & iuml; |
| re | & eth; |
| norte | & ntilde; |
| ò | & ograve; |
| ó | & oacute; |
| ô | & ocirc; |
| õ | & otilde; |
| ö | & ouml; |
| ø | & oslash; |
| ù | & ugrave; |
| ú | & uacute; |
| û | & ucirc; |
| ü | & uuml; |
| ý | & yacute; |
| þ | &espina; |
| ÿ | & yuml; |
| Varias entidades HTML ISO-8859-1. | |
| Símbolo | Codificación |
| & nbsp; | |
| ¡ | & iexcl; |
| ¢ | ¢avo; |
| £ | &libra; |
| ¤ | & curren; |
| ¥ | ¥ |
| ¦ | & brvbar; |
| § | §a; |
| ¨ | & uml; |
| © | &Copiar; |
| ª | & ordf; |
| « | & laquo; |
| ¬ | &no; |
| | &tímido; |
| ® | & reg; |
| ¯ | & macr; |
| ° | & deg; |
| ± | & plusmn; |
| ² | & sup2; |
| ³ | & sup3; |
| ´ | &agudo; |
| µ | µ |
| ¶ | ¶ca; |
| ¸ | & cedil; |
| ¹ | & sup1; |
| º | & ordm; |
| » | & raquo; |
| ¼ | & frac14; |
| ½ | & frac12; |
| ¾ | & frac34; |
| ¿ | & iquest; |
| × | &veces; |
| ÷ | &dividir; |
| Entidades HTML para símbolos matemáticos. | |
| Símbolo | Codificación |
| ∀ | ¶ todos; |
| ∂ | &parte; |
| ∃ | &existe; |
| ∅ | &vacío; |
| ∇ | & nabla; |
| ∈ | &es en; |
| ∉ | &no en; |
| ∋ | & ni; |
| ∏ | &pinchar; |
| ∑ | &suma; |
| - | &menos; |
| ∗ | & lowast; |
| √ | & radic; |
| ∝ | &apuntalar; |
| ∞ | & infin; |
| ∠ | & ang; |
| ∧ | &y; |
| ∨ | &o; |
| ∩ | &gorra; |
| ∪ | &taza; |
| ∫ | &En t; |
| ∴ | & there4; |
| ∼ | & sim; |
| ≅ | & cong; |
| ≈ | & asymp; |
| ≠ | &nordeste; |
| ≡ | & equiv; |
| ≤ | & le; |
| ≥ | & ge; |
| ⊂ | ⊂ |
| ⊃ | &cenar; |
| ⊄ | & nsub; |
| ⊆ | & sube; |
| ⊇ | & supe; |
| ⊕ | & oplus; |
| ⊗ | & otimes; |
| ⊥ | & perp; |
| ⋅ | & sdot; |
| Letras griegas y sus entidades HTML. | |
| Símbolo | Codificación |
| Α | &Alfa; |
| Β | Β |
| Γ | &Gama; |
| Δ | Δ |
| Ε | & Epsilon; |
| Ζ | & Zeta; |
| Η | & Eta; |
| Θ | & Theta; |
| Ι | Ι |
| Κ | Κ |
| Λ | & Lambda; |
| Μ | & Mu; |
| Ν | & Nu; |
| Ξ | & Xi; |
| Ο | & Omicron; |
| Π | Π |
| Ρ | & Rho; |
| Σ | Σ |
| Τ | & Tau; |
| Υ | & Upsilon; |
| Φ | &Fi; |
| Χ | & Chi; |
| Ψ | Ψ |
| Ω | Ω |
| α | &alfa; |
| β | β |
| γ | &gama; |
| δ | δ |
| ε | & epsilon; |
| ζ | & zeta; |
| η | & eta; |
| θ | & theta; |
| ι | ι |
| κ | κ |
| λ | & lambda; |
| μ | & mu; |
| ν | & nu; |
| ξ | & xi; |
| ο | & omicron; |
| π | Π |
| ρ | & rho; |
| ς | & sigmaf; |
| σ | σ |
| σ | σ |
| τ | & tau; |
| tú | & upsilon; |
| φ | &fi; |
| χ | & chi; |
| ψ | ψ |
| ω | ω |
| ϑ | & thetasym; |
| ϒ | & upsih; |
| ϖ | & piv; |
| Otras varias entidades HTML. | |
| Símbolo | Codificación |
| Π| & OElig; |
| œ | & oelig; |
| Š | & Scaron; |
| š | & scaron; |
| Ÿ | & Yuml; |
| ƒ | & fnof; |
| ˆ | & circ; |
| ˜ | & tilde; |
| - | & ndash; |
| - | & mdash; |
| ' | & lsquo; |
| ' | y rsquo; |
| ‚ | & sbquo; |
| " | & ldquo; |
| " | & rdquo; |
| „ | & bdquo; |
| † | &daga; |
| ‡ | &Daga; |
| • | &toro; |
| ... | & hellip; |
| ‰ | & permil; |
| ′ | &principal; |
| ″ | &Principal; |
| ‹ | & lsaquo; |
| › | & rsaquo; |
| ‾ | & oline; |
| € | € |
| ™ | &comercio; |
| ← | & larr; |
| ↑ | & uarr; |
| → | & rarr; |
| ↓ | & darr; |
| ↔ | & harr; |
| ↵ | & crarr; |
| ⌈ | & lceil; |
| ⌉ | & rceil; |
| ⌊ | & lfloor; |
| ⌋ | & rfloor; |
| ◊ | & loz; |
| ♠ | &espadas; |
| ♣ | ♣ |
| ♥ | &corazones; |
| ♦ | & diams; |
0 Comentarios