columnas - ¿Cuál es la forma más confiable de ocultar/suplantar a la referencia en JavaScript?

ocultar columnas tabla html javascript

Question

Normalmente, la referencia es trazable a través de:

• El document.referrer de JavaScript
• Los encabezados de solicitud, por ejemplo, $_SERVER[''HTTP_REFERER''] PHP $_SERVER[''HTTP_REFERER'']

He configurado una demostración de Codepad que muestra estas propiedades para fines de prueba.

Requisitos:

1. El referenciador original debe estar efectivamente oculto, al menos para todos los eventos del mouse.
2. Compatibilidad con varios navegadores (al menos Chrome y Firefox).
   
3. Independiente, sin ningún contenido externo (complementos, bibliotecas, páginas de redirección, ...).
4. Sin efectos secundarios: los enlaces no deben reescribirse, las entradas del historial deben conservarse .

La solución se usará para ocultar la referencia cuando se sigue un enlace de <a href="url"> .

Descripción exacta del uso-caso

Como se describe en esta pregunta sobre Webapps , los enlaces en la Búsqueda de Google se modifican al hacer clic. Por consiguiente,

1. Google puede rastrear su comportamiento de búsqueda (Privacidad--)
2. La solicitud de la página se retrasa un poco.
3. La página vinculada no puede rastrear su consulta de búsqueda de Google (Privacidad ++)
4. Las URL arrastradas / copiadas se ven como http://google.com/lotsoftrash?url=actualurl .

Estoy desarrollando un script de UserScript (Firefox) / Content (Chrome) ^{( code )} , que elimina el evento de mutilación de enlaces de Google. Como resultado, se tratan los puntos 1, 2 y 4.

El punto 3 permanece.

• Chrome: <a rel="noreferrer">
• Firefox: data-URIs . He creado un enfoque sofisticado para implementar esta función para clics izquierdos y medios, mientras sigo aplicando el punto 4. Sin embargo, estoy luchando con el método del botón derecho.

Answer 1

¿No puedes crear un sistema de enlace que resida dentro de iframes?

Si ajusta un iframe alrededor de cada enlace, el iframe puede actuar como una desviación externa. El usuario haría clic en el enlace dentro del marco, abriendo una página cuya referencia se establece en la ubicación del iFrame, en lugar de la página real.

Answer 2

Encontré una solución que funciona en Chrome y Firefox. Implementé el código en un UserScript, no me sigas Google .

Demostración (probado en Firefox 9 y Chrome 17): http://jsfiddle.net/RxHw5/

Ocultación del remitente para Webkit (Chrome, ..) y Firefox 37+ (33 + *)

Los navegadores basados ​​en Webkit (como Chrome, Safari) son support <a rel="noreferrer"> ^spec .
La ocultación de referencia puede implementarse completamente al combinar este método con dos oyentes de eventos:

• mousedown : al hacer clic, hacer clic con el botón secundario, hacer clic con el botón secundario en el menú de contexto, ...
• keydown ( Tab Tab Tab ... Enter ).

Código:

function hideRefer(e) {
   var a = e.target;
   // The following line is used to deal with nested elements,
   //  such as: <a href="."> Stack <em>Overflow</em> </a>.
   if (a && a.tagName !== ''A'') a = a.parentNode;
   if (a && a.tagName === ''A'') {
      a.rel = ''noreferrer'';
   }
}
window.addEventListener(''mousedown'', hideRefer, true);
window.addEventListener(''keydown'', hideRefer, true);

* rel=noreferrer es compatible con Firefox desde el 33, pero el soporte se limitaba a los enlaces dentro de la página. Las referencias aún se enviaban cuando el usuario abría la pestaña a través del menú contextual. Este error se corrigió en Firefox 37 ^{[ error 1031264 ]} .

Referente oculto para versiones antiguas de Firefox

