Skip to content

Scripts added by PWA plugin on error template are removed by sanitizer #7122

@westonruter

Description

@westonruter

Bug Description

The PWA plugin adds a couple scripts to the error template:

<script id="wp-navigation-request-properties" type="application/json">{{{WP_NAVIGATION_REQUEST_PROPERTIES}}}</script>	<script type="module">
		const shouldRetry = () => {
			if (
				new URLSearchParams(location.search.substring(1)).has(
					'wp_error_template'
				)
			) {
				return false;
			}

			const navigationRequestProperties = JSON.parse(
				document.getElementById('wp-navigation-request-properties').text
			);
			if ('GET' !== navigationRequestProperties.method) {
				return false;
			}

			return true;
		};

		if (shouldRetry()) {
			/**
			 * Listen to changes in the network state, reload when online.
			 * This handles the case when the device is completely offline.
			 */
			window.addEventListener('online', () => {
				window.location.reload();
			});

			// Create a counter to implement exponential backoff.
			let count = 0;

			/**
			 * Check if the server is responding and reload the page if it is.
			 * This handles the case when the device is online, but the server is offline or misbehaving.
			 */
			async function checkNetworkAndReload() {
				try {
					const response = await fetch(location.href, {
						method: 'HEAD',
					});
					// Verify we get a valid response from the server
					if (response.status >= 200 && response.status < 500) {
						window.location.reload();
						return;
					}
				} catch {
					// Unable to connect so do nothing.
				}
				window.setTimeout(
					checkNetworkAndReload,
					Math.pow(2, count++) * 2500
				);
			}

			checkNetworkAndReload();
		}
	</script>

These are getting stripped from the page when in Moderate/Strict standboxing, and in Loose they are getting retained with a data-amp-unvalidated-tag attribute added to them. In Loose mode, this is causing the CSS processing to be disabled, resulting in no style[amp-custom] to be added to the page. Since the PWA plugin relies on the runtime cache to store CSS files, this means that when the Offline page is served to the user, no stylesheets will be available in the cache.

The fix is simple: we need to add a PWA sanitizer which adds data-px-verified-tag to both of these scripts.

Expected Behaviour

Scripts on PWA error template should not trigger the Loose sandboxing level.

Screenshots

image

PHP Version

No response

Plugin Version

2.3-alpha

AMP plugin template mode

Standard

WordPress Version

6.0

Site Health

No response

Gutenberg Version

No response

OS(s) Affected

No response

Browser(s) Affected

No response

Device(s) Affected

No response

Acceptance Criteria

No response

Implementation Brief

No response

QA Testing Instructions

No response

Demo

No response

Changelog Entry

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    BugSomething isn't workingChangeloggedWhether the issue/PR has been added to release notes.Integration: PWA

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions