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.

Click to Leave a Comment

You May Like

Why make shoppers wait?Ever waited for a page to reload after clicking “Add to Cart”? Annoying, right? The screen freezes. The spinning wheel mocks you. And for a second, you think, maybe I don’t even need this thing. That’s how your customers feel, too. Shopping online is supposed to be fast. Smooth. Effortless. But clunky […]

October 1, 2025
Read More...

Do you remember the last time visiting a website felt like increasing your blood pressure? Websites are expected to load fast, be responsive, and be good-looking. Not only does a sluggish webpage drive away traffic, but it also impacts conversion rates, business growth, search engine ranking, and overall site health. Robust solutions often stem from […]

February 22, 2025
Read More...

How to animate HTML elements and slide them in on mouse scroll using CSS and Javascript Today I want to animate a bunch of HTML elements and create an animation that moves them inside the same parent DIV once the elements are in the viewport, so only when the elements are visible to the users. […]

August 29, 2023
Read More...