Como ocultar la URL (enmascarar URL con iframe al 100%)

como ocultar la URLMuchas veces necesitamos saber como ocultar la URL, o enmascarar una URL para que la misma no se visualice en la barra de direcciones.

Si bien esto puede realizarce por medio del cPanel o Panel de Control de nuestro servicio de hosting, tambien podemos ocultar la url por medio de la combinacion de un simple código HTML y CSS.

Muchas veces es recomendable ocultar la URL real de nuestro sitio, por fines estéticos o de marketing, permitiendo a nuestros usuarios ver otra dirección URL.
También puedes incluir una página dentro de otra, sin que el usuario lo note.

Con este truco podrás realizarlo tantas veces como desees.

Se trata de utilizar la etiqueta <iframe> con algunas modificaciones, y con el agregado de algunas propiedades CSS.

CASO DE EJEMPLO:

Supongamos que tu quieres que el usuario ingrese a tu sitio, por ejemplo http://www.tudominio.com/ , pero que vea el contenido de otra URL.

Al ingresar a tu sitio, por defecto tu sitio web mostraría el contenido del archivo index.html (ó index.php, ó index.asp, dependiendo del lenguaje) , por lo tanto trabajaremos sobre el archivo: http://www.tudominio.com/index.html

Digamos que tu NO quieres mostrar el contenido de ese archivo, sino que quieres que el usuario vea por ejemplo otra página que se encuentra en http://www.tudominio.com/home.html (o incluso puedes desear que vea una URL externa a tu sitio), pero que en su barra de direcciones siga viendo http://www.tudominio.com/

INSTRUCCIONES PARA OCULTAR LA URL:

Pues bien, entonces lo que debes hacer para ocultar la url, es lo siguiente:

En el archivo http://www.tudominio.com/index.html debes insertar un iframe.
Para esto debes usar la etiqueta <iframe> que tiene la siguiente sintaxis:

<iframe src="xxxxxxxxx.html"></iframe>

Donde “xxxxxxxxx.html” debes reemplazarlo por la URL que quieres insertar y que será la que contendrá el contenido real que se moestrará, en este caso dijimos que seria http://www.tudominio.com/home.html

Entonces, dentro de http://www.tudominio.com/index.html, y luego de la etiqueta <body> debes colocar:

<iframe src="http://www.tudominio.com/home.html"></iframe>

Con esto insertamos la “ventana” (iframe) por donde mostraremos  el contenido del archivo home.html.

Y también dentro de http://www.tudominio.com/index.html, antes de la etiqueta de cierre </header> debes colocar el siguiente codigo CSS:

<style type="text/css">
html, body, div, iframe { margin:0; padding:0; height:100%; }
iframe { display:block; width:100%; border:none; }
</style>

Con este codigo CSS, le decimos que la “ventana” del <iframe> la lleve al mismo tamaño del navedador (máximo de alto y ancho).

Entonces cuando vayamos al URL  http://www.tudominio.com/ (que es el que contiene el iframe), nos mostrará realmente el contenido del URL http://www.tudominio.com/home.html.

Código final y completo

Archivo http://www.tudominio.com/index.html:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Documento sin título</title>
 <style type="text/css"> 
html, body, div, iframe { 
margin:0; 
padding:0; 
height:100%; 
} 
iframe { 
display:block; 
width:100%; 
border:none; } 
</style>
 </head>
 <body>
 <iframe src="http://www.tudominio.com/home.html"></iframe>
  </body>
 </html>

 

