Menú
Cómo solucionar la prohibición de mostrar recursos externos en sitios web

Cómo solucionar la prohibición de mostrar recursos externos en sitios web

¡Hola! No estaba muerto, estaba de cuarentena. Hace días que estoy resolviendo problemas en una tienda woocommerce que pasó bastantes glaciaciones sin actualizar. Desde el primer momento, me desagradó conseguir unos rectangulitos odiosos en lugar de la lupa de buscar, o el carrito de supermercados en el link del carrito, y así por el estilo. La flechita de volver arriba, otro rectangulito boca abierta. Horrible.

Nada, dije, esto desaparece cuando actualice todo. No, hermano, no. Inspeccionando los elementos de la página (F12 ó Ctrl-Mayus-i), me encontré con una restricción del navegador Chrome, pobremente implementada, a mi juicio. Se trata de la restricción Same Origin Restriction  (Restricción del mismo origen). Según esta política, los elementos incorporados por una url (via a href, por ejemplo) deben tener el mismo origen. En principio, eso restringe las peticiones a http, desde un sitio https, pero complica las cosas al entrar en terrenos grises.

En este sitio, por ejemplo, los tipos de letra fontawesome no son llamados desde fontawesome.io. Fueron descargados, son un recurso local del mismo origen, es decir, del mismísimo sitio web, pero están servidos desde una url completa, no desde una ruta relativa. Ponerse a buscar en dónde, y como modificar la manera de incrustar estos tipos de letras, es impráctico.

Levanté mi vista al cielo, pronuncié una de mis groserías favoritas y me puse a buscar una solución universal. La encontré y se las traigo. Pongan atención, despiértense, que aquí está.

Hay que editar el archivo .htaccess, para añadir la siguiente sección:

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

Explicación

El módulo de Apache mod_headers gobierna los encabezados de los sitios web. Es el lugar para sobrepasar las directivas de acceso. Por eso, primero se definen los archivos objetos de la directiva con FilesMatch. La instrucción 'Header set Access-Control-Allow-Origin "*" ' significa "los archivos con las extensiones que te dije (que generalmente son los que se llaman por http) me los dejas pasar sin estar preguntando nada."

Copié esa instrucción completa en el .htaccess del sitio, y en la próxima carga del sitio web, estaban todos los iconos que toda tienda Woocommerce que se respete debe tener. Esta solución es extensiva para todo sitio web servido desde un servidor Apache.

Nos vemos pronto.

Oswald

Comentarios

No hay comentarios. Se el primero!