Introducing script attributes related functions in WordPress 5.7

WordPress 5.7 adds a handful of new functions that enables passing attributes, such as async or nonce, to both regular and inline script tagtag A directory in Subversion. WordPress uses tags to store a single snapshot of a version (3.6, 3.6.1, etc.), the common convention of tags in version control systems. (Not to be confused with post tags.) attributes. This creates a path forward for enabling a Content-Security-Policy (or CSP) in CoreCore Core is the set of software required to run WordPress. The Core Development Team builds WordPress., plugins, and themes.

These new functions are:

  • wp_get_script_tag() – Formats <script> loader tags and automatically injects a type attribute (if needed).
  • wp_print_script_tag() – Prints a formatted <script> loader tag.
  • wp_print_inline_script_tag() – Prints inline JavaScriptJavaScript JavaScript or JS is an object-oriented computer programming language commonly used to create interactive effects within web browsers. WordPress makes extensive use of JS for a better user experience. While PHP is executed on the server, JS executes within a user’s browser. https://www.javascript.com/. wrapped in a <script> tag.
  • wp_get_inline_script_tag() – Wraps inline JavaScript in a <script> tag.

All of these functions automatically inject the type attribute if the theme has not declared support for HTML5 script tags. Reminder: to declare HTML5 support for script tags, theme authors should use the following declaration in their functions.php file:

add_theme_support( 'html5', 'script' );

Examples

wp_get_inline_script_tag()

wp_get_inline_script_tag(
	'document.createElement("video");',
	array(
		'id'    => 'create-video-js',
		'async' => true,
	)
);

Returns:

<script id="create-video-js" async>document.createElement("video");</script>

wp_print_inline_script_tag()

Directly prints the value returned by wp_get_inline_script_tag().

wp_get_script_tag()

Setting the attributed value to true just add the attribute without any value. For example:

wp_get_script_tag(
	array(
		'src'      => 'RELATIVE_PATH/FILE.js',
		'nomodule' => true,
	)
);

Returns:

<script src="RELATIVE_PATH/FILE.js" nomodule></script>

Attributes values are automatically escaped using esc_attr but URLs have to be manually escaped using esc_url. For example:

wp_get_script_tag(
     array(
         'id'        => 'jquery-"js"-2.3.4',
         'integrity' => 'sha384-long_hash',
         'src'       => esc_url( 'https://domain.tld/jquery-2.3.4.min.js' ),
     )
 );

Returns:

<script id="jquery-"js"-2.3.4" integrity="sha384-long_hash" src="https://domain.tld/jquery-2.3.4.min.js"></script>

wp_print_script_tag()

Directly prints the value returned by wp_get_script_tag().

Plugins/Themes should not overwrite the nonce attribute of script tags if not specifically responsible for implementing CSP integration.

Filtering script tag attributes in WP 5.7

The wp_script_attributes hook can be used to filterFilter Filters are one of the two types of Hooks https://codex.wordpress.org/Plugin_API/Hooks. They provide a way for functions to modify data of other functions. They are the counterpart to Actions. Unlike Actions, filters are meant to work in an isolated manner, and should never have side effects such as affecting global variables and output. the attributes to be added in script tags. Attributes are provided in an array containing key-value pairs representing <script> tag attributes.

Please note that only the attribute name is added to the <script> tag for entries with a boolean value, if the value is true.

Attributes are sanitized by the new wp_sanitize_script_attributes function before being printed in the script tag.

Example of use

Adds a nonce attribute to every script tag generated by either wp_get_script_tag or wp_get_inline_script_tag:

function wporg_my_wp_script_attributes( $attr ) {
	if ( ! isset( $attr['nonce'] ) ) {
		$attr['nonce'] = get_my_custom_nonce(); // Random custom function
	}
	return $attr;
);
add_filter( 'wp_script_attributes', 'wporg_my_wp_script_attributes' );

What’s next?

This creates a path forward for enabling a Content-Security-Policy (or CSP) APIAPI An API or Application Programming Interface is a software intermediary that allows programs to interact with each other and share data in limited, clearly defined ways. in Core, plugins, and themes.

The next steps to get wp-admin to Strict CSP mode are:

  • Add nonces to all <script> elements. With strict CSP, every <script> element must have a nonce attribute which matches the value specified in the policy. Work started in ticketticket Created for both bug reports and feature development on the bug tracker. #39941.
  • Refactor inline event handlers and javascript: URIs. Inline event handlers (onclick="...", onerror="...") and <a href="javascript:..."> links can be used to run scripts, so an attacker who finds an XSS bugbug A bug is an error or unexpected result. Performance improvements, code optimization, and are considered enhancements, not defects. After feature freeze, only bugs are dealt with, with regressions (adverse changes from the previous version) being the highest priority. could inject such HTMLHTML HyperText Markup Language. The semantic scripting language primarily used for outputting content in web browsers. and execute malicious JavaScript. CSP requires refactoring those patterns into safer alternatives. Work started in ticket #51407.
  • Refactor calls to JSJS JavaScript, a web scripting language typically executed in the browser. Often used for advanced user interfaces and behaviors. APIs incompatible with CSP – includes things like document.write() used to load additional scripts and uses of eval().
  • Serve the Content-Security-Policy headerHeader The header of your site is typically the first thing people will experience. The masthead or header art located across the top of your page is part of the look and feel of your website. It can influence a visitor’s opinion about your content and you/ your organization’s brand. It may also look different on different screen sizes.. This final step will be the reward at the end of the process, turning on Strict CSP.

A complete post will be published by @adamsilverstein and @enricocarraro on Make/Core to explain these next steps in details.


For reference, see ticket #39941.

Props @johnbillion, @adamsilverstein, @enricocarraro, and @desrosj for proofreading.

#5-7, #dev-notes