safecss_filter_attr() WordPress Function
Assuming you are familiar with CSS and HTML, the safecss_filter_attr() function in WordPress allows you to safely add CSS style declarations to HTML elements. It is important to note that this function does not validate the CSS syntax; it only ensures that the CSS is properly escaped for use in an HTML attribute.
safecss_filter_attr( string $css, string $deprecated = '' ) #
Filters an inline style attribute and removes disallowed rules.
Parameters
- $css
(string)(Required)A string of CSS rules.
- $deprecated
(string)(Optional)Not used.
Default value: ''
Return
(string) Filtered string of CSS rules.
Source
File: wp-includes/kses.php
function safecss_filter_attr( $css, $deprecated = '' ) { if ( ! empty( $deprecated ) ) { _deprecated_argument( __FUNCTION__, '2.8.1' ); // Never implemented. } $css = wp_kses_no_null( $css ); $css = str_replace( array( "\n", "\r", "\t" ), '', $css ); $allowed_protocols = wp_allowed_protocols(); $css_array = explode( ';', trim( $css ) ); /** * Filters the list of allowed CSS attributes. * * @since 2.8.1 * * @param string[] $attr Array of allowed CSS attributes. */ $allowed_attr = apply_filters( 'safe_style_css', array( 'background', 'background-color', 'background-image', 'background-position', 'background-size', 'background-attachment', 'background-blend-mode', 'border', 'border-radius', 'border-width', 'border-color', 'border-style', 'border-right', 'border-right-color', 'border-right-style', 'border-right-width', 'border-bottom', 'border-bottom-color', 'border-bottom-left-radius', 'border-bottom-right-radius', 'border-bottom-style', 'border-bottom-width', 'border-bottom-right-radius', 'border-bottom-left-radius', 'border-left', 'border-left-color', 'border-left-style', 'border-left-width', 'border-top', 'border-top-color', 'border-top-left-radius', 'border-top-right-radius', 'border-top-style', 'border-top-width', 'border-top-left-radius', 'border-top-right-radius', 'border-spacing', 'border-collapse', 'caption-side', 'columns', 'column-count', 'column-fill', 'column-gap', 'column-rule', 'column-span', 'column-width', 'color', 'filter', 'font', 'font-family', 'font-size', 'font-style', 'font-variant', 'font-weight', 'letter-spacing', 'line-height', 'text-align', 'text-decoration', 'text-indent', 'text-transform', 'height', 'min-height', 'max-height', 'width', 'min-width', 'max-width', 'margin', 'margin-right', 'margin-bottom', 'margin-left', 'margin-top', 'padding', 'padding-right', 'padding-bottom', 'padding-left', 'padding-top', 'flex', 'flex-basis', 'flex-direction', 'flex-flow', 'flex-grow', 'flex-shrink', 'grid-template-columns', 'grid-auto-columns', 'grid-column-start', 'grid-column-end', 'grid-column-gap', 'grid-template-rows', 'grid-auto-rows', 'grid-row-start', 'grid-row-end', 'grid-row-gap', 'grid-gap', 'justify-content', 'justify-items', 'justify-self', 'align-content', 'align-items', 'align-self', 'clear', 'cursor', 'direction', 'float', 'list-style-type', 'object-position', 'overflow', 'vertical-align', ) ); /* * CSS attributes that accept URL data types. * * This is in accordance to the CSS spec and unrelated to * the sub-set of supported attributes above. * * See: https://developer.mozilla.org/en-US/docs/Web/CSS/url */ $css_url_data_types = array( 'background', 'background-image', 'cursor', 'list-style', 'list-style-image', ); /* * CSS attributes that accept gradient data types. * */ $css_gradient_data_types = array( 'background', 'background-image', ); if ( empty( $allowed_attr ) ) { return $css; } $css = ''; foreach ( $css_array as $css_item ) { if ( '' === $css_item ) { continue; } $css_item = trim( $css_item ); $css_test_string = $css_item; $found = false; $url_attr = false; $gradient_attr = false; if ( strpos( $css_item, ':' ) === false ) { $found = true; } else { $parts = explode( ':', $css_item, 2 ); $css_selector = trim( $parts[0] ); if ( in_array( $css_selector, $allowed_attr, true ) ) { $found = true; $url_attr = in_array( $css_selector, $css_url_data_types, true ); $gradient_attr = in_array( $css_selector, $css_gradient_data_types, true ); } } if ( $found && $url_attr ) { // Simplified: matches the sequence `url(*)`. preg_match_all( '/url\([^)]+\)/', $parts[1], $url_matches ); foreach ( $url_matches[0] as $url_match ) { // Clean up the URL from each of the matches above. preg_match( '/^url\(\s*([\'\"]?)(.*)(\g1)\s*\)$/', $url_match, $url_pieces ); if ( empty( $url_pieces[2] ) ) { $found = false; break; } $url = trim( $url_pieces[2] ); if ( empty( $url ) || wp_kses_bad_protocol( $url, $allowed_protocols ) !== $url ) { $found = false; break; } else { // Remove the whole `url(*)` bit that was matched above from the CSS. $css_test_string = str_replace( $url_match, '', $css_test_string ); } } } if ( $found && $gradient_attr ) { $css_value = trim( $parts[1] ); if ( preg_match( '/^(repeating-)?(linear|radial|conic)-gradient\(([^()]|rgb[a]?\([^()]*\))*\)$/', $css_value ) ) { // Remove the whole `gradient` bit that was matched above from the CSS. $css_test_string = str_replace( $css_value, '', $css_test_string ); } } if ( $found ) { // Allow CSS calc(). $css_test_string = preg_replace( '/calc\(((?:\([^()]*\)?|[^()])*)\)/', '', $css_test_string ); // Allow CSS var(). $css_test_string = preg_replace( '/\(?var\(--[a-zA-Z0-9_-]*\)/', '', $css_test_string ); // Check for any CSS containing \ ( & } = or comments, // except for url(), calc(), or var() usage checked above. $allow_css = ! preg_match( '%[\\\(&=}]|/\*%', $css_test_string ); /** * Filters the check for unsafe CSS in `safecss_filter_attr`. * * Enables developers to determine whether a section of CSS should be allowed or discarded. * By default, the value will be false if the part contains \ ( & } = or comments. * Return true to allow the CSS part to be included in the output. * * @since 5.5.0 * * @param bool $allow_css Whether the CSS in the test string is considered safe. * @param string $css_test_string The CSS string to test. */ $allow_css = apply_filters( 'safecss_filter_attr_allow_css', $allow_css, $css_test_string ); // Only add the CSS part if it passes the regex check. if ( $allow_css ) { if ( '' !== $css ) { $css .= ';'; } $css .= $css_item; } } } return $css; }
Expand full source codeCollapse full source codeView on TracView on GitHub
Changelog
Version | Description |
---|---|
5.8.0 | Added support for calc() and var() values. |
5.7.1 | Added support for object-position . |
5.3.1 | Added support for gradient backgrounds. |
5.3.0 | Added support for grid , flex and column layout properties. Extend background-* support of individual properties. |
5.2.0 | Added support for background-position and grid-template-columns . |
5.1.0 | Added support for text-transform . |
5.0.0 | Added support for background-image . |
4.6.0 | Added support for list-style-type . |
4.4.0 | Added support for min-height , max-height , min-width , and max-width . |
2.8.1 | Introduced. |