Archivi categoria: Web Editing

cURL: interagire con l’interfaccia Web dei dispositivi di rete mediante linea di comando

Networking, SO: Linux, Web Editing, , , , , , ,

Spesso e volentieri abbiamo a che fare con delle macchine *nix sprovviste di Desktop Enviroment (altrimenti conosciuto come server X), attraverso le quali è necessario accedere all’interfaccia Web di alcuni dispositivi di rete SOHO, in modo da effettuare le classiche operazioni di management (cambio di configurazione, riavvio, ecc.).

A tal proposito, esiste un tool molto potente da utilizzare mediante CLI, che prende il nome di cURL.

curlAdesso vedremo quali sono le analisi preliminari che ci permetteranno di capire se l’interfaccia Web con cui vogliamo interagire potrà essere manipolata tramite cURL o meno.

Analisi del codice sorgente

Il primo step consiste nello scaricare il codice sorgente dalla pagina, utilizzando le giuste credenziali di accesso (se previste). Ad esempio:

[root@linuxbox ~]# curl -u username:password http://192.168.1.1

A questo punto possiamo distinguere due macro casi:

1) la pagina Web contiene prevalentemente del codice HTML ed i cambi di configurazione possono essere effettuati mediante dei semplici form e l’invio dei dati attraverso HTTP POST o GET. In tal caso siamo stati fortunati e potremo procedere;

2) la pagina Web contiene soprattutto del codice javascrip e tutte le operazioni di management si avvalgono del suddetto codice. In questo caso siamo stati sfortunati e dovremo demordere, in quanto cURL non supporta javascrip.

Poniamoci quindi nel caso 1 e procediamo.

Per prima cosa occorre analizzare il codice sorgente della pagina di interesse andando alla ricerca dei tag:

<form></form>

all’interno dei quali è presente l’attributo action che punta alla pagina Web che si occuperà di processare i dati del form. Ad esempio:

 
<form action="apply.cgi" method="post">
<input type="hidden" name="page" value="device.asp">

    <input type="submit" name="action" value="Reboot">
</form>

Inoltre, bisogna capire quali e quanti campi di input (con relativo valore), identificati mediante gli attributi id o name, è necessario sottoporre alla suddetta pagina Web. Infatti, molto spesso, come misura molto blanda per contrastare alcuni attacchi Web quali il CSRF (vedi qui per ulteriori dettagli), vengono utilizzati dei campi di input di tipo hidden da inviare insieme al contenuto degli altri campi del form.

Una volta capito quali sono i campi da inoltrare alla pagina specificata dall’attributo action del form HTML (magari utilizzando il classico metodo trial-and-error), possiamo procedere con il loro inoltro vero e proprio, avvalendoci, ad esempio, del seguente comando:

curl -u username:password -s -d "action=Reboot&page=device.asp" http://192.168.1.1/apply.cgi

Nella fattispecie, la pagina che si occuperà di processare i dati è apply.cgi, mentre i campi di input inviati sono action, il cui valore è Reboot, e page, il cui valore è device.asp. Da notare che le suddette informazioni sono state inviate in formato querystring (ovvero utilizzando il carattere & di concatenazione).

Infine, occorre precisare che la flag -s evita di inviare allo standard output le statistiche relative al processamento della pagina richiesta, mentre la flag -d (data) è quella che ci permette di inviare i dati attraverso un semplice HTTP POST.

Per ora è tutto. Alla prossima.

Paginazione PHP con HTTP POST

Web Editing, , , ,

La paginazione è uno dei metodi più gettonati per ripartire i contenuti dinamici di un sito Web su più pagine. Spesso, però, per ragioni di sicurezza (e non solo) risulta più conveniente sostituire il GET con il POST, avvalendosi di un pò di codice Javascrip da utilizzare lato client.

 

web.jpg

Ecco un il codice (testato e funzionante):

$query = "SELECT * FROM Utenti";

$risultato = $mysqli->query($query);

$count = mysqli_num_rows($risultato);
$per_pagina = 30; //secondo parametro di LIMIT
$tot_pagine = ceil($count / $per_pagina); //approssima la divisione all'intero
$pagina_corrente = 1;

 if(isset($_POST['pagina']) && is_numeric($_POST['pagina']))
 {
            $pagina_corrente = $_POST['pagina'];
 }
$primo = ($pagina_corrente - 1) * $per_pagina; //primo parametro di LIMIT
$query = $query."ORDER BY C.Cognome ASC LIMIT $primo, $per_pagina";

$risultato = $mysqli->query($query1);

lato server, mentre lato client il codice Javascrip è così definito:

<scrip type="text/javascrip">
 function invia()
 {
     document.loginform4.method="post";
     document.loginform4.action="visualizzacontatti.php";
     document.loginform4.submit();
 }
 </scrip>

Inoltre, il numero di pagina calcolato nell’ambito del codice PHP verrà salvato in un campo di input hidden:

