vendor/zendframework/zend-escaper/doc/book/escaping-html-attributes.md

   1 # Escaping HTML Attributes
   2
   3 Escaping data in **HTML Attribute** contexts is most often done incorrectly, if
   4 not overlooked completely by developers. Regular [HTML
   5 escaping](escaping-html.md) can be used for escaping HTML attributes *only* if
   6 the attribute value can be **guaranteed as being properly quoted**! To avoid
   7 confusion, we recommend always using the HTML Attribute escaper method when
   8 dealing with HTTP attributes specifically.
   9
  10 To escape data for an HTML Attribute, use `Zend\Escaper\Escaper`'s
  11 `escapeHtmlAttr()` method.  Internally it will convert the data to UTF-8, check
  12 for its validity, and use an extended set of characters to escape that are not
  13 covered by `htmlspecialchars()` to cover the cases where an attribute might be
  14 unquoted or quoted illegally.
  15
  16 ## Examples of Bad HTML Attribute Escaping
  17
  18 An example of incorrect HTML attribute escaping:
  19
  20 ```php
  21 <?php header('Content-Type: text/html; charset=UTF-8'); ?>
  22 <!DOCTYPE html>
  23 <?php
  24 $input = <<<INPUT
  25 ' onmouseover='alert(/ZF2!/);
  26 INPUT;
  27
  28 /**
  29  * NOTE: This is equivalent to using htmlspecialchars($input, ENT_COMPAT)
  30  */
  31 $output = htmlspecialchars($input);
  32 ?>
  33 <html>
  34 <head>
  35     <title>Single Quoted Attribute</title>
  36     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  37 </head>
  38 <body>
  39     <div>
  40         <?php
  41         // the span tag will look like:
  42         // <span title='' onmouseover='alert(/ZF2!/);'>
  43         ?>
  44         <span title='<?= $output ?>'>
  45             What framework are you using?
  46         </span>
  47     </div>
  48 </body>
  49 </html>
  50 ```
  51
  52 In the above example, the default `ENT_COMPAT` flag is being used, which does
  53 not escape single quotes, thus resulting in an alert box popping up when the
  54 `onmouseover` event happens on the `span` element.
  55
  56 Another example of incorrect HTML attribute escaping can happen when unquoted
  57 attributes are used (which is, by the way, perfectly valid HTML5):
  58
  59 ```php
  60 <?php header('Content-Type: text/html; charset=UTF-8'); ?>
  61 <!DOCTYPE html>
  62 <?php
  63 $input = <<<INPUT
  64 faketitle onmouseover=alert(/ZF2!/);
  65 INPUT;
  66
  67 // Tough luck using proper flags when the title attribute is unquoted!
  68 $output = htmlspecialchars($input, ENT_QUOTES);
  69 ?>
  70 <html>
  71 <head>
  72     <title>Quoteless Attribute</title>
  73     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  74 </head>
  75 <body>
  76     <div>
  77         <?php
  78         // the span tag will look like:
  79         // <span title=faketitle onmouseover=alert(/ZF2!/);>
  80         ?>
  81         <span title=<?= $output ?>>
  82             What framework are you using?
  83         </span>
  84     </div>
  85 </body>
  86 </html>
  87 ```
  88
  89 The above example shows how it is easy to break out from unquoted attributes in
  90 HTML5.
  91
  92 ## Example of Good HTML Attribute Escaping
  93
  94 Both of the previous examples can be avoided by simply using the
  95 `escapeHtmlAttr()` method:
  96
  97 ```php
  98 <?php header('Content-Type: text/html; charset=UTF-8'); ?>
  99 <!DOCTYPE html>
 100 <?php
 101 $input = <<<INPUT
 102 faketitle onmouseover=alert(/ZF2!/);
 103 INPUT;
 104
 105 $escaper = new Zend\Escaper\Escaper('utf-8');
 106 $output = $escaper->escapeHtmlAttr($input);
 107 ?>
 108 <html>
 109 <head>
 110     <title>Quoteless Attribute</title>
 111     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 112 </head>
 113 <body>
 114     <div>
 115         <?php
 116         // the span tag will look like:
 117         // <span title=faketitle&#x20;onmouseover&#x3D;alert&#x28;&#x2F;ZF2&#x21;&#x2F;&#x29;&#x3B;>
 118         ?>
 119         <span title=<?= $output ?>>
 120             What framework are you using?
 121         </span>
 122     </div>
 123 </body>
 124 </html>
 125 ```
 126
 127 In the above example, the malicious input from the attacker becomes completely
 128 harmless as we used proper HTML attribute escaping!