Vanilla JavaScript Document Ready

Document.prototype.ready = function(callback) {
if(callback && typeof callback === 'function') {
document.addEventListener("DOMContentLoaded", function() {
if(document.readyState === "interactive" || document.readyState === "complete") {
return callback();
}
});
}
};
// usage
document.ready(function() { alert('ok!'); });

view raw
DOM-Ready.js
hosted with ❤ by GitHub

XSS scripting e pgp.mit.edu

Cos'è un attacco XSS (Cross-Site)?

Il cross-site scripting (XSS) è una vulnerabilità che affligge siti web dinamici che impiegano un insufficiente controllo dell'input nei form. Un XSS permette a un cracker di inserire o eseguire codice lato client al fine di attuare un insieme variegato di attacchi quali, ad esempio, raccolta, manipolazione e reindirizzamento di informazioni riservate, visualizzazione e modifica di dati presenti sui server, alterazione del comportamento dinamico delle pagine web, ecc.

source Wikipedia

 

Se utilizzate Thunderbird e plugin come Enigmail avete la possibilità di importare tutte le chiavi PGP relative agli indirizzi e-mail presenti nella vostra rubrica.

Prima di tutto avete bisogno di specificare un server di chiavi, come pgp.mit.edu, poi la plugin, per ogni singolo indirizzo e-mail, cercherà una corrispondente chiave PGP e vi chiederà se volete importare i risultati.

Ma, a volte, le chiavi non sono come ve le aspettate.

A volte i risultati contengono dati non validi, e per essere più precisi, possono contenere codice malevolo.

Se effettuate la richiesta nel form di ricerca, l'output HTML che ne risulta può contenere questi codici ed eseguire funzioni javascript , redirect, attacchi XSS, ecc.

In conclusione

Fate attenzione, ed evitate l'import massivo di chiavi PGP.


JS/CSS Moon Phases snippet

Simple script to generate moon phases ( https://en.wikipedia.org/wiki/Lunar_phase )

It uses 2 SVG (2 hemispheres) and some CSS transformation.

You can avoid JS if you don’t need real-time phase update.

HTML code

<div class="moon">
  <svg height="200" width="100" class="moon-left">
    <circle cx="100" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="100" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg><svg height="200" width="100" class="moon-right">
    <circle cx="0" cy="100" r="100" stroke="white" fill="white" class="bg"/>
    <circle cx="0" cy="100" r="100" stroke="white" fill="black" class="fg"/>
  </svg>
  
  <div id="phase"></div>
</div>

 

CSS

html, body {width:100%;background-color:#333;margin:0;position:relative; font: 1em sans-serif;}
.moon {width:200px;margin:2rem auto;}
#phase {width:200px;margin:25px 0;}

.moon-left,.moon-right {display:inline-block;width:100px;position:relative;margin:0;}
.moon-left .bg,.moon-right .bg {stroke-width:2px;}

.moon-right .fg {stroke-width:2px;}
.moon-left .bg {fill:black;}
.moon-left .fg {fill:white;transform-origin: 0% 0%;}

.moon-right .fg {transform: scaleX(1);}
.moon-left .fg {transform: scaleX(0) translateX(0);}

 

and JS code. The code is prolix and redundant, but it helps to understand what happens.

jQuery( "#phase" ).slider({
      min: 0,
      max: 200,
      value: 2,
      step:10,
      slide: function( event, ui ) {
        updateMoon( ui.value );
      }
  });

Math.radians = function(degrees) {
  return degrees * Math.PI / 180;
};
function updateMoon(phase){
  var phaseScale = 1,
      phaseTrans = 100,
      phaseRight = 0;
  
  if(phase <= 100) {
    phaseRight = (1-phase/100);
  } 
  jQuery('.moon-right .fg').css({
    'transform':'scaleX(' + phaseRight + ')'
  });
  
  if(phase >= 100) {
    phaseScale = (1-(phase-100)/100);
    phaseTrans = 100*phaseScale;
  } 
  jQuery('.moon-left .fg').css({
    'transform':'translate('+phaseTrans+'px,0) scaleX(' + (1-phaseScale) + ')'
  });
  
}

 

and here the result JS/CSS Moon Phases