Honor Do Not Track requests (#93)

This PR adds support for Do Not Track.

Do Not Track is a Candidate Recommendation for browsers and websites
willing to implement a signal sent by web browsers to web servers to
indicate server operators the user behind the web browser does not want
to be tracked online.

makigas.es will not respect the user decision by disabling third party
components that cannot respect DNT in a faithfully way whenever the user
has enabled DNT. This removes Google Analytics whenever the user has DNT
enabled.

Neither YouTube embeds nor Disqus have been removed because YouTube
embeds are served through youtube-nocookie.com anyway, so there is no
risk for information leaks unless the user play those videos. Disqus
seems to be respecting DNT according to the docs, so the ban has been
lifted as well.

Fixes: #21

app/assets/javascripts/application.js

@@ -4,4 +4,14 @@
 window.addEventListener('load', function(e) {
   document.body.classList.remove('no-js');
   document.body.classList.add('js');
-});
+});
+
+document.getElementById('ack_dnt').addEventListener('click', () => {
+  const getExpirationDate = () => {
+    let date = new Date();
+    date.setFullYear(date.getFullYear() + 1);
+    return date;
+  }
+  let oneYearFromNow = getExpirationDate().toUTCString();
+  document.cookie = `dnt_ack=ack; expires=${oneYearFromNow}; path=/`;
+});

app/assets/stylesheets/application.scss

