Configurer shorewall sous debian

Le tuto fonctionne aussi sous Ubuntu 12.04 (oui c’est article qui date)

Le pare-feu « Shoreline Firewall », plus communément appelé « Shorewall« , est un outil qui permet de configurer plus facilement Netfilter (IpTable).

Shorewall est un outil qui permet de configurer Netfilter, son travail est fini.

L’avantage de Shorewall est qu’il est très flexible, une fois que l’on a compris la syntaxe.

Si vous avez d’autres firewalls il faut les désinstaller avant de commencer (ex: firestarter)

Installation de shorewall
apt-get install shorewall shorewall-doc
# on va dans le HOME
cd ~
# Copie de la doc one-interface
cp -r /usr/share/doc/shorewall/examples/one-interface ~
#on va dans la doc one-interface
cd one-interface/
# on met en place les configs de base
cp interfaces policy zones rules /etc/shorewall/
# retour au home
cd ~
# suppression de la doc du home
rm -r one-interface/
view raw shorewall apt hosted with ❤ by GitHub

Maintenant que les fichiers de configuration de base sont placés aux bons endroits nous allons pouvoir commencer à configurer Shorewall selon nos besoins.Par défaut les connexions entrantes sont refusées mais les connexions sortantes sont autorisées. Selon vos besoins vous pouvez changer la politique en éditant le fichier `/etc/shorewall/policy`. Dans la suite de l’article on partira du principe que la politique utilisée est la politique par défaut.

Mise en place des règles du firewall

Ouvrir le fichier qui contient les règles:

nano /etc/shorewall/rules
view raw edit shorewall rules hosted with ❤ by GitHub

On a deux zones le « net » et le « $FW » (firewall).

Trois actions:

  • ACCEPT = accepter
  • REJECT = refuser
  • DROP = ignorer (préferez-le à reject)

Voici un exemple de fichier de configuration:

#ACTION SOURCE DEST PROTO DEST SOURCE ORIGINAL RATE USER/ $
# PORT PORT(S) DEST LIMIT GROUP
#SECTION ALL
#SECTION ESTABLISHED
#SECTION RELATED
SECTION NEW
# Drop Ping from the "bad" net zone.. and prevent your log from being flooded..
Ping(DROP) net $FW
# Open 123 for ntpd service on startup
ACCEPT fw net udp 123
# Allow standard services in and out of the box
ACCEPT fw net udp 53 # DNS
ACCEPT fw net tcp 53 # DNS
ACCEPT net fw tcp 22 # SSH
ACCEPT net fw tcp 80 # HTTP
ACCEPT net fw tcp 443 # HTTPS
ACCEPT net fw tcp 21 # FTP
view raw shorewall config hosted with ❤ by GitHub

Avant de continuer pensez à vérifier que vous avez bien ajouté une règle pour autoriser votre connexion SSH. Par défaut c’est le port 22 mais il a pu être changé. Vérifiez que Port est bien à 22 dans : `etc/ssh/sshd_config`. Si ce n’est pas le cas il faudra modifier la règle correspondant au SSH

Maintenant que nous avons correctement configuré la bête reste à lui dire qu’elle peut être lancée.

nano /etc/shorewall/rules
view raw edit shorewall rules hosted with ❤ by GitHub

Mettre la variable startup à 1 au lieu de 0.

Lancement de Shorewall

Allez il est temps de le lancer:

shorewall start
view raw shorewall start hosted with ❤ by GitHub

La sortie devrait plus ou moins ressembler à ça :

Compiling…
Processing /etc/shorewall/params …
Processing /etc/shorewall/shorewall.conf…
Compiling /etc/shorewall/zones…
Compiling /etc/shorewall/interfaces…
Determining Hosts in Zones…
Locating Action Files…
Compiling /usr/share/shorewall/action.Drop for chain Drop…
Compiling /usr/share/shorewall/action.Broadcast for chain Broadcast…
Compiling /usr/share/shorewall/action.Invalid for chain Invalid…
Compiling /usr/share/shorewall/action.NotSyn for chain NotSyn…
Compiling /usr/share/shorewall/action.Reject for chain Reject…
Compiling /etc/shorewall/policy…
Adding Anti-smurf Rules
Adding rules for DHCP
Compiling TCP Flags filtering…
Compiling Kernel Route Filtering…
Compiling Martian Logging…
Compiling Accept Source Routing…
Compiling MAC Filtration — Phase 1…
Compiling /etc/shorewall/rules…
Compiling MAC Filtration — Phase 2…
Applying Policies…
Generating Rule Matrix…
Creating iptables-restore input…
Shorewall configuration compiled to /var/lib/shorewall/.start
Starting Shorewall….
Initializing…
Setting up Route Filtering…
Setting up Martian Logging…
Setting up Accept Source Routing…
Setting up Traffic Control…
Preparing iptables-restore input…
Running /sbin/iptables-restore…
done.
view raw shorewall logs hosted with ❤ by GitHub

