Come evitare di visualizzare HTML tags in WordPress usando PHP e pulire l’output.

Questo articolo parla di come Securing output and Escaping output in Wordpress per pulire l'output ed evitare di visualizzare HTML tag a schermo.

Spesso visualizzare variabili in PHP puo’ portare essere un problema se non si sa come le variabili sono conservate nel database, spesso si visualizzano a schermo degli indesiderati caratteri che corrispondono a codici HTML o script. Altre volte i tag HTML si vogliono visualizzare, ma i browser normalmente processano i tag HTML e non li visualizzano. Escaping vuol dire spogliare l’output di non voluti caratteri, come tags HTML o script. Per saperne di piu’ date un occhiata a questo articolo di “Cross-site scripting” su wikipedia.

In questo articolo vediamo come evitare di visualizzare male l’output in WordPress e che funzioni Worpdress mette a disposizione per escape l’output. Dovremo tenere a mente che una buona visualizzazione di output e’ obbligatoria per pubblicare i nostri plugin di WordPress, altrimenti WordPress rigettera’ i nostri lavori.

Come detto WordPress mette a disposizione tante funzioni per visualizzare l’output, alcune spogliano le stringhe di tag HTML, altri evitano di visualizzare script e altre ancora visualizzano direttamente l’output evitando di usare funzioni PHP come ‘echo‘ o ‘print‘. In generale e’ buona pratica pulire l’output prima di visualizzarlo. Ricordatevi pero’ che questo non vuol dire che dobbiamo cambiare il contenuto delle variabili, il contenuto delle variabili non deve mai essere toccato quando si visualizzano, le funzioni di escaping puliscono il contenuto delle variabili prima di visualizzarle senza cambiarne il proprio valore.

Vediamone alcune, solo le piu’ importanti:

• esc_html ( string $text ), escaping per blocchi HTML, dove $text puo’ essere una variabile o una costante o un testo. Questa funzione visualizza i tag HTML cosi’ come sono, i tag non vengono processati dal browser, in questo caso echo e’ necessario.

  $html = esc_html( '<a href="http://www.example.com/">A link</a>' );
  // $html ora contiene:
  <a href=&quot;http://www.example.com/&quot;>A link</a>
  //per visualizzare $html
  echo $html;
  // il che' viene visualizzato come
  <a href="http://www.example.com/">A link</a>
  // invece di 
  A link
  // solitamente si usa per visualizzare titoli cosi':
  echo esc_html($title);
  

• esc_url ( string $url, string[] $protocols = null, string $_context = ‘display’ ), pulisce url, questa funzione si usa per visualizzare url in sicurezza, anche quelli all’interno di attributi come src o href all’interno di tag HTML, in questo caso echo e’ necessario.

  // visualizzare un link della homepage
  <a href="<?php echo esc_url( home_url( '/' ) ); ?>">Home</a>
  // o un link di un'immagine
  <img src="<?php echo esc_url( $great_user_picture_url ); ?>" />
  // o un hiperlink
  <a href="<?php echo esc_url( $url ); ?>">Link Text</a>
  // anche in questo caso echo e' necessario

• esc_attr ( string $text ), questa funzione dovrebbe essere usata in tutti gli attributi HTML che non visualizzano urls, anche in questo caso echo e’ necessario.

  // visualizzare dell'output da $_POST
  <?php $fname = ( isset( $_POST['fname'] ) ) ? $_POST['fname'] : ''; ?>
  <input type="text" name="fname" value="<?php echo esc_attr( $fname ); ?>">
  // altri attributi HTML all'interno di un etichetta
  echo '<label for="' . esc_attr( $name )  . '">' . esc_html( $label ) . '</label><input type="text" name="' . esc_attr( $name ) . '" value="'. esc_attr( $value ) .'" />';
  

• esc_html_e ( string $text, string $domain = ‘default’ ), questa funzione lavora come la precedente esc_html ma evita di usare echo, pulisce e visualizza il contenuto della variabile.

  // visualizza il titolo dell'articolo
  <h1><?php esc_html_e( 'Title', 'text-domain' )?></h1>

• esc_attr_e( string $text, string $domain = ‘default’ ), come sopra, questa funzione lavora come esc_attr ma evita di usare echo, pulisce e visualizza il contenuto della variabile.

  <input title="<?php esc_attr_e( 'Read More', 'your_text_domain' ) ?>" type="submit" value="submit" />
  // visualizza <input title="Read More" type="submit" value="submit" />

Per avere piu’ informazioni date un occhiata a questo articolo nella documentazione sul sito ufficiale di WordPress, o a questo articolo sul sito css-tricks.

In sostanza non date per scontato che WordPress sa cosa volete visualizzare, pulite sempre il vostro output.