Sanitizer removes square-bracketed binding attributes

[laras126]

Expected behavior:

The square-bracketed binding attributes identified in $globally_allowed_attrs should not removed by the sanitizer.

Actual behavior:

Attributes surrounded with square-brackets e.g. [class] and [text] are removed by the sanitizer even though they are AMP compatible.

Steps to reproduce:

1. Activate plugin version 0.6.2
2. Include amp-bind in component scripts in functions.php:

add_filter( 'amp_post_template_data', 'my_amp_component_scripts' );
function my_amp_component_scripts( $data ) {
	$custom_component_scripts = array(
		'amp-bind'  => 'https://cdn.ampproject.org/v0/amp-bind-0.1.js'
	);
	$data['amp_component_scripts'] = array_merge( $data['amp_component_scripts'], $custom_component_scripts );
	return $data;
}

3. Create a simple shortcode utilizing a binding attribute, also in functions.php:

add_shortcode( 'my_button', 'my_button_shortcode' );
function my_button_shortcode( $atts ) {
	if( is_amp_endpoint() ) {
		return '<p [text]="\'Hello \' + foo">Hello World</p><button on="tap:AMP.setState({foo: \'amp-bind\'})">Click</button>';
	}
}

4. Add the shortcode [my_button] to the post editor.
5. Visit the post's AMP version, and inspect the button to see the binding attribute has been removed.

Notes

Adding a print_r($attr_name); to ./includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php reveals that, in the above example, the name of the attribute to be removed is foo. A similar problem occurs when a different expression constitutes the attribute's value – e.g. [class]="foo ? 'foo' : 'bar'" – the $attr_name is printed as :.

If the sanitizer is disabled by commenting out line 118 in ./includes/templates/class-amp-content.php, the amp-bind attribute is rendered and functions as expected.

[westonruter]

@laras126 Hi! You're absolutely right. This is a problem in v0.6 of the plugin. However, in 0.7 support for amp-bind was added via #895. Would you please try the 0.7 branch and confirm that the problem with amp-bind is fixed? Note also that you won't have to include amp-bind script manually either because it will be automatically added in:

https://github.com/Automattic/amp-wp/blob/b53de14a00e7302ecc967aa3a798e7fca3eddbf1/includes/sanitizers/class-amp-tag-and-attribute-sanitizer.php#L462-L475

[laras126]

@westonruter Heyy, it works! How would you suggest implementing this update on a live site running the version on the plugin repository?

[westonruter]

@laras126 with the plugin repo cloned, you can run these commands:

git checkout 0.7
npm install
npm run build

That will create an amp.zip in the directory which you can install on a site via the WP admin. You'll have to deactivate and uninstall any existing AMP plugin first before you do this. Otherwise, you can extract the ZIP and SFTP/rsync/git-push the files up.

[laras126]

Okay great, thank you @westonruter! Works like a charm.