Enchainer plusieurs animations avec jQuery

Bonjour à tous!

Savez vous qu’avec jQuery il est possible d’enchainer plusieurs animations à la fois dans une seule instruction? alors la réponse est OUI, on peut même aller plus loin avec un peu d’imagination et c’est vraiment très facile à mettre en œuvre! En fait chaque méthode dans jQuery retourne l’objet lui-même, ainsi on peut enchaîner à une autre méthode :

Exemple :

<script type="text/javascript">// <![CDATA[
jQuery(window).ready(function(){
$('#testcode1').click(function(){
$('#mondiv').animate({width:'200px', fontSize: "18px", borderWidth:'3px', marginLeft:'100px', opacity:'0.8', padding:'10px'},2000)
.animate({width:'120px', marginLeft:'0', fontSize: "12px", borderWidth:0, opacity:'1', padding:'0'},2000);
return false;
});
});
// ]]></script>
<a id="testcode1">Tester le code</a>
<div id="mondiv" style="border: 1px solid #ffffff; background: #077f2e none repeat scroll 0% 0%; width: 120px; height: 120px;">Un div de test</div>


Resultat
Tester le code

Un div de test

La fonction animate() est une fonction native en jQuery, elle permet d’animer les propriétés CSS d’un objet jQuery dans une durée bien déterminée , la syntaxe comme dans l’exemple si-dessus est très simple!

On peut animer une seule, ou plusieurs propriétés CSS à la fois! Par exemple pour animer la largeur d’un div ayant l’id test et la mettre à 300px sur 2secondes le code sera :

$('#test').animate({width':'300px'},2000);

Ainsi on peut enchainer autant qu’on veux, le reste dépend de votre imagination ^^, à noter que la durée de l’animation (2000) est en millisecondes, d’où 1 seconde = 1000 ms

Un autre Exemple d’enchainement d’animation

Dans cette exemple, on va animer un div ayant un arrière plan rouge, et une image d’étoile pour construire le drapeau du maroc à la fin de l’animation

Voir le resultat

Code

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!-- 	www.mcherifi.org -->
	jQuery(window).ready(function(){
		$('#animationlink').click(function(){
			$('#mondiv').animate({left:'400px', opacity:'0.3', width:'40px', height:'70px', borderWidth:'20px'}, 1500)
				.animate({top:'300px', opacity:'0.8', left:'100px', width:'70px', height:'70px', borderWidth:'7px'}, 1500)
				.animate({top:'160px', opacity:'0.4', left:'500px', width:'170px', borderWidth:'3px'}, 1200)
				.animate({top:0,  opacity:'0.2',  left:0, width:'200px', height:'200px', borderWidth:'1px'}, 700)
				.animate({opacity:'1', borderWidth:'2px'}, 1000);
				
			$('#monetoile').css('opacity', 0).animate({left:'500px', top:'400px', opacity:'0.5', height:'80px', width:'100px'}, 1300)
				.animate({left:'260px', top:'250px', opacity:'0.8'}, 1000)
				.animate({left:'100px', width:'0', opacity:'0.2'}, 1200)
				.animate({width:'154px', top:'100px', left:'150px', opacity:'0.5'}, 1000)
				.animate({left:'30px', height:'135px', width:'154px', top:'30px', opacity:'1'}, 1200);
			
			return false;
		});
	});

</script>
<title>Mohammed CHERIFI - Enchainement d'une animation sous jQUery</title>
<style type="text/css">	
	
	#contenaire{
		position:relative;
		margin:10px;
	}
	
	#mondiv{
		background:#f00;
		width:150px;
		height:150px;
		border:1px solid #077F2E;
		position:absolute;
	}
	
	#monetoile{
		position:absolute;
		display:none;
	}
	
</style>
</head>
<body>

	<a href="#" id="animationlink">Animaer</a><br />

	<div id="contenaire">
		<div id="mondiv"></div>
		<img id="monetoile" src="star.gif" alt="I Love Morocco" width="154" height="135"/>
	</div>

</body>
</html>

Télécharger le code source de l’amination

Aid moubarak said à tous!

Bonjour à tous!

Il fait beau aujourd’hui, j’ai pas dormis pendant toute la nuit, une nuit blanche à attendre l’arrivé du jour pour sortir acheter un demi kilo de beignets marocains, voir le sourire sur les visages des petits enfants, s’échanger le salut avec mes voisins et savourer ces instants de félicité et de bonheur, enfin chez soit! toutes les familles se rassemblent, tous les êtres chers sont là: c’est aîd alfitr!

Et oui! un jour pas comme les autres, c’est la fin du RAMADAN, c’est le retour du rythme habituel! on voie clairement la joie sur tous les visages! certains attendais ce jour avec impatience.. pour enfin se permettre de faire la fête! Il est évident que c’est également le jour des meilleurs ventes d’alchool dans les supermarchés ^^ , d’autre part les gentils se sont réveillés tôt pour la prière de l’aîd!

Bref! Que vous soyez parmis les gentils ou les « zehwanis » , joyeuse fêtes à vous tous ! faut pas faire la fête tous les jours ^^

AID MOBARAK SAID!

La faille MySQL Column truncation

mysql column truncation

Hello les amis !

Aujourd’hui, je vous parlerai d’un nouveau type de faille, il s’agit de MySQL column truncation!

Pendant que les failles du types SQL Injections restent parmi les vecteurs d’attaque les plus discutés sur le Web, il existe un autre genre qui a été discuté pour la première fois par Stefan Esser, ce dernier a illustré son exploitation dans un bug reporté sur bugtraq affectant wordpress!