<input type="hidden" name="pagina" id="pagina" value="<?php echo $pagina_corrente?>"/>

I numeri di pagina cliccabili saranno così definiti:

<div id="paginazione">
<p align ="center">
<?php
if($pagina_corrente == 1 || $count == 0) //se siamo nella prima pagina oppure non vi sono record
{

echo "&lt;&lt; Precedente";
}
else
{
$pagina_precedente = ($pagina_corrente - 1);
?>
<a href ="javascrip:invia()" onclick="document.loginform4.pagina.value=<?php echo $pagina_precedente?>"><?php echo "<< Precedente"?></a>
<?php
}

echo ' Pagine: ';

for($i = 1; $i <= $tot_pagine; $i++)
{
if($i == $pagina_corrente)
{
echo "[$i]";
}
else
{
?>
<a href ="javascrip:invia()" onclick="document.loginform4.pagina.value=<?php echo $i?>"><?php echo $i ?></a>
<?php
}
}
if($pagina_corrente == $tot_pagine) // se siamo nell'ultima pagina
{
echo "Successiva >>";
}
else
{
$prossima_pagina = ($pagina_corrente + 1);
?>
<a href ="javascrip:invia()" onclick="document.loginform4.pagina.value=<?php echo $prossima_pagina?>"><?php echo "Successiva >>"?></a>
<?php
}
?>
</p>
</div>

Enjoy!

Securimage: captcha PHP semplice ed efficace

Web Editing, , , , , ,

Qualunque form HTML che si rispetti, deve garantire delle contromisure valide contro gli spammer bot, avvelendosi di un sistema captcha.

Dopo aver fatto un breve “giro in rete” mi sono imbattuto in questo prodotto (open source).

securimage.jpg

Diciamo che le operazioni di implementazione e quelle di personalizzazione sono estremamente semplici ed intuitive, basta leggere questa Quickstart Guide per comprendere appieno il funzionamento del tool in questione.

Non vi resta che includere i file PHP richesti, inserire l’apposito campo di input nel vostro form ed il gioco è fatto.

Alla prossima.

Pulsante “like” di Facebook: alcuni trucchetti utili

Web Editing, , , , , ,

Ormai il pulsante “like” di Facebook è diventato una moda ed in quanto tale sono sempre di più i siti che usufruiscono di questo gadget. L’inserimento del suddetto pulsante all’interno del codice HTML del proprio sito è praticamente un gioco da ragazzi (basta copiare ed incollare il sorgente autogenerato mediante questa interfaccia user-friendly). I problemi, però, iniziano quando si vuole customizzare pesantemente il “like” di Facebook, ad esempio implementando un evento on click oppure “nascondendo” la barra dei commenti.

fb-like.jpg

Nel primo caso è sufficiente utilizzare un codice javascrip simile al seguente:

<!--
fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
//action
});
 };
//-->

Se ad esempio si volesse implementare l’apertura di una finestra pop-up immediatamente dopo il click sul “like”, il codice diventerebbe:

<!--
fbAsyncInit = function() {
FB.Event.subscribe('edge.create', function(href, widget) {
('vostraurl', '_blank');
});
 };
//-->

Nel caso in cui, invece, si volesse nascondere la barra dei commenti, è necessario lavorare di CSS. Nella fattispecie, occorre attribuire un display:none alla classe .fb_edge_widget_with_comment, utilizzando la keyword !important per evitare possibili sovrascritture di tali impostazioni all’interno della pagina HTML (attraverso il tag style):

.fb_edge_widget_with_comment span.fb_edge_comment_widget iframe.fb_ltr {
display: none !important;}

Ed il gioco è fatto.

A presto.

Javascript e catch del tasto “enter”

Web Editing, , , ,

Ecco una semplice funzione Javascrip che consente di ottenere l’invio del contenuto di un campo di input semplicemente pigiando il tasto enter:

<scrip type="text/javascrip">
  function onEnter(evt, frm)
  {
      var keyCode = null;
   
    if( evt.which )
    {
         keyCode = evt.which;
     }
    else if( evt.keyCode )
    {
         keyCode = evt.keyCode;
     }
    
    if( 13 == keyCode )
    {
         document.searchForm.searchbutton.click();
         return false;
     }
   
     return true;
  }
  </scrip>

javascript11.jpg

Il codice HTML ad essa associato è il seguente:

<form id="searchForm" name="searchForm">
                <input id="input" name="input" type="text" value="Search..." onFocus="if (this.value == 'Search...') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Search...';}" onKeyPress="return onEnter(event,this.form)"/>
                <input id="searchbutton" name="searchbutton" type="button" value="a" onClick="document.forms['searchForm'].submit()"/>
</form>

Alla prossima.

Google Chrome: attributo z-index ignorato per gli *.swf

Web Editing, , , , , , ,