@@ -21,7 +21,7 @@ body {
     background: desaturate(#003399, 50%);
     border-bottom: none;
     margin-bottom: 0;
-  
+
     .navbar-toggle .icon-bar { background: white; }
 
     .navbar-brand { padding-right: 40px; }
@@ -36,7 +36,7 @@ body {
       margin-left: 6px;
       background: lighten(#993300, 10%);
     }
-    
+
     .navbar-nav {
       margin-top: 0;
       margin-bottom: 0;
@@ -57,31 +57,31 @@ body {
   padding-top: 20px;
   padding-bottom: 20px;
   text-align: center;
-  
+
   @media screen and (min-width: 992px) {
     padding-bottom: 90px;
   }
-  
+
   h1 {
     font-family: 'Montserrat';
     font-weight: 500;
     font-size: 30px;
     line-height: 32px;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    
+
     @media screen and (min-width: 992px) {
       font-size: 40px;
       line-height: 40px;
     }
   }
-  
+
   p {
     font-size: 18px;
     line-height: 24px;
     margin-top: 1rem;
     margin-bottom: 1rem;
-    
+
     @media screen and (min-width: 992px) {
       font-size: 22px;
       line-height: 30px;
@@ -111,9 +111,9 @@ body {
   background: #303030;
   color: white;
   padding-top: 10px;
-  
+
   a { color: lighten(#003399, 60%); }
-  
+
   .footer-links {
     text-align: center;
     @media screen and (min-width: 768px) {
@@ -124,43 +124,43 @@ body {
       list-style: none;
       padding-left: 0;
     }
-    
+
     h3 {
       font-family: 'Montserrat';
       font-weight: normal;
       margin-top: 1.2rem;
       margin-bottom: 1.2rem;
     }
   }
-  
+
   .copyright-info {
     background: desaturate(#003399, 50%);
     margin-top: 30px;
     padding-top: 20px;
     padding-bottom: 10px;
-    
+
     .row {
       text-align: center;
       @media screen and (min-width: 992px) {
         display: flex;
         & > div { align-self: flex-end; }
       }
     }
-    
+
     p {
       line-height: 20px;
       @media screen and (min-width: 992px) { line-height: 12px; }
     }
-    
+
     .copyright-links {
       @media screen and (min-width: 992px) { text-align: left; }
     }
-    
+
     .year {
       line-height: 150%;
       font-size: 1.1em;
     }
-    
+
     .made-in-spain {
       @media screen and (min-width: 992px) {
         text-align: right;
@@ -271,4 +271,13 @@ body.discord-page {
     .about-server { text-align: left; }
     .hero-tron a { margin-top: 0; }
   }
-}
+}
+
+.dnt-banner {
+  margin-top: 0;
+  margin-bottom: 0;
+
+  .close {
+    opacity: 0.6;
+  }
+}

app/helpers/application_helper.rb

@@ -38,4 +38,12 @@ def to_markdown text
     markdown = Redcarpet::Markdown.new(render)
     markdown.render(text).html_safe
   end
+
+  def dnt_requested
+    request.headers.include?('DNT') && request.headers['DNT'].starts_with?('1')
+  end
+
+  def dnt_acknowledged
+    cookies[:dnt_ack] == 'ack'
+  end
 end

app/views/layouts/_analytics.html.erb

@@ -1,3 +1,4 @@
+<% unless dnt_requested %>
 <% if Rails.application.secrets.analytics_key %>
 <script>
   (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
@@ -9,4 +10,7 @@
   ga('send', 'pageview');
 
 </script>
-<% end %>
+<% end %>
+<% else %>
+<!-- Aquí iría el código analítico de Google Analytics, pero tu navegador está pidiendo no ser rastreado. -->
+<% end %>

app/views/layouts/_header.html.erb

@@ -1,3 +1,14 @@
+<% if dnt_requested && !dnt_acknowledged %>
+<div class="alert alert-success alert-dismissible dnt-banner" role="alert">
+  <div class="container">
+    <button type="button" class="close" id="ack_dnt" data-dismiss="alert" aria-label="Cerrar"><span aria-hidden="true">&times;</span></button>
+    Tu navegador ha enviado la señal DNT para indicar que no quieres ser rastreado
+    y makigas.es respetará tu decisión.
+    <%= link_to 'Conoce más sobre esto', '/about/dnt' %>.
+  </div>
+</div>
+<% end %>
+
 <header role="banner" class="main-header">
   <nav class="navbar navbar-makigas navbar-static-top">
     <div class="container">
@@ -35,6 +46,6 @@
       </div>
     </div>
   </nav>
-  
+
 </header>
 

app/views/pages/dnt.es.html.erb

@@ -0,0 +1,140 @@
+<% content_for :title, 'Do Not Track – makigas' %>
+
+<% content_for :hero do %>
+  <h1>Do Not Track</h1>
+<% end %>
+
+<p>
+<strong>Do Not Track</strong> es una tecnología estandar incorporada en la
+mayoría de navegadores web recientes que permite a un navegador web señalizar a
+las páginas web la voluntad del usuario que utiliza ese navegador web para no
+ser rastreado durante su sesión de navegación.
+</p>
+
+<p>
+Cuando activas la señal Do Not Track en las opciones de tu navegador, cada
+petición que hagas a un sitio web en una sesión de navegación incluirá esa
+preferencia. Es decisión de cada sitio web respetar tu decisión o no.
+<strong>Es importante tener en cuenta que no todos los sitios web soportan
+Do Not Track</strong>. Consulta la política de privacidad de cada sitio para
+conocer tus opciones.
+</p>
+
+<p>
+En cuanto a <strong>makigas.es</strong>, si tu navegador envía la cabecera
+Do Not Track, respetaremos tu decisión haciendo una serie de cambios a la forma
+en la que se trata tu petición para proteger tu privacidad.
+</p>
+
+<h3>¿Hay algún elemento que pueda rastrearme en makigas.es?</h3>
+
+<p>
+Antes que nada, es importante advertir que el sitio web de makigas.es no muestra
+anuncios en el código HTML que se descarga cuando haces una petición. Eso
+significa que no hay anuncios tal cual en la página. Los reproductores de vídeo
+integrados sí que muestran anuncios cuando se inicia la reproducción, pero esos
+anuncios son cargados por el reproductor de YouTube, no por makigas.es.
+</p>
+
+<p>
+makigas.es tampoco utiliza ninguna tecnología de seguimiento ni está afiliado
+a ninguna plataforma de márketing o remárketing. La única tecnología analítica
+que se utiliza es <strong>Google Analytics</strong>, para conocer mejor el uso
+que los usuarios hacen del sitio web de makigas.es con el fin de mejorarlo
+(por ejemplo, identificar qué vídeos son los más vistos o qué listas de
+reproducción son las más reproducidas). Esta información te la describimos en
+detalle en nuestra <a href="/privacy">política de privacidad</a>.
+</p>
+
+<p>
+Sin embargo, makigas.es sí utiliza algunos plugins de terceros para hacer más
+rica tu experiencia en el sitio web. Cuando visitas makigas.es, es posible que
+cargues uno o más de estos plugins de terceros:
+</p>
+
+<ul>
+<li>Google Analytics, que como hemos dicho, sirve para obtener información
+analítica sobre la forma en la que los usuarios visitan makigas.es.</li>
+<li>El reproductor de YouTube, que sirve para que puedas visualizar los vídeos
+desde esta página web en vez de tener que navegar a nuestro canal de YouTube
+si así lo prefieres.</li>
+<li>El sistema de comentarios Disqus, que te permite dejar comentarios en la
+página de un vídeo para que puedas hacer indicaciones, sugerencias, emitir
+opiniones o realizar preguntas.</li>
+</ul>
+
+<h3>¿Cómo se altera mi sesión de navegación cuando activo DNT?</h3>
+
+<p>
+Cuando visitas makigas.es con la cabecera DNT activa, ocurre lo siguiente:
+</p>
+
+<ul>
+<li>Dado que Google Analytics no tiene una forma clara de respetar la señal
+DNT, desactivamos la inclusión de ese plugin. Eso significa que ya no se
+incluirá en el agregado estadístico información sobre los vídeos que ves en
+esta página web. (Agradeceríamos que nos des tu opinión sobre los vídeos que
+ves para saber cuáles son los más útiles o no, ya que sin el plugin analítico
+no lo podemos determinar automáticamente.)</li>
+<li>De acuerdo con la información que disponemos en el sitio de soporte de
+Disqus, <a href="https://help.disqus.com/terms-and-policies/how-to-edit-your-data-sharing-settings" target="_blank">
+Disqus parece estar respetando la señalización DNT que envían los navegadores</a>,
+motivo por el cual lo conservamos incluso cuando se hace una petición DNT.
+Si en algún momento recibimos información de que esto no es así, lo desactivaremos
+lo antes posible para que no se incluya. Si aun así quieres modificar la manera
+en la que se comparten tus datos, la propia ayuda de Disqus te recomienda que
+consultes las
+<a href="https://disqus.com/data-sharing-settings/" target="_blank">Opciones para compartir datos</a>
+en el sitio web de Disqus.</li>
+</ul>
+
+<p>
+Como tampoco hay un mecanismo claro para informar cuando DNT está siendo
+reconocido por una página web, makigas.es presenta un banner en la parte
+superior de la página cuando visitas el sitio web teniendo DNT activo, con el
+objetivo de reconocer que la configuración se está teniendo en cuenta.
+<strong>Puedes pulsar el botón Cerrar para ocultar este banner</strong>. Esto
+generará una cookie en tu navegador llamada <em>dnt_ack</em> con el objetivo
+de guardar ese visto enviado por tu navegador para que en futuras cargas de
+página no se vuelva a mostrar el banner.
+</p>
+
+<h3>¿Qué cosas no cambian cuando se visita makigas.es con DNT activo?</h3>
+
+<p>
+Los reproductores de YouTube siempre se sirven desde el dominio youtube-nocookie.com,
+una variante del YouTube normal proporcionada por Google donde no se almacenan cookies
+en el navegador si el usuario no interactúa con el vídeo embebido (por ejemplo,
+pulsando el botón Play).
+</p>
+
+<p>
+Aun siendo cargado desde youtube-nocookie.com, el reproductor puede generar
+cookies cuando se pulsa el botón Play. No se han tomado acciones a este respecto
+ya que el principal activo de makigas.es y la razón por la que los usuarios
+visitan este sitio web es por los vídeos. Si bloqueásemos la carga de recursos
+desde youtube-nocookie.com o desde youtube.com, no podrías visualizar el
+contenido del vídeo en primer lugar.
+</p>
+
+<p>
+Del mismo modo, tener activo el modo DNT en tu navegador no impide que el
+servidor web que escucha peticiones en makigas.es continúe registrando en un
+archivo de log en el servidor información sobre la petición recibida. Esta
+petición queda registrada por <strong>razones estrictas de seguridad</strong>,
+según lo estipulado en la Cláusula 49 del
+<a href="https://eur-lex.europa.eu/legal-content/ES/TXT/HTML/?uri=CELEX:32016R0679&from=ES" target="_blank">Reglamento General de Protección de Datos europeo</a>,
+con el fin de hacer funcionar la instalación de fail2ban que hay en el servidor.
+El servidor tiene configurado logrotate para descartar la información tras
+cuatro semanas, y los logs son rotados a diario, cifrando los viejos logs
+mediante criptografía PGP para evitar un acceso indebido en el caso de producirse
+una brecha en el servidor. Estos logs no son empleados con fines analíticos
+debido a la cantidad de ruido que se registra en ellos y a la poca fiabilidad
+que ofrecen para distinguir usuarios reales de visitas automatizadas.
+</p>
+
+<h3>¿Cómo puedo activar DNT en mi navegador web?</h3>
+
+<p>Consulta las instrucciones de la ayuda de tu navegador web para obtener
+información actualizada sobre cómo activar la función No Realizar Seguimiento
+en tu navegador web.</p>

config/routes.rb

@@ -43,6 +43,8 @@
   get :cookies, to: 'pages#cookies'
   get :discord, to: 'pages#discord'
 
+  get :dnt, path: 'about/dnt', to: 'pages#dnt'
+
   # Legacy routes (redirect only).
   get '/videos/:topic/:playlist/episodio/:video' => redirect('/series/%{playlist}/%{video}')
   get '/videos/:topic/:playlist' => redirect('/series/%{playlist}')