Security: add Content-Security-Policy script loaders.

Add new functions `wp_get_script_tag`, `wp_print_script_tag`, `wp_print_inline_script_tag` and `wp_get_inline_script_tag` that support script attributes. Enables passing attributes such as `async` or `nonce`, creating a path forward for enabling a Content-Security-Policy in core, plugins and themes.

Props tomdxw, johnbillion, jadeddragoon, jrchamp, mallorydxw, epicfaace, alinod, enricocarraro, ocean90.
Fixes #39941.




git-svn-id: https://develop.svn.wordpress.org/trunk@50167 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Adam Silverstein
2021-02-02 20:53:53 +00:00
parent a31fc94dc3
commit d4b2126f07
4 changed files with 463 additions and 0 deletions

View File

@@ -7866,3 +7866,123 @@ function is_php_version_compatible( $required ) {
function wp_fuzzy_number_match( $expected, $actual, $precision = 1 ) {
return abs( (float) $expected - (float) $actual ) <= $precision;
}
/**
* Sanitizes an attributes array into an attributes string to be placed inside a `<script>` tag.
*
* Automatically injects type attribute if needed.
* Used by {@see wp_get_script_tag()} and {@see wp_get_inline_script_tag()}.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
* @return string String made of sanitized `<script>` tag attributes.
*/
function wp_sanitize_script_attributes( $attributes ) {
$html5_script_support = ! is_admin() && ! current_theme_supports( 'html5', 'script' );
$attributes_string = '';
// If HTML5 script tag is supported, only the attribute name is added
// to $attributes_string for entries with a boolean value, and that are true.
foreach ( $attributes as $attribute_name => $attribute_value ) {
if ( is_bool( $attribute_value ) ) {
if ( $attribute_value ) {
$attributes_string .= $html5_script_support ? sprintf( ' %1$s="%2$s"', esc_attr( $attribute_name ), esc_attr( $attribute_name ) ) : ' ' . $attribute_name;
}
} else {
$attributes_string .= sprintf( ' %1$s="%2$s"', esc_attr( $attribute_name ), esc_attr( $attribute_value ) );
}
}
return $attributes_string;
}
/**
* Formats `<script>` loader tags.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
* @return string String containing `<script>` opening and closing tags.
*/
function wp_get_script_tag( $attributes ) {
if ( ! isset( $attributes['type'] ) && ! is_admin() && ! current_theme_supports( 'html5', 'script' ) ) {
$attributes['type'] = 'text/javascript';
}
/**
* Filters attributes to be added to a script tag.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
* Only the attribute name is added to the `<script>` tag for
* entries with a boolean value, and that are true.
*/
$attributes = apply_filters( 'wp_script_attributes', $attributes );
return sprintf( "<script%s></script>\n", wp_sanitize_script_attributes( $attributes ) );
}
/**
* Prints formatted `<script>` loader tag.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
*/
function wp_print_script_tag( $attributes ) {
echo wp_get_script_tag( $attributes );
}
/**
* Wraps inline JavaScript in `<script>` tag.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param string $javascript Inline JavaScript code.
* @param array $attributes Optional. Key-value pairs representing `<script>` tag attributes.
* @return string String containing inline JavaScript code wrapped around `<script>` tag.
*/
function wp_get_inline_script_tag( $javascript, $attributes = array() ) {
if ( ! isset( $attributes['type'] ) && ! is_admin() && ! current_theme_supports( 'html5', 'script' ) ) {
$attributes['type'] = 'text/javascript';
}
/**
* Filters attributes to be added to a script tag.
*
* @since 5.7.0
*
* @param array $attributes Key-value pairs representing `<script>` tag attributes.
* Only the attribute name is added to the `<script>` tag for
* entries with a boolean value, and that are true.
*/
$attributes = apply_filters( 'wp_inline_script_attributes', $attributes, $javascript );
$javascript = "\n" . trim( $javascript, "\n\r " ) . "\n";
return sprintf( "<script%s>%s</script>\n", wp_sanitize_script_attributes( $attributes ), $javascript );
}
/**
* Prints inline JavaScript wrapped in `<script>` tag.
*
* It is possible to inject attributes in the `<script>` tag via the {@see 'wp_script_attributes'} filter.
* Automatically injects type attribute if needed.
*
* @since 5.7.0
*
* @param string $javascript Inline JavaScript code.
* @param array $attributes Optional. Key-value pairs representing `<script>` tag attributes.
*/
function wp_print_inline_script_tag( $javascript, $attributes = array() ) {
echo wp_get_inline_script_tag( $javascript, $attributes );
}

View File

@@ -0,0 +1,119 @@
<?php
/**
* Test wp_get_inline_script_tag() and wp_print_inline_script_tag().
*
* @group functions.php
*/
class Tests_Functions_wpInlineScriptTag extends WP_UnitTestCase {
private $event_handler = <<<'JS'
document.addEventListener( 'DOMContentLoaded', function () {
document.getElementById( 'elementID' )
.addEventListener( 'click', function( event ) {
event.preventDefault();
});
});
JS;
public function get_inline_script_tag_type_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
'<script type="application/javascript" nomodule>' . "\n{$this->event_handler}\n</script>\n",
wp_get_inline_script_tag(
$this->event_handler,
array(
'type' => 'application/javascript',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
$this->assertSame(
'<script type="application/javascript" nomodule>' . "\n{$this->event_handler}\n</script>\n",
wp_get_inline_script_tag(
$this->event_handler,
array(
'type' => 'application/javascript',
'async' => false,
'nomodule' => true,
)
)
);
}
public function test_get_inline_script_tag_type_not_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
"<script nomodule>\n{$this->event_handler}\n</script>\n",
wp_get_inline_script_tag(
$this->event_handler,
array(
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
}
public function test_get_inline_script_tag_unescaped_src() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
"<script>\n{$this->event_handler}\n</script>\n",
wp_get_inline_script_tag( $this->event_handler )
);
remove_theme_support( 'html5' );
}
public function test_print_script_tag_prints_get_inline_script_tag() {
add_filter(
'wp_inline_script_attributes',
function ( $attributes ) {
if ( isset( $attributes['id'] ) && 'utils-js-extra' === $attributes['id'] ) {
$attributes['async'] = true;
}
return $attributes;
}
);
add_theme_support( 'html5', array( 'script' ) );
$attributes = array(
'id' => 'utils-js-before',
'nomodule' => true,
);
$this->assertSame(
wp_get_inline_script_tag( $this->event_handler, $attributes ),
get_echo(
'wp_print_inline_script_tag',
array(
$this->event_handler,
$attributes,
)
)
);
remove_theme_support( 'html5' );
$this->assertSame(
wp_get_inline_script_tag( $this->event_handler, $attributes ),
get_echo(
'wp_print_inline_script_tag',
array(
$this->event_handler,
$attributes,
)
)
);
}
}

View File

@@ -0,0 +1,130 @@
<?php
/**
* Test wp_sanitize_script_attributes().
*
* @group functions.php
*/
class Tests_Functions_wpSanitizeScriptAttributes extends WP_UnitTestCase {
function test_sanitize_script_attributes_type_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
' type="application/javascript" src="https://DOMAIN.TLD/PATH/FILE.js" nomodule',
wp_sanitize_script_attributes(
array(
'type' => 'application/javascript',
'src' => 'https://DOMAIN.TLD/PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
$this->assertSame(
' src="https://DOMAIN.TLD/PATH/FILE.js" type="application/javascript" nomodule="nomodule"',
wp_sanitize_script_attributes(
array(
'src' => 'https://DOMAIN.TLD/PATH/FILE.js',
'type' => 'application/javascript',
'async' => false,
'nomodule' => true,
)
)
);
}
function test_sanitize_script_attributes_type_not_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
' src="https://DOMAIN.TLD/PATH/FILE.js" nomodule',
wp_sanitize_script_attributes(
array(
'src' => 'https://DOMAIN.TLD/PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
$this->assertSame(
' src="https://DOMAIN.TLD/PATH/FILE.js" nomodule="nomodule"',
wp_sanitize_script_attributes(
array(
'src' => 'https://DOMAIN.TLD/PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
}
function test_sanitize_script_attributes_no_attributes() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
'',
wp_sanitize_script_attributes( array() )
);
remove_theme_support( 'html5' );
}
function test_sanitize_script_attributes_relative_src() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
' src="PATH/FILE.js" nomodule',
wp_sanitize_script_attributes(
array(
'src' => 'PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
}
function test_sanitize_script_attributes_only_false_boolean_attributes() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
'',
wp_sanitize_script_attributes(
array(
'async' => false,
'nomodule' => false,
)
)
);
remove_theme_support( 'html5' );
}
function test_sanitize_script_attributes_only_true_boolean_attributes() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
' async nomodule',
wp_sanitize_script_attributes(
array(
'async' => true,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
}
}

View File

@@ -0,0 +1,94 @@
<?php
/**
* Test wp_get_script_tag() and wp_print_script_tag().
*
* @group functions.php
*/
class Tests_Functions_wpScriptTag extends WP_UnitTestCase {
function get_script_tag_type_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
'<script src="https://localhost/PATH/FILE.js" type="application/javascript" nomodule></script>' . "\n",
wp_get_script_tag(
array(
'type' => 'application/javascript',
'src' => 'https://localhost/PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
$this->assertSame(
'<script src="https://localhost/PATH/FILE.js" type="application/javascript" nomodule></script>' . "\n",
wp_get_script_tag(
array(
'src' => 'https://localhost/PATH/FILE.js',
'type' => 'application/javascript',
'async' => false,
'nomodule' => true,
)
)
);
}
function test_get_script_tag_type_not_set() {
add_theme_support( 'html5', array( 'script' ) );
$this->assertSame(
'<script src="https://localhost/PATH/FILE.js" nomodule></script>' . "\n",
wp_get_script_tag(
array(
'src' => 'https://localhost/PATH/FILE.js',
'async' => false,
'nomodule' => true,
)
)
);
remove_theme_support( 'html5' );
}
function test_print_script_tag_prints_get_script_tag() {
add_filter(
'wp_script_attributes',
function ( $attributes ) {
if ( isset( $attributes['id'] ) && 'utils-js-extra' === $attributes['id'] ) {
$attributes['async'] = true;
}
return $attributes;
}
);
add_theme_support( 'html5', array( 'script' ) );
$attributes = array(
'src' => 'https://localhost/PATH/FILE.js',
'id' => 'utils-js-extra',
'nomodule' => true,
);
$this->assertSame(
wp_get_script_tag( $attributes ),
get_echo(
'wp_print_script_tag',
array( $attributes )
)
);
remove_theme_support( 'html5' );
$this->assertSame(
wp_get_script_tag( $attributes ),
get_echo(
'wp_print_script_tag',
array( $attributes )
)
);
}
}