Prevent filtering selectors which reference dynamic elements

ampproject · Apr 5, 2018 · bede9de · bede9de
1 parent 313f0b9
commit bede9de
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 2 deletions.
diff --git a/includes/sanitizers/class-amp-base-sanitizer.php b/includes/sanitizers/class-amp-base-sanitizer.php
@@ -55,7 +55,7 @@ abstract class AMP_Base_Sanitizer {
 	 *      @type bool $allow_dirty_styles
 	 *      @type bool $allow_dirty_scripts
 	 *      @type bool $disable_invalid_removal
-	 *      @type callable $remove_invalid_callback
+	 *      @type callable $validation_error_callback
 	 * }
 	 */
 	protected $args;

diff --git a/includes/sanitizers/class-amp-style-sanitizer.php b/includes/sanitizers/class-amp-style-sanitizer.php
@@ -25,6 +25,33 @@
  */
 class AMP_Style_Sanitizer extends AMP_Base_Sanitizer {
 
+	/**
+	 * Array of flags used to control sanitization.
+	 *
+	 * @var array {
+	 *      @type string[] $dynamic_element_selectors  Selectors for elements (or their ancestors) which contain dynamic content; selectors containing these will not be filtered.
+	 *      @type bool     $use_document_element       Whether the root of the document should be used rather than the body.
+	 *      @type bool     $require_https_src          Require HTTPS URLs.
+	 *      @type bool     $allow_dirty_styles         Allow dirty styles. This short-circuits the sanitize logic; it is used primarily in Customizer preview.
+	 *      @type callable $validation_error_callback  Function to call when a validation error is encountered.
+	 * }
+	 */
+	protected $args;
+
+	/**
+	 * Default args.
+	 *
+	 * @var array
+	 */
+	protected $DEFAULT_ARGS = array(
+		'dynamic_element_selectors' => array(
+			'amp-list',
+			'amp-live-list',
+			'[submit-error]',
+			'[submit-success]',
+		),
+	);
+
 	/**
 	 * Styles.
 	 *
@@ -520,14 +547,30 @@ private function process_stylesheet( $stylesheet, $node, $options = array() ) {
 			}
 		}
 
+		$dynamic_selector_pattern = null;
+		if ( ! empty( $this->args['dynamic_element_selectors'] ) ) {
+			$dynamic_selector_pattern = '#' . implode( '|', array_map(
+				function( $selector ) {
+					return preg_quote( $selector, '#' );
+				},
+				$this->args['dynamic_element_selectors']
+			) ) . '#';
+		}
+
 		$stylesheet = '';
 		foreach ( $parsed['stylesheet'] as $stylesheet_part ) {
 			if ( is_array( $stylesheet_part ) ) {
 				list( $selectors_parsed, $declaration_block ) = $stylesheet_part;
 				if ( $should_tree_shake ) {
 					$selectors = array();
 					foreach ( $selectors_parsed as $selector => $class_names ) {
-						if ( 0 === count( array_diff( $class_names, $this->used_class_names ) ) ) { // If all class names are used in the doc.
+						$should_include = (
+							( $dynamic_selector_pattern && preg_match( $dynamic_selector_pattern, $selector ) )
+							||
+							// If all class names are used in the doc.
+							0 === count( array_diff( $class_names, $this->used_class_names ) )
+						);
+						if ( $should_include ) {
 							$selectors[] = $selector;
 						}
 					}

diff --git a/tests/test-amp-style-sanitizer.php b/tests/test-amp-style-sanitizer.php
@@ -232,6 +232,24 @@ public function get_link_and_style_test_data() {
 					':root:not(#_):not(#_):not(#_):not(#_):not(#_) .amp-wp-10b06ba{color:red;}',
 				),
 			),
+			'styles_with_dynamic_elements' => array(
+				implode( '', array(
+					'<html amp><head><meta charset="utf-8">',
+					'<style amp-custom>b.foo, form [submit-success] b, div[submit-failure] b, form.unused b { color: green }</style>',
+					'<style amp-custom>.dead-list li .highlighted, amp-live-list li .highlighted { background: yellow }</style>',
+					'<style amp-custom>body amp-list .portland { color:blue; }</style>',
+					'</head><body>',
+					'<form method="post" action-xhr="https://example.com/subscribe" target="_top"><div submit-success><template type="amp-mustache"><b>Thanks</b>, {{name}}}</template></div></form>',
+					'<amp-live-list id="my-live-list" data-poll-interval="15000" data-max-items-per-page="20"><button update on="tap:my-live-list.update">You have updates!</button><ul items><li id="live-list-2-item-2" data-sort-time="1464281932879">Hello</li></ul></amp-live-list>',
+					'<amp-list width="auto" height="100" layout="fixed-height" src="https://ampproject-b5f4c.firebaseapp.com/examples/data/amp-list-urls.json"> <template type="amp-mustache"> <div class="url-entry"> <a href="{{url}}" class="{{class}}">{{title}}</a> </div> </template> </amp-list>',
+					'</body></html>',
+				) ),
+				array(
+					'form [submit-success] b,div[submit-failure] b{color:green;}',
+					'amp-live-list li .highlighted{background:yellow;}',
+					'body amp-list .portland{color:blue;}',
+				),
+			),
 		);
 	}