Y asi ocultaremos la URL real (http://www.tudominio.com/home.html).

Saludos y espero te sea de gran utilidad !!
Cristian

*** ¿ Te gustó este recurso ?
Imagina todo lo que puedes aprender con el Curso Completo de Maquetación Web en Video.
Mira los detalles AQUI:
http://www.psdahtmlpasoapaso.com/detalles/

Sucribete y recibe los nuevos articulos que publique:

39 pensamientos en “Como ocultar la URL (enmascarar URL con iframe al 100%)

  1. Juan Carlos

    Estoy tratando de ingresar tu codigo ya que estoy tratando de hacer un ingreso con codigo a una pagina de mi web y busco que la pagina que quiero ingresar no se vea pero no puedo el codigo que das tine algo mal y no se que es, si me puedes dar una mano.-
    Gracias

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Juan
      El codigo esta bien.
      Copia el el codigo que puse al final y reemplaza por tus datos.
      Tiene que funcionar.

      Sino pasa aqui tus datos y lo vemos.
      Saludos!
      Cristian

      Responder
    1. Cristian (PSD a HTML) Autor

      Hola Miguel
      El codigo funciona.
      Copia el ultimo que puse y reemplaza por tus datos.

      Saludos!
      Cristian

      Responder
  2. jorge sardon

    Hola cristian, se puede hacer esto en el Filezilla? , la verdad no se nada de programacion y me comentaron que copiando este codigo en un archivo php se me redirecionaria a otra pagina, pero el problema es que se redirecciona, pero sale la nueva url y se borra mi dominio inicial. Agradecere mucho tu ayuda

    Responder
    1. Cristian (PSD a HTML) Autor

      Hola Jorge
      Este codigo es para enmascarar una direccion URL dentro de otra, es decir, para ocultar una determinada direccion URL.
      No se a que te refieres con el Filezilla. Ese soft es para subir a bajar archivos desde un servidor.

      Saludos
      Cristian

      Responder
  3. Luis

    lo que no entiendo es que:
    tendré que tener una pagina auxiliar por cada pagina que quiera ocultar su direccion? :S

    Responder
    1. Cristian (PSD a HTML) Autor

      Claro, si lo haces de esta forma, deberas enmascarar cada pagina con otra pagina.

      Saludos!

      Responder
  4. alberto

    con ie 8 no funka… entra en un loop y comienza a cargar y cargar y se muere… en chrome demora y sale un msg que no cargo el plugin… ni siquiera la carga … solo firefox la interpreta correctamente, y la carga bien… pero todos los usuarios no usan firefox…
    alguna idea…? tengo mi pagina en wix y tengo mi dominio… desde mi hosting quiero mostrar la pagina de wix pero con la url de mi dominio… como dije con firefox funciona la raja… pero no todos usan firefox….

    Responder
    1. PSD a HTML Paso a Paso Autor

      Alberto
      Lo acabo de probar en Firefox, Chrome, IE7 y Safari y funciona en todos perfecto.

      Por favor vuelve a compiar el ultimo codigo que puse aqui en el articulo y reemplaza por tus URLs.
      Deberia funcionar perfecto.

      Saludos
      Cristian

      Responder
  5. CiRO

    ola que tal no se si aun estaras vivo xD pero yo tengo hecho una copia de mi web en un archivo de bloc nota podre poner ese codigo ahi ???

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      Jhonny
      El codigo va dentro del BODY de tu documento.
      Basicamente es 1 sola linea: la del IFRAME.

      Saludos
      Cristian

      Responder
  6. Suhermano

    Hola,
    mi duda es… con esto no la enmascaras haces al usuario interesado en coger el vídeo que tenga que ir a la pagina del iframe, no es cierto?

    espero respuesta graciass :D

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      Hola “Serhumano”
      Con esta opcion SI enmascaras la URL destino, evitando que el usuario la vea.

      Saludos
      Cristian

      Responder
        1. Cristian - PSD a HTML Paso a Paso Autor

          Claro, si el usuario tiene conocimientos de programacion HTML , accede al codigo, busca la etiqueta IFRAME, alli ver la URL de destino.

          Responder
  7. maxor

    Hola cristian, te hago una consulta, si me hechas una mano me harías tan feliz!!! :D
    tengo un iframe cultando la url de mi sitio, pero no me genera las imagenes en miniatura de la url original (por ejemplo cuando pego la url en facebook para compartir) hay alguna manera de resolver eso???? gracias miles hermano!
    mxor.

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      La URL relativa de un iframe, es la del mismo iframe y no la del frame principal que lo contiene.
      Por lo que es probable que Facebook no te tome las imagenes.
      Pero chequea bien el codigo de insercion de facebook que alli creo se puede modificar y hacer pruebas para que se vea la imagen.
      Saludos!

      Responder
  8. Javier Ayala

    Buenos días.

    Es muy bueno este código, me ha sido de gran utilidad en varias ocasiones.

    Sólo tengo una duda.

    Si yo utilizo este FRAME para mostrar en MI DOMINIO una Web completamente externa y son muchos los usuarios que ingresan a esa Web simultaneamente, los recursos por consultar esa otra Web afectan en algo al servidor donde tengo hospedado MI dominio.

    Es decir, el uso de recursos pega en algo a mi servidor? o para el es transparente y todo el trafico que se pueda generar por descargas de archivos, consultas a la base de datos, etc, le afecta sólo al server que contenga la página externa.

    Espero su respuesta.
    Gracias de antemano.

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      Gracias Javier.
      La carga de trafico, recae en el servidor de la pagina externa.

      Saludos!
      Cristian

      Responder
  9. Javier

    Hola Cristian, tu ejemplo esta muy bien pero tiene un problema que yo no consigo resolver, diponemos de un producto online que revendemos como marca blanca, por lo tanto nuestro cliente utiliza nuestro producto online desde su propio servidor cargandolo mediante un iframe. de manera que sus clientes no ven nuestra direccion web si no que ven la direccion de nuestro cliente, hasta aqui bien, pero cuando uno de los clientes de nuestro cliente se dispone a descargar algun archivo o pdf disponible desde nuestro producto, en la barra de estado de los navergadores aparece la direccion original desde donde se esta descargado el pdf o archivo, por lo tanto el enmascaramiento no es del 100% y no hay solucion alguna. y no hablo de esconder los enlaces que se que se puede, si no de la direccion que aparece cuando se muestra el porcentaje de progreso de la descarga en la barra de estado del navegador, que es la direccion original del servidor aunque estemos viendo dicha direcciona desde otra direccion mediante un iframe. Si teines una solucion a esto agradeceria que la explicaras

    Un saludo

    Responder
    1. Cristian - PSD a HTML Paso a Paso Autor

      Javier
      Con esta tecnica no se pueden enmascarar direccion de downloads como lo quieren hacer uds.
      Para eso deberias buscar la solucion en downloads basados en Javascript o jQuery
      (hay varios ya pre armados, buscalos en Google)

      Saludos!

      Responder
  10. Pingback: Cómo ocultar tu enlace de referido | Moneda@Moneda

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>