We’ve done a little bit of conditional HTML--HTML that only gets sent to the browser depending on other conditions, such as whether the browser submitted the form. Let’s take a closer look at this.
Try typing, as your favorite color, the color of your browser’s background. On my browser, this is white. Our PHP code will dutifully display the text in white, causing it to be completely invisible against the browser’s white background. We don’t have to stand for this behavior. Let’s make sure that the example color is always visible.
Change the lines that say:
ELSE:
?>
<p style="color: <?echo $color?>">
to
ELSE:
IF ($color == "white"):
$bgcolor = "grey";
ELSE:
$bgcolor = "white";
ENDIF;
?>
<p style="color: <?echo $color?>; background-color: <?echo $bgcolor?>;">
Now, if you type in “white”, the background color will be grey. If you type in anything else, the background color will be white.
Works great, right?
Go ahead and type “White” or “WHITE”. The text is invisible again. PHP, like most programming languages, is case sensitive. But cascading style sheets (and, currently, HTML) is not. This means that when PHP checks to see if “White” is the same as “white”, it says that it is not. But when we set the color to “White” and the background color to “white”, CSS gives the text and the background of our paragraph the exact same color.
We can alleviate this problem by converting the color they choose to all lower case. This way, when we check their color against our color, case will no longer matter--theirs will be all lower case as well. Change the “IF ($color == “white”):“, line to the following:
$color = strtolower($color);
IF ($color == "white"):
Try it again, and now, a favorite color of “white”, “White”, or even “wHiTE” all result in visible text.
Try typing white with a space after it. Again with the invisible text! PHP is checking exactly, but CSS (like HTML) ignores what is called “white space”--spaces, for example. Well, we can fix this as well. Add one more line:
$color = strtolower($color);
$color = trim($color);
IF ($color == "white"):
That works, but this is getting tedious. Where does it end? The real problem here is that we are beginning to assume things about the browser’s state and the user’s actions that we cannot assume. We thought it would be nice to show an example of the color the viewer chose. Then we thought it might be a good idea to make sure that they can always see the example color. But on the web, we never have control over the user’s browser, and if we know what we are doing we don’t want it.
There are other ways around this problem. We could, for example, keep a list of valid colors. If the color they choose is not in that list, do not show them an example color. This ensures that when they find a way of representing white that we haven’t anticipated, we do not end up showing them invisible text. In fact, it fixes a whole bunch of potential problems called “cross-scripting” as well. What we’re doing is inserting into “our” HTML some text that the viewer has “typed”. We are assuming that humans are typing this and that they are typing colors. In fact, however, we cannot assume anything about the stuff that we receive from “outside”.
Try, instead of typing a color in your form, typing a double-quote, a greater-than symbol, and then some text. Something like:
"><h1>Your mother smells of elderberries</h1>
That wasn’t very nice of us to make a web page that says that, was it? In general, you want to be extremely careful about what you accept from outside of your PHP code. Form data can be very easily falsified.
One solution in this case is, as mentioned, keeping a list of valid colors. If a visitor to your site gives a color that is not in your list, you can remember it, but don’t use it to modify your page. Checking against a list of colors requires knowing how to use lists in PHP, however, which we haven’t gotten to yet. We’ll get to that on the next project. But keep this in mind, because web form attacks really start to matter when you start using PHP to send e-mail, as we’ll do in the final section on this project.