L’attributo z-index, utilizzato nell’ambito dei fogli di stile (CSS), consente di ordinare gli elementi grafici di una pagina Web secondo la coordinata spaziale z. Purtroppo però, quando si ha a che fare con degli *.swf e si utilizza Google Crome come browser, l’attributo z-index viene totalmente ignorato, ragion per cui il filmato sarà sempre posizionato “più in superficie” rispetto agli altri elementi.

 

google_chrome_logo.jpg

Inutile dire che tale comportamento “anomalo” non si verifica nè con Mozilla Firefox nè con IE8 ed IE9.

Esiste tuttavia un workaround. Esso consiste, sostanzialmente, nell’uso dell’attributo wmod relativo al tag embed. Il valore associato all’attributo in questione dovrà essere transparent.

Ad esempio:

<embed wmode="transparent">

Inoltre, occorre inserire il seguente codice HTML tra i tag <object></object>:

<param name="wmode" value="transparent" />

Adesso anche Google Chrome sarà in grado di visualizzare gli elementi grafici della pagina nel giusto ordine di profondità.

A presto.

Creare due action diverse per un form

Web Editing, , , , ,

Recentemente ho avuto la necessità di creare due action diverse per un unico form, le quali puntano rispettivamente a 2 iframe separati (in cui visualizzare i risultati di una query eseguita mediante PHP/SQL).

Per fare una cosa di questo tipo è stato necessario utilizzare due pulsanti di submit, ad ognuno dei quali, mediante javascrip, è stata assegnata una action ed un target specifico.

XHTML

Ma bando alle ciance ed ecco il codice:

<form name="filtro" id="filtro" method="post">

<strong>da:</strong><input type="text" name="datain" tabindex="1" id="datain"/>

<strong>a:</strong> <input type="text" name="datafin" tabindex="2" id="datafin"/>

<p align="center"><input type="submit" name="filtra" id="filtra" value="Filtra i ricavi" onclick="javascrip:filtro.action='ris_ricavi.php'; filtro.target='frame1'" tabindex="3" /></p>

<p align="center"><input type="submit" name="filtra" id="filtra" value="Filtra i costi" onclick="javascrip:filtro.action='ris_costi.php'; filtro.target='frame2'" tabindex="4" /></p>

<iframe name="frame1" id="frame1" src ="ris_ricavi.php" align="middle" width="750" height="300">

<iframe name="frame2" id="frame2" src ="ris_costi.php" align="middle" width="750" height="300">

</form>

Per qualunque chiarimento contattatemi.

A presto.

Visualizzare mediante PHP il nome del database utilizzato

Web Editing, , ,

Recentemente ho dovuto modificare parzialmente uno dei CRM che ho sviluppato. Non volendo inficiare il DB in produzione ho dovuto “clonarlo”, in modo da poter fare i miei esperimenti in assoluta libertà.

Poichè volevo essere sicuro che ciascuna pagina utilizzasse effettivamente il database “clone” (avendo a disposizione un solo server), ho implementato un controllo in PHP che mi restituisse il nome del DB in uso all’apertura della pagina.

Ecco lo scrip:

$db = $mysqli -> query("SELECT DATABASE()");

while($riga1 = $db -> fetch_assoc())
{
    echo $riga1["DATABASE()"];
}

La chiave di lettura delle righe di codice sopra riportate sta proprio nella funzione DATABASE() di MySQL, la quale consente di individuare il nome del DB in uso.

Da riga di comando avremo una situazione simile alla seguente:

mysql> SELECT DATABASE();
+------------+
| DATABASE() |
+------------+
| prova        |
+------------+
1 row in set (0.00 sec)

mysql>

Il post termina qui, a presto.

Validazione W3C per l’addon like-box di facebook

Web Editing, , , , , ,

Poco tempo fa un cliente mi ha chiesto di aggiungere all’interno della sua homepage l’addon like-box di Facebook. Purtroppo però, tale addon non è validato W3C per XHTML 1.0 (sia Strict che Transational), quindi ho dovuto fare un giro sul Web per cercare qualche soluzione alternativa.

Ed ecco il risultato della mia ricerca:

<scrip type="text/javascrip">
//<![C_DATA[
(function() {
    document.write('<fb:like-box href="http://www.facebook.com/pages/Rooms-2-Rent-Bed-Breakfast-Relax/183795715015987" width="200" height="100" show_faces="false" border_color="" stream="false" header="true"></fb:like-box>');
    var s = document.createElement('SCRIP'), s1 = document.getElementsByTagName('SCRIP')[0];
    s.type = 'text/javascrip';
    s.async = true;
    s.src = 'http://connect.facebook.net/en_US/all.js#xfbml=1';
    s1.parentNode.insertBefore(s, s1);
})();
//-->
</scrip>

Grazie a questo scrip è possibile aggirare la validazione W3C poichè non si tratta di codice XHTML. Il suo funzionamento è abbastanza semplice: viene creato un elemento, il cui nome è SCRIP, nel quale viene inserito il tag <fb:like-box> con i relativi attributi.

Spero di esservi stato utile.

A presto.