Html.php

Go to the documentation of this file.

<?php
use MediaWiki\MediaWikiServices;

class Html {
    // List of void elements from HTML5, section 8.1.2 as of 2016-09-19
    private static $voidElements = [
        'area',
        'base',
        'br',
        'col',
        'embed',
        'hr',
        'img',
        'input',
        'keygen',
        'link',
        'meta',
        'param',
        'source',
        'track',
        'wbr',
    ];

    // Boolean attributes, which may have the value omitted entirely.  Manually
    // collected from the HTML5 spec as of 2011-08-12.
    private static $boolAttribs = [
        'async',
        'autofocus',
        'autoplay',
        'checked',
        'controls',
        'default',
        'defer',
        'disabled',
        'formnovalidate',
        'hidden',
        'ismap',
        'itemscope',
        'loop',
        'multiple',
        'muted',
        'novalidate',
        'open',
        'pubdate',
        'readonly',
        'required',
        'reversed',
        'scoped',
        'seamless',
        'selected',
        'truespeed',
        'typemustmatch',
        // HTML5 Microdata
        'itemscope',
    ];

    public static function buttonAttributes( array $attrs, array $modifiers = [] ) {
        global $wgUseMediaWikiUIEverywhere;
        if ( $wgUseMediaWikiUIEverywhere ) {
            if ( isset( $attrs['class'] ) ) {
                if ( is_array( $attrs['class'] ) ) {
                    $attrs['class'][] = 'mw-ui-button';
                    $attrs['class'] = array_merge( $attrs['class'], $modifiers );
                    // ensure compatibility with Xml
                    $attrs['class'] = implode( ' ', $attrs['class'] );
                } else {
                    $attrs['class'] .= ' mw-ui-button ' . implode( ' ', $modifiers );
                }
            } else {
                // ensure compatibility with Xml
                $attrs['class'] = 'mw-ui-button ' . implode( ' ', $modifiers );
            }
        }
        return $attrs;
    }

    public static function getTextInputAttributes( array $attrs ) {
        global $wgUseMediaWikiUIEverywhere;
        if ( $wgUseMediaWikiUIEverywhere ) {
            if ( isset( $attrs['class'] ) ) {
                if ( is_array( $attrs['class'] ) ) {
                    $attrs['class'][] = 'mw-ui-input';
                } else {
                    $attrs['class'] .= ' mw-ui-input';
                }
            } else {
                $attrs['class'] = 'mw-ui-input';
            }
        }
        return $attrs;
    }

    public static function linkButton( $text, array $attrs, array $modifiers = [] ) {
        return self::element( 'a',
            self::buttonAttributes( $attrs, $modifiers ),
            $text
        );
    }

    public static function submitButton( $contents, array $attrs, array $modifiers = [] ) {
        $attrs['type'] = 'submit';
        $attrs['value'] = $contents;
        return self::element( 'input', self::buttonAttributes( $attrs, $modifiers ) );
    }

    public static function rawElement( $element, $attribs = [], $contents = '' ) {
        $start = self::openElement( $element, $attribs );
        if ( in_array( $element, self::$voidElements ) ) {
            // Silly XML.
            return substr( $start, 0, -1 ) . '/>';
        } else {
            return $start . $contents . self::closeElement( $element );
        }
    }

    public static function element( $element, $attribs = [], $contents = '' ) {
        return self::rawElement( $element, $attribs, strtr( $contents, [
            // There's no point in escaping quotes, >, etc. in the contents of
            // elements.
            '&' => '&amp;',
            '<' => '&lt;'
        ] ) );
    }

    public static function openElement( $element, $attribs = [] ) {
        $attribs = (array)$attribs;
        // This is not required in HTML5, but let's do it anyway, for
        // consistency and better compression.
        $element = strtolower( $element );

        // Some people were abusing this by passing things like
        // 'h1 id="foo" to $element, which we don't want.
        if ( strpos( $element, ' ' ) !== false ) {
            wfWarn( __METHOD__ . " given element name with space '$element'" );
        }

        // Remove invalid input types
        if ( $element == 'input' ) {
            $validTypes = [
                'hidden',
                'text',
                'password',
                'checkbox',
                'radio',
                'file',
                'submit',
                'image',
                'reset',
                'button',

                // HTML input types
                'datetime',
                'datetime-local',
                'date',
                'month',
                'time',
                'week',
                'number',
                'range',
                'email',
                'url',
                'search',
                'tel',
                'color',
            ];
            if ( isset( $attribs['type'] ) && !in_array( $attribs['type'], $validTypes ) ) {
                unset( $attribs['type'] );
            }
        }

        // According to standard the default type for <button> elements is "submit".
        // Depending on compatibility mode IE might use "button", instead.
        // We enforce the standard "submit".
        if ( $element == 'button' && !isset( $attribs['type'] ) ) {
            $attribs['type'] = 'submit';
        }

        return "<$element" . self::expandAttributes(
            self::dropDefaults( $element, $attribs ) ) . '>';
    }

