TV-customization (Part 3): Add CSS style

AppGini

In Part 1 and Part 2 of our tutorial series we have learned how to replace values of TV cells. Now I am going to add some HTML and CSS but see the security related issues.

Current Code

Let's start with code from Tutorial Part 2:

// file: hooks/machines.php
function machines_init(&$options, $memberInfo, &$args)
{
    $options_old = $options->QueryFieldsTV;
    $options_new = [];

    foreach ($options_old as $sql => $column) {

        if ($column == 'year_of_manufacture') {
            $new_value =  "concat('Built: ', year_of_manufacture)";
            $options_new[$new_value] = $column;
        } else {
            $options_new[$sql] = $column;
        }
    }
    $options->QueryFieldsTV = $options_new;
    return true;
}

Step 1: Replace static text by HTML tag

Now we know how to concatenate strings. Let's replace the value by a HTML tag.

This is what I want right now:

<span>Built: 2019</span>

So we have to concatenate several static strings <span>, Built: , then a field value year_of_manufacture, then another static string </span>.

$new_value = "concat('<span>', 'Built: ', year_of_manufacture, '</span>')";

You can also do this way $new_value = "concat('<span>Built: ', year_of_manufacture, '</span>')"; but there is good reason for doing it the way I did it. You will see later.

Let's check the element in our browser's dev-tools:

That's fine.

Step 2: Add CSS-style to the HTML-tag

Now, let us add some CSS style. Let me tell you, the result will be unexpected.

This is what I would like to insert into my cell:

<span style="background-color: red;">Built: 2019</span>

Attention: Double quotes

Remember last parts of this series: in PHP we have to double-quote the key of our array. Now, here in HTML, we need double quotes for wrapping the CSS-style. In PHP, the following will fail:

$new_value = "concat('<span style="background-color: lime;">', 'Built: ', year_of_manufacture, '</span>')";

See the syntax error in Visual Studio Code (VSCODE):

The code editor already marks the syntax error. PHP interprets the double quotes as beginning and end of a string. If we need a double quote as a character within a string, we have to 'escape' that double-quoute-character. We can 'escape' it by prepending a backslash: 

$new_value = "concat('<span style=\"background-color: lime;\">', 'Built: ', year_of_manufacture, '</span>')";

Now that's fine for our code editor:


See the difference?

There is no syntax error any more and we can save and check the results after reloading the browser.

Step 3: Houston, we have a problem

Let's reload and see the red background... well, there isn't. So let's inspect the HTML-tag:

Wait, what??? Instead of having the CSS style here, we can see the following:
<span xss="removed">Built: 2021</span>

The style has ben removed completely. As already mentioned in Part 1 of this series, this is for security reasons.

In Part 4 we are going to have a closer look at this and check alternatives.

If you like the way I try to help you, please consider following me on Twitter, purchasing our products or donating a coffee. All of this will help me, helping you in the future.

Kind regards,
Jan

Do you like it?