Si ce n’est pas le cas et qu’une erreur apparait c’est que vous avez un problème de configuration.

Afficher des graphiques avec JQPlot

JQPlot est un plugin JQuery qui permet de dessiner des graphiques dans vos pages HTML. Si vous faites des pages de statistiques sur vos pages Internet vous comprendrez rapidement quelles sont les applications et surtout en quoi il vous simplifie les choses. En effet, il vous suffit de lui donner les données et de décider quel type de graphique vous voulez obtenir en sortie et le tour est joué ! On peut facilement imager une fonction PHP (ou autre) qui va générer les données qu’il faut mettre en entrée de JQPlot à partir de votre base de données.

Voici quelques exemples de graphiques que l’on peut obtenir grâce à ce plugin:

Framework JQuery mobile

Tous ceux qui ont déjà utilisé le dernier né de JQuery, à savoir JQuery mobile vont vraiment apprécier JqmPhp. En effet JqmPhp permet de simplifier une syntaxe assez lourde et surtout de fournir un code optimisé.

Travaillant actuellement sur une application web pour smartphone, je me suis fortement intéressé à ce framework pour rendre mon code plus clair.

Une fois que vous avez téléchargé le framework vous devez le configurer. A savoir que la version actuelle de JQuery mobile est la Alpha 4 mais que Jqmphpest conçu pour la Alpha 3. C’est pourquoi il est possible que certaines des nouvelles fonctionnalités de JQuery Mobile ne soient pas encore prises en charge.

Pour la configuration rendez-vous dans le fichier /lib/jqmphp.php

Les valeurs suivantes sont à changer par les liens vers les nouvelles versions de JQuery Mobile (en local ou sur un serveur distant).

/**
 * Sets the jQuery path.
 * @var JQMPHP_JQ
 */
define('JQMPHP_JQ', 'http://code.jquery.com/jquery-1.5.min.js', true);

/**
 * Sets the jQuery Mobile path.
 * @var JQMPHP_JQM
 */