    public static function closeElement( $element ) {
        $element = strtolower( $element );

        return "</$element>";
    }

    private static function dropDefaults( $element, array $attribs ) {
        // Whenever altering this array, please provide a covering test case
        // in HtmlTest::provideElementsWithAttributesHavingDefaultValues
        static $attribDefaults = [
            'area' => [ 'shape' => 'rect' ],
            'button' => [
                'formaction' => 'GET',
                'formenctype' => 'application/x-www-form-urlencoded',
            ],
            'canvas' => [
                'height' => '150',
                'width' => '300',
            ],
            'form' => [
                'action' => 'GET',
                'autocomplete' => 'on',
                'enctype' => 'application/x-www-form-urlencoded',
            ],
            'input' => [
                'formaction' => 'GET',
                'type' => 'text',
            ],
            'keygen' => [ 'keytype' => 'rsa' ],
            'link' => [ 'media' => 'all' ],
            'menu' => [ 'type' => 'list' ],
            'script' => [ 'type' => 'text/javascript' ],
            'style' => [
                'media' => 'all',
                'type' => 'text/css',
            ],
            'textarea' => [ 'wrap' => 'soft' ],
        ];

        $element = strtolower( $element );

        foreach ( $attribs as $attrib => $value ) {
            $lcattrib = strtolower( $attrib );
            if ( is_array( $value ) ) {
                $value = implode( ' ', $value );
            } else {
                $value = strval( $value );
            }

            // Simple checks using $attribDefaults
            if ( isset( $attribDefaults[$element][$lcattrib] )
                && $attribDefaults[$element][$lcattrib] == $value
            ) {
                unset( $attribs[$attrib] );
            }

            if ( $lcattrib == 'class' && $value == '' ) {
                unset( $attribs[$attrib] );
            }
        }

        // More subtle checks
        if ( $element === 'link'
            && isset( $attribs['type'] ) && strval( $attribs['type'] ) == 'text/css'
        ) {
            unset( $attribs['type'] );
        }
        if ( $element === 'input' ) {
            $type = $attribs['type'] ?? null;
            $value = $attribs['value'] ?? null;
            if ( $type === 'checkbox' || $type === 'radio' ) {
                // The default value for checkboxes and radio buttons is 'on'
                // not ''. By stripping value="" we break radio boxes that
                // actually wants empty values.
                if ( $value === 'on' ) {
                    unset( $attribs['value'] );
                }
            } elseif ( $type === 'submit' ) {
                // The default value for submit appears to be "Submit" but
                // let's not bother stripping out localized text that matches
                // that.
            } else {
                // The default value for nearly every other field type is ''
                // The 'range' and 'color' types use different defaults but
                // stripping a value="" does not hurt them.
                if ( $value === '' ) {
                    unset( $attribs['value'] );
                }
            }
        }
        if ( $element === 'select' && isset( $attribs['size'] ) ) {
            if ( in_array( 'multiple', $attribs )
                || ( isset( $attribs['multiple'] ) && $attribs['multiple'] !== false )
            ) {
                // A multi-select
                if ( strval( $attribs['size'] ) == '4' ) {
                    unset( $attribs['size'] );
                }
            } else {
                // Single select
                if ( strval( $attribs['size'] ) == '1' ) {
                    unset( $attribs['size'] );
                }
            }
        }

        return $attribs;
    }

