WordPress.org

Make WordPress Core

Opened 3 years ago

Last modified 6 weeks ago

#40899 new defect (bug)

'&' Is always escaped in the JavaScript template.

Reported by: tmatsuur Owned by:
Milestone: Awaiting Review Priority: normal
Severity: normal Version: 4.7.5
Component: General Keywords:
Focuses: javascript Cc:

Description

When I tried the JavaScript template, '&' was always escaped.

Source:

<script type="text/template" id="tmpl-fields">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>

Rendering:

<p>&amp;</p>
<p>Unscaped: W<i>o</i>&amp;r'l"d</p>
<p>Escaped: W&lt;i&gt;o&lt;/i&gt;&amp;r'l"d</p>

While checking the interpolation of the variable, '&' was always converted to '& amp;'.
Is this a specification or a bug?

Change History (5)

This ticket was mentioned in Slack in #core by noisysocks. View the logs.


6 weeks ago

#2 @noisysocks
6 weeks ago

@tmatsuur: Could you please provide some more detailed steps on how to reproduce this bug? Where are you placing the script tag?

#3 @tmatsuur
6 weeks ago

Thanks @noisysocks .

This is something I wondered when using the JavaScript template in my own plugin.

1.Place the attachment in the plugin directory with an appropriate name.

2.Log in to the admin page and activate the plugin.

3.Open the site top page and look under the search widget.

The version of WordPress is 5.5.1 and the theme is Twenty Twenty.

The output source code was as follows.

	<script type="text/template" id="tmpl-fields">
<div id="after_widget_search">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</div>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>

When I checked the HTML of the relevant part with the developer tool of Chrome, it was as follows.

<div id="after_widget_search">
<p>&amp;</p>
<p>Unscaped: W<i>o</i>&amp;r'l"d</p>
<p>Escaped: W&lt;i&gt;o&lt;/i&gt;&amp;r'l"d</p>
</div>

#4 @tmatsuur
6 weeks ago

I'm sorry. I seem to have forgotten to attach the file.

The source code of the plugin is as follows.

<?php
/*
 Plugin Name: Test JavaScript Template
 Description: Test JavaScript Template.
 Author: tmatsuur
 Version: 0.0.1
 */

$test_javascript_template = new test_javascript_template();

class test_javascript_template {
	public function __construct() {
		add_action( 'wp_enqueue_scripts', array( $this, 'scripts' ) );
		add_action( 'wp_footer', array( $this, 'footer' ), 9999 );
	}

	public function scripts() {
		wp_enqueue_script( 'wp-util' );
	}

	public function footer() {
?>
<script type="text/template" id="tmpl-fields">
<div id="after_widget_search">
<p>&</p>
<p>Unscaped: {{{data.value}}}</p>
<p>Escaped: {{data.value}}</p>
</div>
</script>
<script type="text/javascript">
( function($) {
	$(document).ready( function () {
		var template = wp.template( 'fields' );
		$( '.widget_search' ).after( template( { value: "W<i>o</i>&r'l\"d" } ) );
	} );
} )( jQuery );
</script>
<?php
	}
}

#5 @SergeyBiryukov
6 weeks ago

  • Focuses javascript added
Note: See TracTickets for help on using tickets.