Citizen allows stored XSS in Command Palette tip messages

@@ -116,6 +116,6 @@
 	"citizen-command-palette-tip-commands": "Type <code>/</code> for all commands",

 	"citizen-command-palette-tip-users": "Type <code>@</code> to search for users",

 	"citizen-command-palette-tip-namespace": "Type <code>:</code> to search for namespace",

-	"citizen-command-palette-tip-templates": "Type <code>{{</code> to search for templates",

+	"citizen-command-palette-tip-templates": "Type <code><nowiki>{{</nowiki></code> to search for templates",

 	"citizen-command-palette-tip-actions": "Type <code>></code> for a list of actions"

 }

@@ -4,6 +4,7 @@
 
 namespace MediaWiki\Skins\Citizen\Components;
 
+use MediaWiki\Html\Html;
 use MediaWiki\Language\Language;
 use MediaWiki\MediaWikiServices;
 use MediaWiki\Title\MalformedTitleException;
@@ -52,11 +53,15 @@ private function getUserRegistration(): ?array {
 			return null;
 		}
 
-		$html = sprintf(
-			'<time class="citizen-user-regdate" datetime="%s">%s</time>',
-			wfTimestamp( TS_ISO_8601, $timestamp ),
-			// Since this is not accessible by anon, we can use user language
-			$this->lang->userDate( $timestamp, $this->user )
+		// Since this is not accessible by anon, we can use user language
+		$date = $this->lang->userDate( $timestamp, $this->user );
+		$html = Html::element(
+			'time',
+			[
+				'class' => 'citizen-user-regdate',
+				'datetime' => wfTimestamp( TS_ISO_8601, $timestamp )
+			],
+			$date
 		);
 
 		return [

@@ -59,10 +59,10 @@ module.exports = exports = defineComponent( {
 		// TODO: Make this expandable with more tips, probably with a mw hook
 		// TODO: Maybe we should move this to store?
 		const tips = [
-			mw.message( 'citizen-command-palette-tip-commands' ).plain(),
-			mw.message( 'citizen-command-palette-tip-users' ).plain(),
-			mw.message( 'citizen-command-palette-tip-namespace' ).plain(),
-			mw.message( 'citizen-command-palette-tip-templates' ).plain()
+			mw.message( 'citizen-command-palette-tip-commands' ).parse(),
+			mw.message( 'citizen-command-palette-tip-users' ).parse(),
+			mw.message( 'citizen-command-palette-tip-namespace' ).parse(),
+			mw.message( 'citizen-command-palette-tip-templates' ).parse()
 		];
 
 		const currentTipIndex = ref( 0 );

@@ -15,7 +15,7 @@ function addDefaultPortlet( portlet ) {
 	if ( label ) {
 		const labelDiv = document.createElement( 'div' );
 		labelDiv.classList.add( 'citizen-menu__heading' );
-		labelDiv.innerHTML = label.textContent || '';
+		labelDiv.textContent = label.textContent || '';
 		portlet.insertBefore( labelDiv, label );
 		label.remove();
 	}

@@ -1,11 +1,11 @@
-<div 
+<div
 	class="citizen-typeahead-placeholder"
 	id="citizen-typeahead-placeholder"
 	{{#hidden}}hidden{{/hidden}}
 >
 	<div class="citizen-typeahead-placeholder-content">
 		{{#icon}}<div class="citizen-typeahead-placeholder-icon citizen-ui-icon mw-ui-icon-wikimedia-{{.}}"></div>{{/icon}}
-		{{#title}}<div class="citizen-typeahead-placeholder-title">{{{.}}}</div>{{/title}}
-		{{#description}}<div class="citizen-typeahead-placeholder-description">{{{.}}}</div>{{/description}}
+		{{#title}}<div class="citizen-typeahead-placeholder-title">{{.}}</div>{{/title}}
+		{{#description}}<div class="citizen-typeahead-placeholder-description">{{.}}</div>{{/description}}
 	</div>
-</div>
\ No newline at end of file
+</div>

@@ -312,6 +312,7 @@
 			"class": "MediaWiki\\ResourceLoader\\CodexModule",
 			"dependencies": [
 				"mediawiki.api",
+				"mediawiki.jqueryMsg",
 				"mediawiki.language",
 				"mediawiki.page.ready",
 				"mediawiki.storage",

@@ -6,8 +6,8 @@
 >

 	{{#label}}

 	<div class="citizen-menu__heading{{#label-class}} {{.}}{{/label-class}}">

-		{{{.}}}

+		{{.}}

 	</div>

 	{{/label}}

 	{{>MenuContents}}

-</nav>
\ No newline at end of file
+</nav>

@@ -108,5 +108,11 @@
 

 	"citizen-command-palette-queryaction-fulltext-search-description": "Search the full text of all pages",

 	"citizen-command-palette-queryaction-media-search-description": "Search for media files",

-	"citizen-command-palette-queryaction-page-edit-description": "Create or edit page"

+	"citizen-command-palette-queryaction-page-edit-description": "Create or edit page",

+

+	"citizen-command-palette-tip-commands": "Type <code>/</code> for all commands",

+	"citizen-command-palette-tip-users": "Type <code>@</code> to search for users",

+	"citizen-command-palette-tip-namespace": "Type <code>:</code> to search for namespace",

+	"citizen-command-palette-tip-templates": "Type <code>{{</code> to search for templates",

+	"citizen-command-palette-tip-actions": "Type <code>></code> for a list of actions"

 }

@@ -99,5 +99,10 @@
 	"citizen-command-palette-command-user-description": "Description for the user command in the command palette",
 	"citizen-command-palette-queryaction-fulltext-search-description": "Description for the fulltext search in the command palette",
 	"citizen-command-palette-queryaction-media-search-description": "Description for the media search in the command palette",
-	"citizen-command-palette-queryaction-page-edit-description": "Description for the page edit action in the command palette"
+	"citizen-command-palette-queryaction-page-edit-description": "Description for the page edit action in the command palette",
+	"citizen-command-palette-tip-commands": "Tip for the commands in the command palette",
+	"citizen-command-palette-tip-users": "Tip for the users in the command palette",
+	"citizen-command-palette-tip-namespace": "Tip for the namespace in the command palette",
+	"citizen-command-palette-tip-templates": "Tip for the templates in the command palette",
+	"citizen-command-palette-tip-actions": "Tip for the actions in the command palette"
 }

@@ -1,9 +1,7 @@
 <template>
 	<div class="citizen-command-palette__footer">
-		<div class="citizen-command-palette__footer-note">
-			Thanks for trying our new Command Palette!
-			<a href="https://github.com/StarCitizenTools/mediawiki-skins-Citizen/issues">Give us feedback</a>
-		</div>
+		<!-- eslint-disable-next-line vue/no-v-html -->
+		<div class="citizen-command-palette__footer-note" v-html="currentTip"></div>
 		<command-palette-keyboard-hints
 			:has-highlighted-item-with-actions="hasHighlightedItemWithActions"
 			:item-count="itemCount"
@@ -18,6 +16,7 @@
 
 <script>
 const { defineComponent } = require( 'vue' );
+const { ref, computed, onMounted } = require( 'vue' );
 const CommandPaletteKeyboardHints = require( './CommandPaletteKeyboardHints.vue' );
 
 // @vue/component
@@ -55,6 +54,28 @@ module.exports = exports = defineComponent( {
 			type: Number,
 			default: 0
 		}
+	},
+	setup() {
+		// TODO: Make this expandable with more tips, probably with a mw hook
+		// TODO: Maybe we should move this to store?
+		const tips = [
+			mw.message( 'citizen-command-palette-tip-commands' ).text(),
+			mw.message( 'citizen-command-palette-tip-users' ).text(),
+			mw.message( 'citizen-command-palette-tip-namespace' ).text(),
+			mw.message( 'citizen-command-palette-tip-templates' ).text()
+		];
+
+		const currentTipIndex = ref( 0 );
+		const currentTip = computed( () => tips[ currentTipIndex.value ] );
+
+		onMounted( () => {
+			// Randomly select a tip when component is mounted
+			currentTipIndex.value = Math.floor( Math.random() * tips.length );
+		} );
+
+		return {
+			currentTip
+		};
 	}
 } );
 </script>

@@ -394,6 +394,11 @@
 				"citizen-command-palette-queryaction-fulltext-search-description",
 				"citizen-command-palette-queryaction-media-search-description",
 				"citizen-command-palette-queryaction-page-edit-description",
+				"citizen-command-palette-tip-commands",
+				"citizen-command-palette-tip-users",
+				"citizen-command-palette-tip-namespace",
+				"citizen-command-palette-tip-templates",
+				"citizen-command-palette-tip-actions",
 				"citizen-command-palette-type-action",
 				"citizen-command-palette-type-command",
 				"citizen-command-palette-type-menu-item",

@@ -47,9 +47,6 @@ final class Drawer extends Partial {
 	 * @throws Exception
 	 */
 	public function decorateSidebarData( $sidebarData ) {
-		// Enable label for first portlet
-		$sidebarData['data-portlets-first']['has-label'] = true;
-
 		$globalToolsId = $this->getConfigValue( 'CitizenGlobalToolsPortlet' );
 		$globalToolsHtml = $this->getGlobalToolsHTML();
 		$globalToolsAdded = false;
@@ -62,9 +59,6 @@ public function decorateSidebarData( $sidebarData ) {
 		}
 
 		for ( $i = 0; $i < count( $sidebarData['array-portlets-rest'] ); $i++ ) {
-			// Enable label for other portlet
-			$sidebarData['array-portlets-rest'][$i]['has-label'] = true;
-
 			switch ( $sidebarData['array-portlets-rest'][$i]['id'] ) {
 				// Remove toolbox since it is handled by page tools
 				case 'p-tb': {

@@ -93,7 +93,6 @@ private function getArticleToolsData( $sidebarData ) {
 		foreach ( $sidebarData['array-portlets-rest'] as $portlet ) {
 			if ( $portlet['id'] === 'p-tb' ) {
 				$data = $portlet;
-				$data['has-label'] = true;
 				$data['is-empty'] = false;
 				break;
 			}

@@ -108,12 +108,6 @@ public function getTemplateData(): array {
 
 		$data += $tools->getPageToolsData( $parentData );
 
-		// Show some portlet labels
-		// NOTE: This is only placed here temporarily
-		if ( $parentData['data-portlets']['data-variants']['is-empty'] === false ) {
-			$parentData['data-portlets']['data-variants']['has-label'] = true;
-		}
-
 		return array_merge( $parentData, $data );
 	}
 

@@ -89,6 +89,11 @@
 				background-color: var( --background-color-primary--active );
 			}
 		}
+
+		// Hide header menu labels
+		.citizen-menu__heading {
+			.mixin-screen-reader-text;
+		}
 	}
 
 	&__start,

@@ -1,14 +1,12 @@
 .citizen-menu {
 	&__heading {
-		&-label {
-			display: block;
-			padding: 0.625rem var( --space-md );
-			margin: 0;
-			color: var( --color-base--subtle );
-			font-size: inherit;
-			font-weight: var( --font-weight-normal );
-			letter-spacing: 0.05em;
-		}
+		display: block;
+		padding: 0.625rem var( --space-md );
+		margin: 0;
+		color: var( --color-base--subtle );
+		font-size: inherit;
+		font-weight: var( --font-weight-normal );
+		letter-spacing: 0.05em;
 	}
 }
 

@@ -112,6 +112,11 @@
 	.citizen-menu-checkbox-checkbox:checked ~ .page-actions__button {
 		background-color: var( --background-color-primary--active );
 	}
+
+	// Hide menu labels
+	> .citizen-menu > .citizen-menu__heading {
+		.mixin-screen-reader-text;
+	}
 }
 
 // Language counter badge

@@ -1,16 +1,13 @@
-{{!
-
-}}
-<nav id="{{id}}"{{#class}} class="{{.}}"{{/class}} {{{html-tooltip}}} {{{html-userlangattributes}}}>
-	{{#has-label}}
-	<label
-		id="{{id}}-label"
-		{{#aria-label}} aria-label="{{.}}"{{/aria-label}}
-		class="citizen-menu__heading{{#heading-class}} {{.}}{{/heading-class}}">
-		<span class="citizen-menu__heading-label">{{label}}</span>
-	</label>
-	{{/has-label}}
-	{{{html-before-portal}}}
-	<ul>{{{html-items}}}</ul>
-	{{{html-after-portal}}}
+{{!

+

+}}

+<nav id="{{id}}" class="citizen-menu{{#class}} {{.}}{{/class}}" {{{html-tooltip}}} {{{html-userlangattributes}}}>

+	{{#label}}

+	<div class="citizen-menu__heading{{#label-class}} {{.}}{{/label-class}}">

+		{{{.}}}

+	</div>

+	{{/label}}

+	{{{html-before-portal}}}

+	<ul>{{{html-items}}}</ul>

+	{{{html-after-portal}}}

 </nav>
\ No newline at end of file