    public static function expandAttributes( array $attribs ) {
        $ret = '';
        foreach ( $attribs as $key => $value ) {
            // Support intuitive [ 'checked' => true/false ] form
            if ( $value === false || is_null( $value ) ) {
                continue;
            }

            // For boolean attributes, support [ 'foo' ] instead of
            // requiring [ 'foo' => 'meaningless' ].
            if ( is_int( $key ) && in_array( strtolower( $value ), self::$boolAttribs ) ) {
                $key = $value;
            }

            // Not technically required in HTML5 but we'd like consistency
            // and better compression anyway.
            $key = strtolower( $key );

            // https://www.w3.org/TR/html401/index/attributes.html ("space-separated")
            // https://www.w3.org/TR/html5/index.html#attributes-1 ("space-separated")
            $spaceSeparatedListAttributes = [
                'class', // html4, html5
                'accesskey', // as of html5, multiple space-separated values allowed
                // html4-spec doesn't document rel= as space-separated
                // but has been used like that and is now documented as such
                // in the html5-spec.
                'rel',
            ];

            // Specific features for attributes that allow a list of space-separated values
            if ( in_array( $key, $spaceSeparatedListAttributes ) ) {
                // Apply some normalization and remove duplicates

                // Convert into correct array. Array can contain space-separated
                // values. Implode/explode to get those into the main array as well.
                if ( is_array( $value ) ) {
                    // If input wasn't an array, we can skip this step
                    $newValue = [];
                    foreach ( $value as $k => $v ) {
                        if ( is_string( $v ) ) {
                            // String values should be normal `[ 'foo' ]`
                            // Just append them
                            if ( !isset( $value[$v] ) ) {
                                // As a special case don't set 'foo' if a
                                // separate 'foo' => true/false exists in the array
                                // keys should be authoritative
                                $newValue[] = $v;
                            }
                        } elseif ( $v ) {
                            // If the value is truthy but not a string this is likely
                            // an [ 'foo' => true ], falsy values don't add strings
                            $newValue[] = $k;
                        }
                    }
                    $value = implode( ' ', $newValue );
                }
                $value = explode( ' ', $value );

                // Normalize spacing by fixing up cases where people used
                // more than 1 space and/or a trailing/leading space
                $value = array_diff( $value, [ '', ' ' ] );

                // Remove duplicates and create the string
                $value = implode( ' ', array_unique( $value ) );
            } elseif ( is_array( $value ) ) {
                throw new MWException( "HTML attribute $key can not contain a list of values" );
            }

            $quote = '"';

            if ( in_array( $key, self::$boolAttribs ) ) {
                $ret .= " $key=\"\"";
            } else {
                $ret .= " $key=$quote" . Sanitizer::encodeAttribute( $value ) . $quote;
            }
        }
        return $ret;
    }

    public static function inlineScript( $contents, $nonce = null ) {
        $attrs = [];
        if ( $nonce !== null ) {
            $attrs['nonce'] = $nonce;
        } elseif ( ContentSecurityPolicy::isNonceRequired( RequestContext::getMain()->getConfig() ) ) {
            wfWarn( "no nonce set on script. CSP will break it" );
        }

        if ( preg_match( '/<\/?script/i', $contents ) ) {
            wfLogWarning( __METHOD__ . ': Illegal character sequence found in inline script.' );
            $contents = '/* ERROR: Invalid script */';
        }

        return self::rawElement( 'script', $attrs, $contents );
    }

    public static function linkedScript( $url, $nonce = null ) {
        $attrs = [ 'src' => $url ];
        if ( $nonce !== null ) {
            $attrs['nonce'] = $nonce;
        } elseif ( ContentSecurityPolicy::isNonceRequired( RequestContext::getMain()->getConfig() ) ) {
            wfWarn( "no nonce set on script. CSP will break it" );
        }

        return self::element( 'script', $attrs );
    }

    public static function inlineStyle( $contents, $media = 'all', $attribs = [] ) {
        // Don't escape '>' since that is used
        // as direct child selector.
        // Remember, in css, there is no "x" for hexadecimal escapes, and
        // the space immediately after an escape sequence is swallowed.
        $contents = strtr( $contents, [
            '<' => '\3C ',
            // CDATA end tag for good measure, but the main security
            // is from escaping the '<'.
            ']]>' => '\5D\5D\3E '
        ] );

        if ( preg_match( '/[<&]/', $contents ) ) {
            $contents = "/*<![CDATA[*/$contents/*]]>*/";
        }

        return self::rawElement( 'style', [
            'media' => $media,
        ] + $attribs, $contents );
    }

    public static function linkedStyle( $url, $media = 'all' ) {
        return self::element( 'link', [
            'rel' => 'stylesheet',
            'href' => $url,
            'media' => $media,
        ] );
    }

