Use script helper functions in admin to enable Content-Security-Policy opt-in

[westonruter]

In #58664 the script helper functions—wp_get_script_tag(), wp_print_inline_script_tag(), wp_get_inline_script_tag()—were leveraged to eliminate manual construction of script tags on the frontend and the login screen. These were introduced in #39941. This made it possible to opt-in (see ​example plugin) to a Strict Content-Security-Policy (​Strict CSP) to guard against any possible XSS exploits. The scope in #58664 was limited to the frontend and the login screen because of the sheer number of inline scripts printed on the wp-admin. Additionally, the site editor and block editors make use of dynamically-constructed script tags in the editor iframe which is a Strict CSP violation.

Much of the work to rework inline scripts to use wp_print_inline_script() in the admin can be seen in an ​existing PR (now stale) from @enricocarraro.

See also #59444 which is about how to improve the developer experience of working with these JavaScript string literals.

[anonymized_14808221]

Can I ask a clarification? I am confused on the "version" of this trac
It says 5.7 and the selector only allows up to 5.7.2

Yet the trac was opened just 5 weeks ago, during a 6.x WP Version "timeframe". I am confused :)

What I am ultimately wondering is if there are ways already available for the _backend_ to become CSP ready, or if we only yet have https://core.trac.wordpress.org/ticket/39941 which implemented a front end filter allowing us to somewhat filter those script tags and add a nonce...

Thank you for any information!

[westonruter]

Replying to bedas:

Can I ask a clarification? I am confused on the "version" of this trac
It says 5.7 and the selector only allows up to 5.7.2

Good question. The version field here refers to when the first applicable version of WordPress that the issue is relevant to. Since the functions were introduced in 5.7, that's why this version is used.

The target version for fixing the issue is captured in the "milestone" field, which is still just Future Release. There isn't currently an established way to opt-in to CSP for the backend, so that's what this ticket is for.

[anonymized_14808221]

Replying to westonruter:

Thanks! Makes sense now.

I guess then there is some issue with wp_inline_script_attributes, because if it is intended for front end, then it shouldn't run in the backend - but does, and misses the array key type in that case.
I also notice that the documentation for the related wp_get_inline_script_tag is wrongly saying to use wp_script_attributes to filter the tags.

I guess I will open a commit/trac for the latter one and, should I open a trac for the first one? the very least we would need to specify on the doc page that this needs to be hooked explicitly to front end, or that an isset() should be run (which IMO is quite uncommon for filters/hooks, usually they run only where the data is available)

Finally, what about style tag? This is as far I see also not yet implemented (neither in the front nor in the backend)
Is there already a trac for that?

Please stop me if I am wrong. Thanks!

[westonruter]

Replying to bedas:

Replying to westonruter:
I guess then there is some issue with wp_inline_script_attributes, because if it is intended for front end, then it shouldn't run in the backend - but does, and misses the array key type in that case. [...] the very least we would need to specify on the doc page that this needs to be hooked explicitly to front end, or that an isset() should be run (which IMO is quite uncommon for filters/hooks, usually they run only where the data is available)

This filter is not specific for the frontend. It is intended to be used in any context, whether frontend or admin. The type array key is only supplied automatically if the page is not HTML5. So yes, an isset() check should always be done for $attributes['type']. If it is not set, then it is assumed to be text/javascript, per the HTML spec.

I also notice that the documentation for the related wp_get_inline_script_tag is wrongly saying to use wp_script_attributes to filter the tags.

Good catch. The phpdoc for wp_get_inline_script_tag() needs to be updated.

Trac Ticket: Core-63806

This pull request updates all inline script outputs in the bundled themes to use WordPress’s script helper functions, specifically wp_print_inline_script_tag(), in place of manually constructed <script> tags.

---

## ✅ Why This Matters

As of #59446, WordPress Core has adopted the use of wp_get_script_tag(), wp_get_inline_script_tag(), and wp_print_inline_script_tag() to eliminate manually constructed <script> tags. This change was made to:

However, many default and third-party themes still use raw <script> tags, which prevents them from fully benefiting from these improvements.

---

## 🛠 What’s Changed

• Replaced all instances of echo '<script>...</script>' with calls to wp_print_inline_script_tag().

---

## 🔙 Backward Compatibility
Since these helper functions were introduced in WordPress 5.7+, this PR also includes polyfill definitions in functions.php to ensure compatibility with earlier WordPress versions.

The polyfills conditionally define wp_print_inline_script_tag() and wp_get_inline_script_tag() functions only if they don’t already exist, making it safe for all supported versions.

[jonsurrell]

#52497 was marked as a duplicate.