Comment ça marche ?

Par défaut, la comparaison de deux chaine de caractère dans MySQL ne se fait pas en mode binaire, ceci se fait en « relaxed mode », ce mode compare deux chaines on ignorant les espaces et les caractères nuls de la fin de la chaine, du coup, pour mysql, la chaine de caractères ‘admin’ est égale à ‘admin ‘! .

De ce fait mysql refusera d’enregistrer un nouvel utilisateur qui essaie de s’incrire avec ‘admin ‘ (admin+espace) ce qui est tout à fait logique!

Ou est le problème?

Pour illustrer le problème on immagine l’application suivante:

  • Un forum de discution ou un blog ou tous le monde peut s’enregistrer
  • Le champs username de la table utilisateurs est limité à 16 caractères
  • L’administrateur du forum est ‘admin’
  • MySQL est utilisé dans le mode par défaut
  • Pas de vérification sur la longueur du nom d’utilisateur

Qu’est ce qui se passe si on essaie de créer un compte avec comme nom d’utilisateur ‘admin xD’ (admin+11 espaces+xD) et un mot de passe ‘p455wd’:

MySQL va cherche si il existe un utilisateur avec comme username ‘admin xD’, et comme aucun utilisateur ne l’as pris l’application va l’accepter et continuera pour inserer le nouvel utilisateur dans la base.

La chaine du nom d’utilisateur fait 18 caractères (admin+11 espaces+xD), mySQL va automatiquement tronquer les deux dernier caractères (xD) car le champ username est limité à 16 caractères, ce qui donnera ‘admin ‘ (admin+11 espaces), ce dernier sera accepté par l’application et inséré dans la table d’utilisateurs, on aura donc deux utilisateur avec le même login ‘admin’ (rappellez vous que la comparaison en mysql dans le mode par défaut ne prends pas en compte les espaces!).

Dans ce cas, un problème de sécurité potentiel peut affecter l’application, en dépendance de la façon dont elle traite le champ username!

Exemple d’une application vulnérable:
Connexion :

if(!empty($_POST['username']) && !empty($_POST['password']){
$username = $_POST['username'];
$password= $_POST['password'];
if(login($username,$password)){
$userdata = getUserInfoByLogin($username);
}
}

la fonction getUserInfoByLogin()


function getUserInfoByLogin($username){

$query = mysql_query("SELECT * FROM utilisateurs WHERE username = '$username");

$userinfo= mysql_fetch_array($query);

return $userinfo ;

}

Espace membre


if($userdata['username'] == 'admin'){

//espace privé : console d'administration

}

else{

// espace membre!

}

Resultat:

Puisque l’attaquant a un compte avec le login ‘admin ‘, il pourra se connecter à ce dernier avec le passe ‘p455wd’ ! et puisque l’enregistrement du vrai administrateur est le premier en base, celuila sera retourné ! et l’attaquant aura accès à l’espace administrateur du forum!

Ceci est juste une illustration, la faille peut se présenter différemment sur une application web,je cite là wordpress qui était le premier victime de ce type de vulnérabilités!

Comment sécuriser mon application?

Toujours vérifier la longueur des champs sensibles (comme username dans notre exemple), et interrompre l’exécution de votre application si cella dépasse la longueur maximale configurée dans votre table mysql!

Le code source du trojan Skype Peskyspy publié sous liscence GPL

Ruben Unteregger

Ruben Unteregger

Ruben Unteregger vient de publier le code source de Peskyspy, un cheval de troie pour Skype, le trojan permet le monitoring de tout appel entrant ou sortant d’une machine infectée, d’enregistrer ces conversations et les convertir au format MP3, puis les crypter et les envoyer au serveur de le l’attaquant!

Pendant 7 ans, Ruben Unteregger travaillait en tant qu’ingénieur logiciel pour une société suisse (ERA IT Solutions) , son job était de programmer un malware pour pénétrer des ordinateurs privés et espionner les communications VOIP, étant couvert par le gouvernement suisse, Ruben Unteregger est légalement resté le propriétaire des droits du code source du trojan, et a décidé de le rendre publique.

Comment Peskyspy procède-t’il?

Une fois exécuté sur la machine, PeSkyspy injecte un composant (Skype-TAP) dans Skype, ce composant utilise les API Windows qui se chargent de la gestion des entrées/sorties audio, ainsi ce dernier peut capturer l’ensemble des données audio transitant entre le processus Skype.exe et les périphériques audio sous-jacents, ces données seront extraites au format PCM (Pulse Code Modulation) puis convertis au format MP3, et finalement transmises au serveur de l’attaquant, ce dernier se connectera à son serveur et récupèra les fichiers MP3 de toutes les conversations enregistrées!

En effectuant l’écoute directement sur les périphériques audio du système d’exploitation, la capture des données audio reste indépendante du protocole utilisé par Skype, même si ce dernier change de méthode de cryptage de conversation le trojan reste toujours fonctionnel ;)

Code Source :

Entièrement codé en C++, le code source de PeSkyspy a été publié sur le site megapanzer. Comme a précisé son auteur, le code est d’une extrême simplicité et reste une bonne référence pour les apprentis! cependant sa publication peut représenter un danger réel pour les entreprises utilisant Skype comme moyen de communication avec l’extérieur, notamment les société d’off-shoring!

Voilà! je vous laisse avec le code source de PeSkyspy, bonne lecture !

Télécharger ici le code source de PeSkyspy

Lien alternative