    public static function input( $name, $value = '', $type = 'text', array $attribs = [] ) {
        $attribs['type'] = $type;
        $attribs['value'] = $value;
        $attribs['name'] = $name;
        if ( in_array( $type, [ 'text', 'search', 'email', 'password', 'number' ] ) ) {
            $attribs = self::getTextInputAttributes( $attribs );
        }
        if ( in_array( $type, [ 'button', 'reset', 'submit' ] ) ) {
            $attribs = self::buttonAttributes( $attribs );
        }
        return self::element( 'input', $attribs );
    }

    public static function check( $name, $checked = false, array $attribs = [] ) {
        if ( isset( $attribs['value'] ) ) {
            $value = $attribs['value'];
            unset( $attribs['value'] );
        } else {
            $value = 1;
        }

        if ( $checked ) {
            $attribs[] = 'checked';
        }

        return self::input( $name, $value, 'checkbox', $attribs );
    }

    private static function messageBox( $html, $className, $heading = '' ) {
        if ( $heading !== '' ) {
            $html = self::element( 'h2', [], $heading ) . $html;
        }
        return self::rawElement( 'div', [ 'class' => $className ], $html );
    }

    public static function warningBox( $html ) {
        return self::messageBox( $html, 'warningbox' );
    }

    public static function errorBox( $html, $heading = '' ) {
        return self::messageBox( $html, 'errorbox', $heading );
    }

    public static function successBox( $html ) {
        return self::messageBox( $html, 'successbox' );
    }

    public static function radio( $name, $checked = false, array $attribs = [] ) {
        if ( isset( $attribs['value'] ) ) {
            $value = $attribs['value'];
            unset( $attribs['value'] );
        } else {
            $value = 1;
        }

        if ( $checked ) {
            $attribs[] = 'checked';
        }

        return self::input( $name, $value, 'radio', $attribs );
    }

    public static function label( $label, $id, array $attribs = [] ) {
        $attribs += [
            'for' => $id
        ];
        return self::element( 'label', $attribs, $label );
    }

    public static function hidden( $name, $value, array $attribs = [] ) {
        return self::input( $name, $value, 'hidden', $attribs );
    }

    public static function textarea( $name, $value = '', array $attribs = [] ) {
        $attribs['name'] = $name;

        if ( substr( $value, 0, 1 ) == "\n" ) {
            // Workaround for T14130: browsers eat the initial newline
            // assuming that it's just for show, but they do keep the later
            // newlines, which we may want to preserve during editing.
            // Prepending a single newline
            $spacedValue = "\n" . $value;
        } else {
            $spacedValue = $value;
        }
        return self::element( 'textarea', self::getTextInputAttributes( $attribs ), $spacedValue );
    }

    public static function namespaceSelectorOptions( array $params = [] ) {
        if ( !isset( $params['exclude'] ) || !is_array( $params['exclude'] ) ) {
            $params['exclude'] = [];
        }

        if ( $params['in-user-lang'] ?? false ) {
            global $wgLang;
            $lang = $wgLang;
        } else {
            $lang = MediaWikiServices::getInstance()->getContentLanguage();
        }

        $optionsOut = [];
        if ( isset( $params['all'] ) ) {
            // add an option that would let the user select all namespaces.
            // Value is provided by user, the name shown is localized for the user.
            $optionsOut[$params['all']] = wfMessage( 'namespacesall' )->text();
        }
        // Add all namespaces as options
        $options = $lang->getFormattedNamespaces();
        // Filter out namespaces below 0 and massage labels
        foreach ( $options as $nsId => $nsName ) {
            if ( $nsId < NS_MAIN || in_array( $nsId, $params['exclude'] ) ) {
                continue;
            }
            if ( $nsId === NS_MAIN ) {
                // For other namespaces use the namespace prefix as label, but for
                // main we don't use "" but the user message describing it (e.g. "(Main)" or "(Article)")
                $nsName = wfMessage( 'blanknamespace' )->text();
            } elseif ( is_int( $nsId ) ) {
                $nsName = $lang->convertNamespace( $nsId );
            }
            $optionsOut[$nsId] = $nsName;
        }

        return $optionsOut;
    }

