Escaping HTML Attributes¶
Escaping data in the HTML Attribute context is most often done incorrectly, if not overlooked completely by developers. Regular HTML escaping can be used for escaping HTML attributes, but only if the attribute value can be guaranteed as being properly quoted! To avoid confusion, we recommend always using the HTML Attribute escaper method in the HTML Attribute context.
To escape data in the HTML Attribute, use Zend\Escaper\Escaper‘s escapeHtmlAttr method. Internally it will convert the data to UTF-8, check for it’s validity, and use an extended set of characters to escape that are not covered by htmlspecialchars to cover the cases where an attribute might be unquoted or quoted illegally.
Examples of Bad HTML Attribute Escaping¶
An example of incorrect HTML attribute escaping:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <?php header('Content-Type: text/html; charset=UTF-8'); ?>
<!DOCTYPE html>
<?php
$input = <<<INPUT
' onmouseover='alert(/ZF2!/);
INPUT;
/**
* NOTE: This is equivalent to using htmlspecialchars($input, ENT_COMPAT)
*/
$output = htmlspecialchars($input);
?>
<html>
<head>
<title>Single Quoted Attribute</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<?php
// the span tag will look like:
// <span title='' onmouseover='alert(/ZF2!/);'>
?>
<span title='<?php echo $output ?>'>
What framework are you using?
</span>
</div>
</body>
</html>
|
In the above example, the default ENT_COMPAT flag is being used, which does not escape single quotes, thus resulting in an alert box popping up when the onmouseover event happens on the span element.
Another example of incorrect HTML attribute escaping can happen when unquoted attributes are used, which is, by the way, perfectly valid HTML5:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php header('Content-Type: text/html; charset=UTF-8'); ?>
<!DOCTYPE html>
<?php
$input = <<<INPUT
faketitle onmouseover=alert(/ZF2!/);
INPUT;
// Tough luck using proper flags when the title attribute is unquoted!
$output = htmlspecialchars($input,ENT_QUOTES);
?>
<html>
<head>
<title>Quoteless Attribute</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<?php
// the span tag will look like:
// <span title=faketitle onmouseover=alert(/ZF2!/);>
?>
<span title=<?php echo $output ?>>
What framework are you using?
</span>
</div>
</body>
</html>
|
The above example shows how it is easy to break out from unquoted attributes in HTML5.
Examples of Good HTML Attribute Escaping¶
Both of the previous examples can be avoided by simply using the escapeHtmlAttr method:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <?php header('Content-Type: text/html; charset=UTF-8'); ?>
<!DOCTYPE html>
<?php
$input = <<<INPUT
faketitle onmouseover=alert(/ZF2!/);
INPUT;
$escaper = new Zend\Escaper\Escaper('utf-8');
$output = $escaper->escapeHtmlAttr($input);
?>
<html>
<head>
<title>Quoteless Attribute</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
<?php
// the span tag will look like:
// <span title=faketitle onmouseover=alert(/ZF2!/);>
?>
<span title=<?php echo $output ?>>
What framework are you using?
</span>
</div>
</body>
</html>
|
In the above example, the malicious input from the attacker becomes completely harmless as we used proper HTML attribute escaping!
Table Of Contents
Previous topic
Next topic
This Page
Note: You need to stay logged into your GitHub account to contribute to the documentation.
