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

Blog Tutorial

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.

You May Like

I built a WordPress plugin that gives the possibility to make the background image clickable, I have worked on this plugin with the idea in mind that a plugin has to be the more possible standard in order to work with any existing WordPress theme, but I realized that making such plugin is virtually impossible as long as any […]

November 12, 2020
Read More...

Siccome ho notato che c’e’ molta confusione sulla gestione e la creazione di Shortcode in Stackoverflow e in generale su internet ho deciso di fare questa guida per spiegare in modo semplice come creare e gestiore un Shortcode in Wordpree e a che cosa serve. Prima di tutto … Cos’e’ uno Shortcode in WordPress e a […]

October 10, 2020
Read More...

Oggi vediamo di analizzare un errore che appare ultimamente spesso nell’ispector e che e’ molto difficile da individuare e risolvere. L’errore appare come “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” o anche come “Impossibile caricare la rete: net :: ERR_BLOCKED_BY_CLIENT” se il vostro browser e’ in italiano. Questo errore e’ sempre seguito da un url, l’url in […]

May 23, 2020
Read More...

Click to Leave a Comment