define('JQMPHP_JQM', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js', true);

/**
 * Sets the jQuery Mobile CSS path.
 * @var JQMPHP_CSS
 */
define('JQMPHP_CSS', 'http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css', true);

Maintenant que le framework est configuré on va pouvoir créer notre première page.

<?php   
//  Creation de l'objet jqmphp
$j = new jqmPhp();  

// ajout du titre au header
$j->head()->title('Menu principal');

// Création d'une page ( il peu en avoir plusieurs par jqmphp )
$p = new jqmPage('Menu Principal');

// choix du theme et ajout du titre à la page
$p->theme('c')->title('Menu Principal');

// choix du theme pour le header de la page
$p->header()->theme('c');

// ajout de text HTML dans la page
$p->addContent('Bienvenue sur ma belle page');

// Exemple de création de liste ( courant dans JQuery mobile)
$gm = new jqmListviem();

// création et ajout d'un item à la liste
$ann = $gm->addBasic('Lien 1', 'page1.php','',true);

$cal = $gm->addBasic('Lien 2', 'index.php?action=3');

// ajout de la liste à la page
$p->addContent($gm);

// ajout de la page à l'objet
$j->addPage($p);

// affichage de la page
echo $j;

?>

Comme on peut le remarquer le code est assez simple, mais qu’en est-il du résultat ?

Ceci est un exemple très simple mais vous trouverez sur le site du projet des exemples complexes avec des formulaires, des listes à icônes…

En conclusion : Bien que le framework soit très récent il promet d’être très utile aux développeurs web soucieux des utilisateurs de smartphone.

Nous sommes dans l’attente d’une version qui sera sûrement adaptée à la version beta de JQuery mobile qui sortira prochainement.

Faire un audit de sécurité

Hacker Target est un site Internet qui vous propose de tester les vulnérabilités de votre application web.
Le site vous propose plusieurs types de tests selon votre site Internet.

Voici la liste complète des tests proposés gratuitement par le site (limité à 4/jours) :

  • les injections SQL
  • les CMS Drupal, Joomla et WordPress
  • les ports de votre serveur
  • les vulnérabilités de vos services
  • les problèmes de configuration ou de scripts
  • faire du fingerprint (déterminer les versions de vos librairies et logiciels)
  • en savoir plus sur votre domaine par le biais de whois par exemples
  • obtenir des infos sur vos CMS, fameworks, serveur, emplacement géographique…Etc

Nous allons ici détailler le test concernant WordPress car c’est celui que je viens de réaliser sur localhost:8080.

Voici la liste des tests :

  • WordPress Version Check
  • Site Reputation from Google, Norton and MyWot
  • Default admin account enabled
  • Directory Indexing on plugins
  • htaccess readable
  • robots.txt present
  • Sites Externally linked from main page (reputation checks)
  • WordPress Plugins that are detected passively and versions against latest versions.
  • Javascript linked
  • iframes present
  • internal site links
  • Hosting Reputation and Geolocation information
  • IP address sharing and reputation of sites sharing the IP address

Voici par exemple le type de conseils que l’on peut recevoir :

The WordPress administration login page is at the default location http://YOUR-WEBSITE/wp-admin/

This is not a critical risk however it should be understood that brute force attacks against WordPress login accounts
including the admin account are not difficult. A strong password on the admin accounts is vital. It is recommended to
rename the default admin account to a non-generic name.

Sinon, le rapport contient aussi la liste des liens externes de votre site afin de vérifier que personne n’a réussi à insérer des URLs vers des sites sans rapport.
Vous aurez aussi en fin de rapport la liste des sites Internet qui sont hébergés sous la même IP, ainsi que leurs MyWOT Reputation et leur résultat au Google Safe Browse.

Vous l’aurez compris, cet outil peut vous donner de mauvaises surprises s’il tombe entre de mauvaises mains.

Site Internet : Hacker Target

Charger vos scripts en asynchrone

Le chargement de vos fichiers Javascript ralentit le chargement de page. Ceci est logique car le navigateur doit télécharger les fichiers avant de faire l’affichage. Grâce à Require.js vous allez pouvoir charger vos JavaScript en asynchrone. C’est-à-dire charger le texte, les images, les styles puis seulement une fois que la page est affichée correctement, et que le lecteur peut commencer à lire le contenu, le JavaScript. Require.js permet aussi de détecter les fichiers qui ont déjà été chargés afin de ne pas les recharger.

L’utilisation du script est très simple, dans un premier temps, il faut inclure le fichier contenant require.js :

Puis à la fin du body il faut dire à require.js de charger les autres scripts :

require([
            "scripts/underscore.js",
            "scripts/jquery.js",
            "scripts/backbone.js"
        ], function(){
            $('#exemple').html('Jquery loaded!')
        })

Le gain au chargement de la page est assez intéressant, surtout depuis la refonte complète de la librairie.

Menu contextuel en JavaScript

Le plugin JQuery contextMenu vous permet de faire des menus contextuels sur des images, du texte ou tout autre contenu. L’utilisation de contextMenu peut être utile pour permettre de partager un contenu sur les réseaux sociaux, pour gérer du contenu dynamique ou simplement pour afficher des informations à l’utilisateur.

Voici un exemple de menu contextuel généré par le plugin :

Pour obtenir ce genre de résultat voici comment appeler le plugin :

$.contextMenu({selector: '#id_de_votre_objet_html', items: {
	edit: {name: "Edit", icon: "edit", callback: $.noop},
	cut: {name: "Cut", icon: "cut", callback: $.noop},
	copy: {name: "Copy", icon: "copy", callback: $.noop},
	paste: {name: "Paste", icon: "paste", callback: $.noop},
	"delete": {name: "Delete", icon: "delete", callback: $.noop},
	sep1: "---------",
	quit: {name: "Quit", icon: "quit", callback: $.noop}
}});

Comme vous pouvez le voir son utilisation est très simple.

Rendre votre CSS compatible sur tous les navigateurs

Prefixr est un outil, en version alpha, qui vas vous aider dans le développement de vos designs. En effet, le site vous propose de prendre n’importe quel code CSS et de vous en ressortir un code CSS compatible sur tous les navigateurs.

Voici un exemple d’utilisation :

Vous avez écrit :

.example {
  border: 10px solid #000000;
  width: 500px;
  height: 500px;
  -moz-border-radius: 10px 200px 200px 10px;
}

Malheureusement -moz-border-radius ne fonctionne pas sur tous les navigateurs… On vas donc passer le code dans Prefixr pour le rendre compatible.

Et on vas obtenir le code suivant :

.example {
	border: 10px solid #000000;
	width: 500px;
	height: 500px;
	-webkit-border-radius: 10px 200px 200px 10px;
	-moz-border-radius: 10px 200px 200px 10px;
	-o-border-radius: 10px 200px 200px 10px;
	-ms-border-radius: 10px 200px 200px 10px;
	-khtml-border-radius: 10px 200px 200px 10px;
	border-radius: 10px 200px 200px 10px;
}

Bien que ceci soit déjà pas mal, cela implique de faire des aller retours entre votre éditeur et votre navigateur pour tester et modifier votre CSS. C’est pourquoi les développeur ont mis en place une api accessible depuis les éditeurs de texte évolués afin d’utiliser le service sans aller sur le site.

Pour cela il faudra créer une nouvelle commande dans votre éditeur qui exécutera :

curl -sSd "css=$TM_SELECTED_TEXT" "http://prefixr.com/api/index.php" 

Il faudra installer curl si vous ne l’avez pas.

En conclusion Prefixr est un outil très intéressant et offrant un gain de temps considérable. Cependant il vas nécessiter des mise à jours régulières pour s’adapter au mieux à toutes les règles du CSS3.

Les extensions WordPress

WordPress est un des CMS les plus utilisés dans le monde. Il permet de créer rapidement et très simplement un blog, mais aussi des sites Internet en tous genres. Avec les bonnes extensions, vous pouvez même en faire un site de e-commerce. Son avantage est principalement son optimisation pour le référencement. En effet, si vous avez du contenu intéressant, il sera facilement et rapidement indexé sur les moteurs de recherche. Un des autres avantages de WordPress est sa grande flexibilité. Vous pouvez réussir à faire énormément de choses juste en ajoutant des extensions. Voici donc une liste des extensions que vous pourrez directement installer depuis votre interface administrateur. Pour installer une extension, rendez-vous dans Extensions>Ajouter.

Extensions orintées référencement

Beaucoup d’extensions existent pour optimiser votre référencement, mais il faut faire un choix et éviter de trop alourdir votre WordPress.

  • SEO ALRP : permet de rajouter automatiquement à la fin de vos articles des liens vers d’autres articles de la même thématique
  • Simple Tags : permet de trouver simplement les mots clés pour vos articles
  • Tweet, Like, Google +1 and Share : permet l’ajout de liens de partages sur les réseaux sociaux
  • SEO Ultimate : pour mettre en place des balises meta différentes pour chaque page

Utilitaire

  • WordPress Backup : permet de faire une sauvegarde de vos images, plugins et thèmes WordPress
  • Broken Links Remover vérifie tous les intervalles de temps défini, les liens du site afin de trouver des liens ou des images morts.
  • Mobile Smart : permet la détection des appareils mobiles et la sélection d’un thème WordPress adapté.
  • Exploit Scanner teste le code de votre WordPress afin de tenter d’y trouver des failles de sécurité
  • Post View permet de suivre le nombre de visites de vos articles, de les classer par fréquentation, de faire des graphiques avec les données…

Optimisation

  • DB Cache Reloaded : Mise en cache des résultats des requêtes SQL
  • WP Widget Cache permet une gestion pointue du cache de vos widgets

Système de tag d’images avec JQuery image annotate

Vous souhaitez mettre en place un système de tag d’image comme sur Flickr ou Facebook, mais vous ne savez même pas par où commencer. jQuery Image Annotation Plugin, couplé à Jquery et JQuery UI, vous permet de faire ceci sans aucune difficulté.

Le plugin permet d’ajouter, de modifier, et de supprimer des annotations sur l’image. J’ai fait le test avec la dernière version 3.2 et le résultat obtenu est plutôt soigné. Voici le code HTML / JavaScript nécessaire pour utiliser cette librairie.

 <html>       <head>           <style type="text/css" media="all">@import "./css/annotation.css";</style>           <script type="text/javascript" src="./js/jquery-1.3.2.js"></script>           <script type="text/javascript" src="./js/jquery-ui-1.7.1.js"></script>           <script type="text/javascript" src="./js/jquery.annotate.js"></script>             <script language="javascript">                  $(window).load(function() {                     $("#toAnnotate").annotateImage({                       editable: true,                       useAjax: false,                       notes: [ { "top": 286,                                   "left": 161,                                   "width": 70,                                   "height": 70,                                   "text": "Edites moi !",                                   "editable": false },                                { "top": 134,                                   "left": 179,                                   "width": 100,                                  "height": 80,                                   "text": "Ne m'édites pas !",                                   "editable": true } ]                                       });                  });              </script>          </head>       <body>              <div class="main-content">               <img src="./monImage.png" id="toAnnotate" />           </div>          </body>   </html>  

En conclusion il s’agit d’un plugin très intéressant, mais il est destiné à un nombre très restreint de projets, du fait de sa spécificité.

Faire un indexof travaillé avec H5AI

H5AI est un projet développé avec HTML5 qui a pour but de remplacer la page indexof par défaut de apache. C’est dans cette optique que H5AI propose plusieurs types de vue, un moteur de recherche interne ou encore un bandeau cliquable nous indiquant notre position dans l’arborescence de fichiers, depuis le root du dossier où H5AI est mis en place.

Voici un exemple en images du type de rendu que vous pouvez avoir sur un dossier contenant plusieurs types de fichiers différents. Vous pouvez remarquer que le projet détecte le type de chacun des fichiers afin d’afficher la bonne icône.