@Debarghya-Banerjee Hello! Have you seen the latest PR feedback yet?

Also, note the comment I just added to the ticket, related the changes to Core-63887.

Hi @westonruter , I have checked the comments and feedback, I am working on it, and will push the changes in sometime by today itself. Thanks.

Hi @westonruter , Apologies for the late update. I’ve pushed the changes based on your and @sabernhardt 's feedback. Could you please take a look? Thanks!

@Debarghya-Banerjee Are you planning to address the remaining feedback or should we start pushing up commits to this PR? Thanks!

Hi @westonruter , I have addressed the feedback. Sorry for getting back late. Can you please check once? Thanks.

I wrote a script that checked the output of rendered output of the homepages for each of the themes to verify that there were no regressions in the generated markup, and that only the expected changes occur:

<details><summary><code>grab-output.sh</code></summary>

#!/bin/bash

outdir=/tmp/trac-63806-output
mkdir -p "$outdir"
echo '' > "$outdir/report.md"

check_theme() {
	theme="$1"
	url="$2"
	theme_dir="/tmp/trac-63806-output/$1"
	echo "# $theme" >> "$outdir/report.md"
	mkdir -p "$theme_dir"
	npm run env:cli theme activate "$theme"
	git checkout trunk
	curl -s "$url" > "$theme_dir/before.html"
	git checkout fix/63806-update-themes-to-use-wp_print_script_tag
	curl -s "$url" > "$theme_dir/after.html"
	prettier "$theme_dir/before.html" > "$theme_dir/before.prettier.html"
	prettier "$theme_dir/after.html" > "$theme_dir/after.prettier.html"
	diff -u "$theme_dir/before.html" "$theme_dir/after.html" > "$theme_dir/raw.diff"
	diff -u "$theme_dir/before.prettier.html" "$theme_dir/after.prettier.html" > "$theme_dir/prettier.diff"

	{
		echo "URL: \`$url\`"
		echo
		echo 'Prettier Diff:'
		echo '{{{diff'
		cat "$theme_dir/prettier.diff"
		echo '}}}'
		echo
		echo '<details><summary>Raw Diff</summary>'
		echo
		echo '{{{diff'
		cat "$theme_dir/raw.diff"
		echo '}}}'
		echo
		echo '</details>'
		echo
	} >> "$outdir/report.md"
}

home_url="http://localhost:8000/?enable_plugins=none"

check_theme twentyfifteen "$home_url"
check_theme twentyseventeen "$home_url"
check_theme twentysixteen "$home_url"
check_theme twentytwenty "$home_url"
check_theme twentytwentyone "$home_url"

cat "$outdir/report.md"

</details>

Here is the output:

# twentyfifteen
URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

/tmp/trac-63806-output/twentyfifteen/

@@ -9 +9 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentyfifteen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />

<details><summary>Raw Diff</summary>

/tmp/trac-63806-output/twentyfifteen/

@@ -5 +5 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="profile" href="https://gmpg.org/xfn/11">
         <link rel="pingback" href="http://localhost:8000/xmlrpc.php">
-        <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+        <script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentyfifteen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

</details>

# twentyseventeen
URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

/tmp/trac-63806-output/twentyseventeen/

@@ -9 +9 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentyseventeen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />

<details><summary>Raw Diff</summary>

/tmp/trac-63806-output/twentyseventeen/

@@ -5 +5 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <link rel="profile" href="https://gmpg.org/xfn/11">
 
-<script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+<script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentyseventeen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

</details>

# twentysixteen
URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

/tmp/trac-63806-output/twentysixteen/

@@ -8 +8 @@
       (function (html) {
         html.className = html.className.replace(/\bno-js\b/, "js");
       })(document.documentElement);
+      //# sourceURL=twentysixteen_javascript_detection
     </script>
     <title>WordPress Develop</title>
     <meta name="robots" content="max-image-preview:large" />

<details><summary>Raw Diff</summary>

/tmp/trac-63806-output/twentysixteen/

@@ -4 +4 @@
         <meta charset="UTF-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
         <link rel="profile" href="https://gmpg.org/xfn/11">
-                <script>(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);</script>
+                <script>
+(function(html){html.className = html.className.replace(/\bno-js\b/,'js')})(document.documentElement);
+//# sourceURL=twentysixteen_javascript_detection
+</script>
 <title>WordPress Develop</title>
 <meta name='robots' content='max-image-preview:large' />
 <link rel="alternate" type="application/rss+xml" title="WordPress Develop &raquo; Feed" href="http://localhost:8000/feed/" />

</details>

# twentytwenty
URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

