Add SRI to external scripts.

Author: colinmurphy

plugins/wpgraphql-logging/bin/run-codeception.sh

@@ -77,8 +77,7 @@ run_tests() {
 		fi
 
 		if [[ -z "$coverage_percent" && -f "tests/_output/coverage/index.html" ]]; then
-			# macOS/BSD grep lacks -P; use -E and strip the percent sign
-			coverage_percent=$(grep -Eo '([0-9]+(\.[0-9]+)?)%' "tests/_output/coverage/index.html" | head -1 | tr -d '%')
+			coverage_percent=$(grep -Eo '[0-9]+\.[0-9]+%' "tests/_output/coverage/index.html" | head -1 | tr -d '%')
 		fi
 		if [[ -z "$coverage_percent" ]]; then
 			echo "Warning: Could not determine code coverage percentage."

plugins/wpgraphql-logging/src/Admin/ViewLogsPage.php

@@ -65,6 +65,8 @@ public function setup(): void {
 
 	/**
 	 * Registers the settings page for the view logs.
+	 *
+	 * @psalm-suppress HookNotFound
 	 */
 	public function register_settings_page(): void {
 
@@ -91,7 +93,9 @@ public function register_settings_page(): void {
 		add_action( 'load-' . $this->page_hook, [ $this, 'process_page_actions_before_rendering' ], 10, 0 );
 
 		// Enqueue scripts for the admin page.
-		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_scripts' ] );
+		add_action( 'admin_enqueue_scripts', [ $this, 'enqueue_admin_scripts' ], 9, 1 ); // Need to load before adding SRI attributes.
+		add_action( 'script_loader_tag', [ $this, 'add_sri_to_scripts' ], 10, 2 );
+		add_action( 'style_loader_tag', [ $this, 'add_sri_to_styles' ], 10, 2 );
 	}
 
 	/**
@@ -104,29 +108,26 @@ public function enqueue_admin_scripts( string $hook_suffix ): void {
 			return;
 		}
 
-		// Enqueue WordPress's built-in datepicker and slider.
 		wp_enqueue_script( 'jquery-ui-datepicker' );
 		wp_enqueue_script( 'jquery-ui-slider' );
 
-		// Enqueue the timepicker addon script and styles from a CDN.
 		wp_enqueue_script(
 			'jquery-ui-timepicker-addon',
 			'https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.js',
 			[ 'jquery-ui-datepicker', 'jquery-ui-slider' ],
 			'1.6.3',
-			true
+			true,
 		);
+
 		wp_enqueue_style(
 			'jquery-ui-timepicker-addon-style',
 			'https://cdnjs.cloudflare.com/ajax/libs/jquery-ui-timepicker-addon/1.6.3/jquery-ui-timepicker-addon.min.css',
 			[],
 			'1.6.3'
 		);
 
-		// Enqueue the base jQuery UI styles.
 		wp_enqueue_style( 'jquery-ui-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css', [], '1.12.1' );
 
-		// Add inline script to initialize the datetimepicker.
 		wp_add_inline_script(
 			'jquery-ui-timepicker-addon',
 			'jQuery(document).ready(function($){ $(".wpgraphql-logging-datepicker").datetimepicker({ dateFormat: "yy-mm-dd", timeFormat: "HH:mm:ss" }); });'
@@ -136,6 +137,99 @@ public function enqueue_admin_scripts( string $hook_suffix ): void {
 		do_action( 'wpgraphql_logging_view_logs_admin_enqueue_scripts', $hook_suffix );
 	}
 
+	/**
+	 * Adds integrity and crossorigin attributes to scripts.
+	 *
+	 * @param string $tag The script tag.
+	 * @param string $handle The script handle.
+	 *
+	 * @link https://www.srihash.org/ to generate the integrity and crossorigin attributes.
+	 */
+	public function add_sri_to_scripts($tag, $handle): void {
+
+		$scripts = [
+			'jquery-ui-timepicker-addon' => [
+				'integrity'   => 'sha512-s5u/JBtkPg+Ff2WEr49/cJsod95UgLHbC000N/GglqdQuLnYhALncz8ZHiW/LxDRGduijLKzeYb7Aal9h3codZA==',
+				'crossorigin' => 'anonymous',
+			],
+		];
+
+		$scripts = apply_filters( 'wpgraphql_logging_view_logs_add_sri_to_scripts', $scripts );
+
+		if ( ! isset( $scripts[ $handle ] ) ) {
+			return;
+		}
+
+		$integrity   = $scripts[ $handle ]['integrity'];
+		$crossorigin = $scripts[ $handle ]['crossorigin'];
+
+		$tag = str_replace(
+			' src=',
+			' integrity="' . esc_attr( $integrity ) . '" crossorigin="' . esc_attr( $crossorigin ) . '" src=',
+			$tag
+		);
+
+		echo wp_kses( $tag, [
+			'script' => [
+				'src'         => [],
+				'integrity'   => [],
+				'crossorigin' => [],
+				'type'        => [],
+				'id'          => [],
+			],
+			'link'   => [
+				'href'        => [],
+				'integrity'   => [],
+				'crossorigin' => [],
+				'rel'         => [],
+				'type'        => [],
+				'id'          => [],
+			],
+		] );
+	}
+
+	/**
+	 * Adds integrity and crossorigin attributes to styles.
+	 *
+	 * @param string $tag The script tag.
+	 * @param string $handle The script handle.
+	 *
+	 * @link https://www.srihash.org/ to generate the integrity and crossorigin attributes.
+	 */
+	public function add_sri_to_styles($tag, $handle): void {
+
+		$styles = [
+			'jquery-ui-timepicker-addon-style' => [
+				'integrity'   => 'sha512-LT9fy1J8pE4Cy6ijbg96UkExgOjCqcxAC7xsnv+mLJxSvftGVmmc236jlPTZXPcBRQcVOWoK1IJhb1dAjtb4lQ==',
+				'crossorigin' => 'anonymous',
+			],
+		];
+		$styles = apply_filters( 'wpgraphql_logging_view_logs_add_sri_to_styles', $styles );
+
+		if ( ! isset( $styles[ $handle ] ) ) {
+			return;
+		}
+
+		$integrity   = $styles[ $handle ]['integrity'];
+		$crossorigin = $styles[ $handle ]['crossorigin'];
+
+		$tag = str_replace(
+			' href=',
+			' integrity="' . esc_attr( $integrity ) . '" crossorigin="' . esc_attr( $crossorigin ) . '" href=',
+			$tag
+		);
+
+		echo wp_kses( $tag, [
+			'link' => [
+				'src'         => [],
+				'integrity'   => [],
+				'crossorigin' => [],
+				'type'        => [],
+				'id'          => [],
+			],
+		] );
+	}
+
 	/**
 	 * Renders the admin page for the logs.
 	 */