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

como ocultar urls

Muchas 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 todos los detalles AQUI !

Diseñador y Programador Web Full Stack especializado en front-end (HTML5/CSS3/JS) y back-end (PHP, MySQL). Formador y Consultor en Desarrollo Web y Marketing Digital (SEO/SEM) PSD a HTML Paso a Paso

81 thoughts on “Como ocultar la URL (enmascarar URL con iframe al 100%)

    1. psd a html paso a paso Post author Reply

      Hola Daniel
      Acabo de agregar al final del post, el código completo.
      🙂
      Saludos!
      Cristian

  1. Roger Reply

    Hace años que este tip da vueltas por internet y siempre sigue vigente.
    Gracias por recordárnoslo.
    Saludos

  2. Juan Carlos Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  3. MiguelJatib Reply

    Donde puedo encontrar el codigo completa, ya que no me resulta con el primero q pusiste
    saludos 😉

    1. Cristian (PSD a HTML) Post author Reply

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

      Saludos!
      Cristian

  4. jorge sardon Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  5. Luis Reply

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

    1. Cristian (PSD a HTML) Post author Reply

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

      Saludos!

  6. alberto Reply

    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….

    1. PSD a HTML Paso a Paso Post author Reply

      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

  7. CiRO Reply

    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 ???

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

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

      Saludos
      Cristian

  8. Suhermano Reply

    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 😀

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

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

      Saludos
      Cristian

      1. Suhermano Reply

        Hola de nuevo, pero si el usuario accede a a la url de tu iframe verá la url en cuestión que yo quiero esconder, no es así?

        1. Cristian - PSD a HTML Paso a Paso Post author Reply

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

  9. maxor Reply

    Hola cristian, te hago una consulta, si me hechas una mano me harías tan feliz!!! 😀
    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.

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      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!

  10. Javier Ayala Reply

    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.

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

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

      Saludos!
      Cristian

  11. Javier Reply

    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

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      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!

  12. Orlando Reply

    Buenas Cristian, este tema es viejo pero he visto que aún sigues respondiendo dudas, espero puedas aclarar la mía.

    Creo que a muchos les ayudará esta pregunta. Mi punto es que no sé donde colocar todo ese código, he visto que has respondido ‘en el body’ o algo así, sigo sin entender, ese código se sobreescribe ¿donde? ¿en un programa? ¿en la misma barra de dirección? ¿dentro de una página? sé mas específico por favor u.u

    ¡Muchas gracias!

    1. Cristian Carrera Post author Reply

      El código lo colocas dentro del código html de la página.
      Tienes conocimientos de html?
      Sino busca aquí en el blog que hay mucha información.
      Saludos!

  13. Joan Reply

    Hola Cristian,

    Yo uso Blogger, no sé si lo conozcas, creo que si, en fin, mi pregunta es que mi blog tiene un dominio propio, y quiero crear una sección (Entrada o página) donde aparezca el iframe ocupando el 100% de la pantalla, de paso ocultando mi blog, el titulo, el estilo, los widget, todo, pero lo que pasa es que creo que en ese caso se debe usar un script (creo), por que le pongo al iframe (dentro de la entrada del blog) medidas de 100% y ocupa el 100% de la sección (osea de la entrada) pero el resto de mi blog se sigue viendo.

    ¿Hay una manera de colocar el iframe en una entrada y que al acceder a ella el iframe ocupe el 100% de la pantalla del navegador? y que de esa manera sigan en mi blog pero con la URL dentro del iframe.

    Muchas gracias!

    1. Cristian Carrera Post author Reply

      Hola Joan
      Si conozco Blogger.
      El ejemplo que aquí doy es para aplicar a una pagina de un sitio y no para insertar en un blog ya que cuando insertas este código dentro de una entrada o pagina, antes de este código el blog inserta su propio codigo (parte del template) y eso hace que no funcione el ejemplo del iframe.
      Saludos!

  14. Antonio Reply

    Hola Cristian. A ver si puedo explicarte mi problema. Me he incorporado a un distribuidor que me ofrede su tienda online (parametrizada). El caso es que lo que aparece es SU URL, y yo quiero entrar en MI URL (si entro en su tienda, lo que aparecen son códigos en el querystring que me identifican, pero nada de mi dirección.
    Me ofrecen un iframe como el que tú propones, la solución es aparente, pero me pierdo toda la navegación que se produce dentro del frame (mi url permanece estática conteniendo el iframe gordo).
    Estoy buscando alguna solución que sustituya SU url raiz por la mía… (disculpa, no uso lenguaje muy técnico) es decir, si su url fuera http://www.proveedor.com/usuario=27&producto33, (es mucho más larga), yo busco llamar al iframe con esta url: http://www.mitienda.com/usuario27&producto=33, y que el iframe de dentro lo sustituya por http://www.proveedor.com y me muestre correctamente el producto.
    Es la única forma que tengo que, por ejemplo, mandar un correo a un cliente con el producto que le interesa (y mi url)…

    ¿hay forma de hacerlo? ¿se te ocurre cómo?

    1. Cristian Carrera Post author Reply

      Hola Antonio
      Comprendo perfectamente la situacion.
      Para eso puede usar el archivo .htaccess y utilizar “RewriteRule” para re-escribir las URL tal como se hace para crear las famosas URLs amigables (URL friendly)
      Es un tema untanto complejo, veré si escribo un articulo al respecto.
      Sino puedes buscar en Google el manejo del archivo .htaccess.
      Saludos!
      Cristian

    1. Cristian Carrera Post author Reply

      Juan
      Fikate lo que le respondi a Antonio en estos mismos comentarios.
      Asi lo podrías hacer.
      Saludos!

      1. gerardo Reply

        hola cristian necesito ayuda casi no manejo html tengo mi dominio y yo hice mi web con wix gratis entonces el nevgador aparece la redirrecion a wix como puedo oculta esa parte de que se vea mi dominio y no el de wix visita mi web sifondecerveza.com.ve y veras lo que te digo de la direccion todo lo he ehcho viendo en google y youtube no tengo cursos ni nada sobre webmaster

        1. Cristian Carrera Post author Reply

          Gerardo
          Debes seguir este tutorial y lo podras hacer.
          Tu dominio sifondecerveza.com.ve no debes redireccionar a ningún lado.
          En tu dominio colocas en index.html como explico aqui, y en el IFRAME poner la url de tu sitio en Wix.
          Debería funcionar.
          Saludos!
          Cristian

          1. gerardo

            no se creo que estoy colocando algo que no es ayudaaaaaa

            sifon de cerveza

            html, body, div, iframe {
            margin:0;
            padding:0;
            height:100%;
            }
            iframe {
            display:block;
            width:100%;
            border:none; }

  15. Giaccomo Reply

    muchas gracias me a ayudado mucho. sinceramente no te entendí claramente al principio, soy algo torpe para aprender jajaja. en fin luego comprendí que la url que se vería reflejada desde la pagina es la que se creo con tu codigo. muchas gracias me has ayudado mucho.

  16. Enrique Reply

    Hola Cristian, quiero darte las gracias por que gracias a ti he resuelto un problema que hace tiempo quería resolverlo, de nuevo muchas gracias y saludos.

    1. Cristian Carrera Post author Reply

      Omar
      Verifica las medidas del iframe en el codigo.
      Sino enviame la url asi lo veo.
      Saludos!

  17. lasaro Reply

    saludos cristian me gustaría saber si esto puede servir para publicar sin que fb detecte mi url y si no funciona quería saber si tienes algun método para evadir el vaneo de los dominios en fb …
    gracias !!!

  18. diego Reply

    HOLA COMO ESTAS ME FUNCIONO PERFECTAMENTE , LO ÚNICO QUE CADA VEZ QUE HABRO VARIAS PAGINAS SE ME ABREN VARIAS PAGINAS , POR QUE ?

  19. jose Reply

    Saludos, y qué código habría que incorporar si quiero cambiar el iframe todos los meses pero quiero que se haga automáticamente. Digamos que es un iframe dinámico. Te pongo un ejemplo, quiero que en el iframe se visone una pagina que contine una newsletter que cambia todos los meses. La ruta sería http://www.dominio.com/newsletter/2016-01-01/index.html. Lo que va cambiando todos los meses es la carpeta con la fecha (año-mes-día). Gracias

  20. Antonio Reply

    Muy bueno, funciona perfecto, gracias!! solo le agregaria el meta viewport al head para que funcione con webs responsive

    1. noradriana Reply

      ¡Hola! ¿Me contáis cómo va lo de la etiqueta meta viewport? Tengo una web con una redirección frame pero, al acceder por la URL redireccionada, no funciona la configuración responsive. Y eso es un gran fail. ¿Hay solución?

      1. Cristian Carrera Post author Reply

        La etiqueta meta viewport es para indicarle al dispositivo que permita escalar. o no, nuestro sitio cuando se visualice.
        Ayuda a definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.

  21. Fernando Secchi Reply

    Disculpen. Cual sería la utilidad si de todas formas dando click derecho puede ver la URL que se está utilizando?
    Porque como medida de seguridad no sirve. Para SEO tampoco.
    Lo digo por si alguien piensa que de esta manera no se puede saber que es lo que se está pasando por querystring…

    1. Cristian Carrera Post author Reply

      Hola Fernando.
      Aclaro que esta utilidad NO es una medida de seguridad, es solo algo “estético” para enmascarar simplemente una URL.
      Lo que dices es cierto con click derecho se podría saber la URL, pero eso requiere de un nivel conocimiento para poder hacerlo, la mayoría de la personas no tienen conocimientos sobre como hacer esto.
      De hecho, con el inspector de código del navegador podrías verlo fácilmente, por eso aclaro que esto es una utilidad y NO una medida de seguridad.
      saludos!

  22. Andres Reply

    Buen dia he probado el codigo y funciona muy bien el unico inconveniente es que cuando le doy F5 la pagina vuelve hacian donde empezo, para evitar eso que podria hacer

    1. Cristian Carrera Post author Reply

      Como que vuelve a donde empezo?? Siempre deberia mostrarte lo mismo, lo que esta en el iframe.

  23. Plinio Reply

    Hola Cristian, espero que me puedas orientar, tengo en mi web una entrada que solía traerme buen tráfico, pero desde hace algunas semanas dejó de hacerlo y al revisar en google me di cuenta que dicho post aparece con la url de otro dominio y al dar clic, redirecciona a una página diferente a la de mi sitio web, no obstante en el buscador aparece con el título y el extracto de mi entrada.
    Desconozco cómo solucionar esto. Ya revisé en whois y obtuve el correo del propietario y ya le escribí solicitando amablemente que retire sea lo que sea que haya hecho para robarme mi entrada. Creo que lo puedo reportar a google, pero aún no se cómo.
    ¿Sabes si hay algo que yo pueda hacer directamente para quitarme a esta lacra de encima?
    Desde ya muchas gracias por tu atención y posible ayuda.
    Saludos y felicidades por tu artículo.

    1. Cristian Carrera Post author Reply

      Hola Plinio
      Si el post con la URL de esa persona aparece en Google, es porque lo indexó naturalmente. Mucho no puedes haces.
      Si el post es una copia idéntica al tuyo, yo me contactaría con la persona y le diría que al menos coloque al final del articulo la fuente de donde sacó dicha info (o sea tu post) y un link “vivo” hacia el mismo.
      Saludos!

    1. Cristian Carrera Post author Reply

      Alberto
      Esto no aplica para CMS’s porque suelen manejar un sistema de armado dinamico de HTML.
      saludos!

  24. ape Reply

    buen post, sabes si hay forma de que si escriben directamente la url del sitio del iframe, este redirija a la entrada principal (con el index)

    1. Cristian Carrera Post author Reply

      Gracias. Si claro, si alguien escribe la URL del iframe, va a la entrada directo. Saludos!

Deja un comentario

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

*