Firefox no rel="noreferrer" hasta la versión 33 ` ^{[ error 530396 ]} (o 37, si también desea ocultar la referencia para menús contextuales).

Se puede usar un URI de datos + <meta http-equiv=refresh> para ocultar el referente en Firefox (e IE). Implementar esta característica es más complicado, pero también requiere dos eventos:

• click : al click clic, al hacer clic con el botón central, ingresar
  
• contextmenu : al hacer clic con el botón derecho, pestaña Tab ... Contextmenu

En Firefox, el evento click se mouseup para cada mouseup y mouseup Enter en un enlace (o control de formulario). El evento contextmenu es obligatorio porque el evento click se dispara demasiado tarde para este caso.

Basado en URI de datos y tiempos de espera de fracción de segundo:
Cuando se activa el evento click , el atributo href se reemplaza temporalmente por un URI de datos. El evento finalizó y se produce el comportamiento predeterminado: abrir el URI de datos, que depende del atributo de target y los modificadores MAYÚSCULAS / CTRL.
Mientras tanto, el atributo href se restaura a su estado original.

Cuando se desencadena el evento contextmenu , el enlace también cambia por una fracción de segundo.

• Las opciones Open Link in ... abrirán el URI de datos.
• La opción de Copy Link location hace referencia al URI original restaurado.
• ☹ La opción Bookmark refiere a la URI de datos.
• ☹ Save Link as puntos al URI de datos.

Código:

// Create a data-URI, redirection by <meta http-equiv=refresh content="0;url=..">
function doNotTrack(url) {
   // As short as possible. " can potentially break the <meta content> attribute,
   // # breaks the data-URI. So, escape both characters.
   var url = url.replace(/"/g,''%22'').replace(/#/g,''%23'');
   // In case the server does not respond, or if one wants to bookmark the page,
   //  also include an anchor. Strictly, only <meta ... > is needed.
   url = ''<title>Redirect</title>''
       + ''<a href="'' +url+ ''" style="color:blue">'' +url+ ''</a>''
       + ''<meta http-equiv=refresh content="0;url='' +url+ ''">'';
   return ''data:text/html,'' + url;
}
function hideRefer(e) {
   var a = e.target;
   if (a && a.tagName !== ''A'') a = a.parentNode;
   if (a && a.tagName === ''A'') {
      if (e.type == ''contextmenu'' || e.button < 2) {
         var realHref = a.href; // Remember original URI
         // Replaces href attribute with data-URI
         a.href = doNotTrack(a.href);
         // Restore the URI, as soon as possible
         setTimeout(function() {a.href = realHref;}, 4);
      }
   }
}
document.addEventListener(''click'', hideRefer, true);
document.addEventListener(''contextmenu'', hideRefer, true);

Combinando ambos métodos

Desafortunadamente, no hay una forma sencilla de detectar las funciones de esta característica (y mucho menos tener en cuenta los errores). Entonces, puede seleccionar el código relevante basado en navigator.userAgent (es decir, UA-sniffing), o usar uno de los complicados métodos de detección de ¿Cómo puedo detectar rel = "noreferrer"? .

Answer 3

Esto es más complicado de lo que parece a primera vista. Mira el código de este proyecto:

https://github.com/knu/noreferrer

Él promete todo lo que quieres, pero tienes que hacerlo en la página de enlace.

Answer 4

Hay una solución de navegador cruzada en Javascript que elimina la referencia, usa Iframes creados dinámicamente, puede echar un vistazo a una prueba de concepto (descargo de responsabilidad: utiliza una pequeña biblioteca JS que escribí).

Answer 5

Implementé una solución de iframe simple pero efectiva utilizando jquery.

https://jsfiddle.net/skibulk/0oebphet/

(function($){
  var f = $(''<iframe src="about:blank" style="display: none !important;">'').appendTo(''body'');
  $(''a[rel~=noreferrer]'').click(function(event){
    var a = $(event.target.outerHTML);
    a.appendTo(f.contents().find(''body''));
    a[0].click();
    return false;
  });
})(jQuery);

Answer 6

Lo que estás pidiendo no se puede hacer en Firefox.

La implementación del menú contextual actual siempre pasa el documento actual como referencia:

// Open linked-to URL in a new window.
openLink: function () {
    var doc = this.target.ownerDocument;
    urlSecurityCheck(this.linkURL, doc.nodePrincipal);
    openLinkIn(this.linkURL, "window", {
        charset: doc.characterSet,
        referrerURI: doc.documentURIObject // <----------------
    });
},

// Open linked-to URL in a new tab.
openLinkInTab: function () {
    var doc = this.target.ownerDocument;
    urlSecurityCheck(this.linkURL, doc.nodePrincipal);
    openLinkIn(this.linkURL, "tab", {
        charset: doc.characterSet,
        referrerURI: doc.documentURIObject // <----------------
    });
},

// open URL in current tab
openLinkInCurrent: function () {
    var doc = this.target.ownerDocument;
    urlSecurityCheck(this.linkURL, doc.nodePrincipal);
    openLinkIn(this.linkURL, "current", {
        charset: doc.characterSet,
        referrerURI: doc.documentURIObject // <----------------
    });
}, 

Obviamente, los usuarios no pueden cambiar la implementación del menú contextual, por lo que la única salida es una extensión del navegador.

(O bien, lo que sería un hack bastante pobre, deshabilite el menú contextual llamando a preventDefault() en el evento contextmenu , y use su propio menú contextual personalizado)

Answer 7

Puede usar el nuevo borrador estándar de la Política de referencia para evitar que el encabezado del referer se envíe al origen de la solicitud. Ejemplo:

<meta name="referrer" content="none">

Aunque Chrome y Firefox ya han implementado una versión preliminar de la Política de referencias, debe tener cuidado con ella porque, por ejemplo, Chrome espera que no-referrer lugar de none (y tampoco he visto never algún lugar). No conozco el comportamiento si solo agrega tres metaetiquetas separadas, pero en caso de que eso no funcione, podría implementar un guión corto que itere sobre los tres valores y compruebe si el valor realmente se estableció después de configurar el atributo / propiedad de la metaetiqueta

Esta metaetiqueta se aplica a todas las solicitudes en la página actual (ajax, imágenes, scripts, otros recursos ...) y a la navegación a otra página.

Answer 8

Se puede encontrar un análisis muy completo (pero breve) en:

http://lincolnloop.com/blog/2012/jun/27/referrer-blocking-hard/

Este artículo analiza los dos métodos explicados en otras respuestas (método js, ​​redireccionamiento iframe) y finalmente sugiere un enfoque de página de redirector mediado, como el que se ve en los enlaces de búsqueda de Google.

Answer 9

Según lo solicitado, al usar JavaScript:

var meta = document.createElement(''meta'');
meta.name = "referrer";
meta.content = "no-referrer";
document.getElementsByTagName(''head'')[0].appendChild(meta);

Esto agregará la siguiente etiqueta meta a la sección principal de la página web:

<meta name="referrer" content="no-referrer" />

A partir de 2015, esta es la forma de evitar el envío del encabezado Referer.

Answer 10

qué pasa si enviamos un FORMULARIO usando JavaScript, de esta manera no habrá referencia.

document.form_name.submit()

básicamente, enviamos un formulario con el método de ACCIÓN deseado.