    public static function namespaceSelector( array $params = [],
        array $selectAttribs = []
    ) {
        ksort( $selectAttribs );

        // Is a namespace selected?
        if ( isset( $params['selected'] ) ) {
            // If string only contains digits, convert to clean int. Selected could also
            // be "all" or "" etc. which needs to be left untouched.
            // PHP is_numeric() has issues with large strings, PHP ctype_digit has other issues
            // and returns false for already clean ints. Use regex instead..
            if ( preg_match( '/^\d+$/', $params['selected'] ) ) {
                $params['selected'] = intval( $params['selected'] );
            }
            // else: leaves it untouched for later processing
        } else {
            $params['selected'] = '';
        }

        if ( !isset( $params['disable'] ) || !is_array( $params['disable'] ) ) {
            $params['disable'] = [];
        }

        // Associative array between option-values and option-labels
        $options = self::namespaceSelectorOptions( $params );

        // Convert $options to HTML
        $optionsHtml = [];
        foreach ( $options as $nsId => $nsName ) {
            $optionsHtml[] = self::element(
                'option', [
                    'disabled' => in_array( $nsId, $params['disable'] ),
                    'value' => $nsId,
                    'selected' => $nsId === $params['selected'],
                ], $nsName
            );
        }

        if ( !array_key_exists( 'id', $selectAttribs ) ) {
            $selectAttribs['id'] = 'namespace';
        }

        if ( !array_key_exists( 'name', $selectAttribs ) ) {
            $selectAttribs['name'] = 'namespace';
        }

        $ret = '';
        if ( isset( $params['label'] ) ) {
            $ret .= self::element(
                'label', [
                    'for' => $selectAttribs['id'] ?? null,
                ], $params['label']
            ) . "\u{00A0}";
        }

        // Wrap options in a <select>
        $ret .= self::openElement( 'select', $selectAttribs )
            . "\n"
            . implode( "\n", $optionsHtml )
            . "\n"
            . self::closeElement( 'select' );

        return $ret;
    }

    public static function htmlHeader( array $attribs = [] ) {
        $ret = '';

        global $wgHtml5Version, $wgMimeType, $wgXhtmlNamespaces;

        $isXHTML = self::isXmlMimeType( $wgMimeType );

        if ( $isXHTML ) { // XHTML5
            // XML MIME-typed markup should have an xml header.
            // However a DOCTYPE is not needed.
            $ret .= "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>\n";

            // Add the standard xmlns
            $attribs['xmlns'] = 'http://www.w3.org/1999/xhtml';

            // And support custom namespaces
            foreach ( $wgXhtmlNamespaces as $tag => $ns ) {
                $attribs["xmlns:$tag"] = $ns;
            }
        } else { // HTML5
            $ret .= "<!DOCTYPE html>\n";
        }

        if ( $wgHtml5Version ) {
            $attribs['version'] = $wgHtml5Version;
        }

        $ret .= self::openElement( 'html', $attribs );

        return $ret;
    }

    public static function isXmlMimeType( $mimetype ) {
        # https://html.spec.whatwg.org/multipage/infrastructure.html#xml-mime-type
        # * text/xml
        # * application/xml
        # * Any MIME type with a subtype ending in +xml (this implicitly includes application/xhtml+xml)
        return (bool)preg_match( '!^(text|application)/xml$|^.+/.+\+xml$!', $mimetype );
    }

    public static function infoBox( $rawHtml, $icon, $alt, $class = '' ) {
        $s = self::openElement( 'div', [ 'class' => "mw-infobox $class" ] );

        $s .= self::openElement( 'div', [ 'class' => 'mw-infobox-left' ] ) .
                self::element( 'img',
                    [
                        'src' => $icon,
                        'alt' => $alt,
                    ]
                ) .
                self::closeElement( 'div' );

        $s .= self::openElement( 'div', [ 'class' => 'mw-infobox-right' ] ) .
                $rawHtml .
                self::closeElement( 'div' );
        $s .= self::element( 'div', [ 'style' => 'clear: left;' ], ' ' );

        $s .= self::closeElement( 'div' );

        $s .= self::element( 'div', [ 'style' => 'clear: left;' ], ' ' );

        return $s;
    }

    static function srcSet( array $urls ) {
        $candidates = [];
        foreach ( $urls as $density => $url ) {
            // Cast density to float to strip 'x', then back to string to serve
            // as array index.
            $density = (string)(float)$density;
            $candidates[$density] = $url;
        }

        // Remove duplicates that are the same as a smaller value
        ksort( $candidates, SORT_NUMERIC );
        $candidates = array_unique( $candidates );

        // Append density info to the url
        foreach ( $candidates as $density => $url ) {
            $candidates[$density] = $url . ' ' . $density . 'x';
        }

        return implode( ", ", $candidates );
    }
}