Cargar contenido por AJAX desde otro dominio

A menudo solemos cargar contenido de otras páginas desde nuestra propia web, por ejemplo, cargando un vídeo o utilizando una imagen externa. Podemos decir que es una práctica bastante habitual. Si lo que queremos hacer es cargar contenido a través de AJAX -utilizando XMLHttpRequest- entonces nos encontraremos con un pequeño inconveniente,  Same-Origin Policy.

Esta directiva restringe el uso de archivos externos a través de peticiones AJAX y, aunque parezca un engorro, lo hace para evitar ataques XSS.

Si realmente estamos interesados en poder cargar y utilizar elementos externos a nuestro dominio de esta forma entonces necesitaremos habilitar el CORS -Cross-origin resource sharing- el cual nos permitirá abrirlo a cualquier dominio o especificar cuáles tendrán derecho a utilizar nuestros elementos.

Si utilizamos un servidor Apache y disponemos de diversos elementos que queremos que puedan ser mostrados, podemos incluir en el archivo .htaccess la siguiente instrucción:

Header set Access-Control-Allow-Origin "*"

En lugar de * (implica cualquier dominio) podemos introducir los dominios deseados siempre incluyendo el http delante de los mismos. 

Aunque podemos definir desde nivel de servidor si habilitamos o no las peticiones, recomendaría hacerlo a nivel de script, por ejemplo, para PHP:

if($_SERVER['HTTP_ORIGIN'] == "http://dominio.com")
{ 
  header('Access-Control-Allow-Origin: http://dominio.com');
e>