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

Today we try to analyze the error that appears on the browser inspector and that is a bit tricky to fix and we try to understand what is causing the error, the error is called “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT“. This error is always followed by an URL, this URL is the link that has […]

May 28, 2021
Read More...
how to freeze the first row and the first column of an HTML table

I was working on an HTML table that displays a list of users and user permission, the first row displays the permission names and the first column displays the name of the users involved. I have noticed that when I strolled toward the right I couldn’t see the user names and scrolling toward the bottom […]

May 28, 2021
Read More...

The Fullscreen Any Element Plugin uses the Javascript Fullscreen API in order to make any chosen HTML element on your website in fullscreen. The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed. This makes it possible to […]

May 24, 2021
Read More...

Click to Leave a Comment