Presentación de la info sobre DMARC

_includes/details.njk

@@ -7,6 +7,13 @@
 
 <div id="score" class="{{ results | color }}">{% if results.tests_passed < 5 %}☠️{% else %}{{ results.grade }}{% endif %}</div>
 
+{% if not web.url | dmarc_secure %}
+  <div class="phising-box" title="Vulnerable a suplantación de identidad de emails">
+    <a href="/faq/#que-significa-que-los-emails-son-vulnerables-a-suplantacion-de-identidad"><img src="/images/phising.png"></a>
+    <p>Emails vulnerables</p>
+  </div>
+{% endif %}
+
 <h2>🔎 Resultado del análisis</h2>
 
 <ul>
@@ -24,14 +31,7 @@
   <li><strong>Ubicación:</strong> <a href="/{{ type }}/{{ parent }}">{{ location.name }}</a></li>
   {% endif %}
   <li><strong>Puntuación:</strong> {{ results.score }}/100</li>
-  <li>
-    <strong>Email:</strong>
-    {% if web.url | dmarc_secure %}
-      Seguro
-    {% else %}
-      <a href="https://dmarcguide.globalcyberalliance.org/#/tool-select?d={{ web.url }}&r=s&s=none&lang=es">Vulnerable a suplantación de identidad de emails</a>
-    {% endif %}
-  </li>
+
   {% if web.tags %}
   <li class="icon-list">🏷️
   {% for tag in web.tags %}
@@ -41,10 +41,13 @@
   {% endif %}
 </ul>
 
-<p>
-{{ results | abbr }}.<br >
-<a href="https://observatory.mozilla.org/analyze/{{ web.url }}">🖥 Leer el informe técnico completo.</a>
-</p>
+<p>{{ results | abbr }}.<br>
+Los emails de este sitio son {% if web.url | dmarc_secure %}seguros{% else %}<strong>vulnerables</strong>{% endif %} frente a suplantación de identidad.</p>
+
+<ul class="iconify">
+  <li><a href="https://observatory.mozilla.org/analyze/{{ web.url }}">🖥 Informe técnico del análisis de la web</a></li>
+  <li><a href="https://dmarcguide.globalcyberalliance.org/#/tool-select?d={{ web.url }}&r=s&s=none&lang=es"> ✉️ Informe técnico del análisis del email</a></li>
+</ul>
 
 {% if (web.twitter) and (results.score < 70) %}
 <p><a class="twitter-share-button" href="https://twitter.com/intent/tweet/?text={{ 'Hola @' + web.twitter + '

_includes/header.njk

@@ -5,6 +5,7 @@
     <li><span class="emoticon">🕵️</span> Impide que puedan <strong>interceptar</strong> los datos que introduces (contraseñas, datos bancarios, personales o médicos).
     <li><span class="emoticon">💉</span> Impide que terceros <strong>"inyecten"</strong> contenido dañino o modifiquen la información sin que te enteres.</li>
     <li><span class="emoticon">⚠️</span> <strong>Los sitios sin una nota A o B</strong> tienen deficiencias, ¡tu privacidad está en riesgo!</li>
+    <li><span class="emoticon phising"><img src="/images/phising.png"></span> Analizamos si sus emails son vulnerables a <strong>suplantación de identidad</strong>.</li>
     <li>📌 <a href="/faq/">Lee en detalle todos los riesgos</a>.</li>
   </ul>
 

_includes/tabla.njk

@@ -14,10 +14,10 @@
             <tr class="{{ web | color }}">
               <td>
                 <a href="/w/{{ web.url | replace('.', '!') }}" title="{{ web | abbr }}">
-                  {% if web.tests_passed < 5 %}☠️{% else %}{{ web.grade }}{% endif %}
                   {% if not web.url | dmarc_secure %}
-                    <span title="Vulnerable a suplantación de identidad de emails">✉️</span>
+                    <span class="phising" title="Vulnerable a suplantación de identidad de emails"><img src="/images/phising.png"></span>
                   {% endif %}
+                  {% if web.tests_passed < 5 %}☠️{% else %}{{ web.grade }}{% endif %}
                 </a>
               </td>
               <td>

assets/sass/main.scss

@@ -136,8 +136,37 @@ tr.unknown {
   background-color: #eee8e8;
 }
 
+span.phising {
+  img {
+      height: 16px;
+  }
+}
+
+div.phising-box {
+  width: 128px;
+  float: right;
+  clear: both;
+  margin: 1em 0;
+  font-size: 0.8em;
+  text-align: center;
+
+  img {
+    height: 128px;
+  }
+
+  @include breakpoint("<=small") {
+  width: 80px;
+  img {
+      height: 80px;
+    }
+  }
+}
+
 span.emoticon {
   font-size: 2em;
+  img {
+    height: 30px;
+  }
 }
 
 ul.iconify li {
@@ -303,4 +332,4 @@ img[src*="#thumbnail"] {
 
 .icon[data-popularity="high"] {
   color: firebrick;
-}
+}

pages/faq.md

@@ -12,6 +12,7 @@ permalink: "/faq/"
 - [¿Qué es una conexión segura (HTTPS)?](#{{ '¿Qué es una conexión segura (HTTPS)?' | slug }})
 - [¿Qué nos asegura el cifrado?](#{{ '¿Qué nos asegura el cifrado?' | slug }})
 - [¿Qué significan las notas, por qué son importantes?](#{{ '¿Qué significan las notas, por qué son importantes?' | slug }})
+- [¿Qué significa que los emails son vulnerables a suplantación de identidad?](#{{ '¿Qué significa que los emails son vulnerables a suplantación de identidad?' | slug }})
 - [¿Qué tipo de problemas podría haber en webs que no tienen esa nota?](#{{ '¿Qué tipo de problemas podría haber en webs que no tienen esa nota?' | slug }})
 - [¿Debemos exigir webs seguras?](#{{ '¿Debemos exigir webs seguras?' | slug }})
 - [¿Cómo puedo participar en #websegura?](#{{ '¿Cómo puedo participar en #websegura?' | slug }})
@@ -55,6 +56,16 @@ Sin embargo, usar HTTPS, no es suficiente para garantizar la total seguridad de
 
 ⚠**Si la web no tienen una nota A o B**, usan una implementación deficiente, ¡tu privacidad está en riesgo!
 
+<a id="{{ '¿Qué significa que los emails son vulnerables a suplantación de identidad?' | slug }}"></a>
+
+## ¿Qué significa que los emails son vulnerables a suplantación de identidad?
+
+Recientemente hemos empezado también a analizar la seguridad de los emails de estos dominios de instituciones públicas, verificando si por una mala configuración son vulnerables a suplantación de identidad (si no implementan [SPF](https://es.wikipedia.org/wiki/Sender_Policy_Framework) y [DMARC](https://es.wikipedia.org/wiki/DMARC))
+
+Esto es, que cualquiera pueda enviarnos un email haciéndose pasar por nombre@lawebinstitucional.com sin que podamos detectarlo.
+
+De esta forma los ciudadanos y los trabajadores públicos pueden ser objeto muy fácil de engaños (phising) para realizar acciones que les perjudiquen, incluido robo de datos o instalación de software malicioso para secuestrar sus datos.
+
 <a id="{{ '¿Qué tipo de problemas podría haber en webs que no tienen esa nota?' | slug }}"></a>
 
 ## ¿Qué tipo de problemas podría haber en webs que no tienen esa nota?