/tmp/trac-63806-output/twentytwenty/

@@ -618 +618 @@
     <script>
       document.documentElement.className =
         document.documentElement.className.replace("no-js", "js");
+      //# sourceURL=twentytwenty_no_js_class
     </script>
     <style id="custom-background-css">
       body.custom-background {

<details><summary>Raw Diff</summary>

/tmp/trac-63806-output/twentytwenty/

@@ -78 +78 @@
 <script src="http://localhost:8000/wp-content/themes/twentytwenty/assets/js/index.js?ver=2.9" id="twentytwenty-js-js" defer data-wp-strategy="defer"></script>
 <link rel="https://api.w.org/" href="http://localhost:8000/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://localhost:8000/xmlrpc.php?rsd" />
 <meta name="generator" content="WordPress 6.9-alpha-60093-src" />
-        <script>document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );</script>
-        <style id="custom-background-css">
+<script>
+document.documentElement.className = document.documentElement.className.replace( 'no-js', 'js' );
+//# sourceURL=twentytwenty_no_js_class
+</script>
+<style id="custom-background-css">
 body.custom-background { background-color: #fff; }
 </style>

</details>

# twentytwentyone
URL: http://localhost:8000/?enable_plugins=none

Prettier Diff:

/tmp/trac-63806-output/twentytwentyone/

@@ -1524 +1524 @@
     </script>
     <script>
       document.body.classList.remove("no-js");
+      //# sourceURL=twenty_twenty_one_supports_js
     </script>
     <button
       id="dark-mode-toggler"
@@ -1622 +1623 @@
 
       darkModeInitialLoad();
       darkModeRepositionTogglerOnScroll();
+      //# sourceURL=http://localhost:8000/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
     </script>
     <script>
       if (
@@ -1630 +1632 @@
       ) {
         document.body.classList.add("is-IE");
       }
+      //# sourceURL=twentytwentyone_add_ie_class
     </script>
     <style id="core-block-supports-inline-css">
       /**

<details><summary>Raw Diff</summary>

/tmp/trac-63806-output/twentytwentyone/

@@ -470 +470 @@
 <script type="speculationrules">
 {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/twentytwentyone/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
 </script>
-<script>document.body.classList.remove("no-js");</script><button id="dark-mode-toggler" class="fixed-bottom" aria-pressed="false" onClick="toggleDarkMode()">Dark Mode: <span aria-hidden="true"></span></button>               <style>
+<script>
+document.body.classList.remove('no-js');
+//# sourceURL=twenty_twenty_one_supports_js
+</script>
+<button id="dark-mode-toggler" class="fixed-bottom" aria-pressed="false" onClick="toggleDarkMode()">Dark Mode: <span aria-hidden="true"></span></button>                <style>
                         #dark-mode-toggler > span {
                                 margin-left: 5px;
                         }
@@ -482 +486 @@
                         }
                                         </style>
 
-                <script>function toggleDarkMode() { // jshint ignore:line
+                <script>
+function toggleDarkMode() { // jshint ignore:line
         var toggler = document.getElementById( 'dark-mode-toggler' );
 
         if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
@@ -553 +558 @@
 
 darkModeInitialLoad();
 darkModeRepositionTogglerOnScroll();
-</script>       <script>
-        if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
-                document.body.classList.add( 'is-IE' );
-        }
-        </script>
-        <style id='core-block-supports-inline-css'>
+//# sourceURL=http://localhost:8000/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
+</script>
+<script>
+                if ( -1 !== navigator.userAgent.indexOf('MSIE') || -1 !== navigator.appVersion.indexOf('Trident/') ) {
+                        document.body.classList.add('is-IE');
+                }
+        //# sourceURL=twentytwentyone_add_ie_class
+</script>
+<style id='core-block-supports-inline-css'>
 /**
  * Core styles: block-supports
  */

</details>

[westonruter]

In 60913:

Bundled Themes: Use wp_print_inline_script_tag() when available and include sourceURL for JS.

Instead of manually constructing the markup for SCRIPT tags, leverage wp_print_inline_script_tag() when available to do the construction while also ensuring filters may inject additional attributes on the SCRIPT tags, such as nonce for CSP. When the function is not available (prior to WP 5.7), fall back to the manual markup construction.

This also adds the sourceURL comments to the inline scripts to facilitate debugging, per #63887.

Developed in ​https://github.com/WordPress/wordpress-develop/pull/9416.

Follow-up to [60909], [60899].

Props debarghyabanerjee, westonruter, hbhalodia, peterwilsoncc, sabernhardt, poena.
See #63887, #59446.
Fixes #63806.