Citizen allows stored XSS in user registration date message

@@ -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>

@@ -86,8 +86,14 @@ private function buildUserTagline(): string {
 		}
 
 		if ( is_string( $regDate ) ) {
-			$regDateTs = wfTimestamp( TS_UNIX, $regDate );
-			$msgRegDate = $localizer->msg( 'citizen-tagline-user-regdate', $this->pageLang->userDate( new MWTimestamp( $regDate ), $user ) );
+			$regDateTs = wfTimestamp( TS_ISO_8601, $regDate );
+			$regDateHtml = sprintf(
+				'<time class="citizen-user-regdate" datetime="%s">%s</time>',
+				$regDateTs,
+				$this->pageLang->userDate( new MWTimestamp( $regDate ), $user )
+			);
+
+			$msgRegDate = $localizer->msg( 'citizen-tagline-user-regdate', $regDateHtml );
 			$tagline .= "<span id=\"citizen-tagline-user-regdate\" data-user-regdate=\"$regDateTs\">$msgRegDate</span>";
 		}
 

@@ -52,14 +52,11 @@ private function getUserRegistration(): ?array {
 			return null;
 		}
 
-		$isAnniversary = substr( $timestamp, 4, 4 ) === substr( wfTimestampNow(), 4, 4 );
-
 		$html = sprintf(
-			'<time datetime="%s">%s</time>%s',
+			'<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 ),
-			$isAnniversary ? ' <span aria-label="anniversary">🎂</span>' : ''
+			$this->lang->userDate( $timestamp, $this->user )
 		);
 
 		return [

@@ -22,7 +22,8 @@
 		"es-x/no-rest-spread-properties": "warn",
 		"es-x/no-symbol-prototype-description": "warn",
 		"compat/compat": "warn",
-		"mediawiki/class-doc": "off"
+		"mediawiki/class-doc": "off",
+		"mediawiki/no-nodelist-unsupported-methods": "off"
 	},
 	"parserOptions": {
 		"ecmaVersion": 11,

@@ -0,0 +1,40 @@
+/**
+ * Various enhancements to the page content
+ */
+
+/**
+ * @return {void}
+ */
+function init() {
+	addUserAnniversary();
+}
+
+/**
+ * Append cake emoji to user registration date if it's the user's anniversary
+ *
+ * @return {void}
+ */
+function addUserAnniversary() {
+	document.querySelectorAll( '.citizen-user-regdate' ).forEach( ( date ) => {
+		const timestamp = date.getAttribute( 'datetime' );
+		const anniversary = new Date( timestamp );
+		const today = new Date();
+
+		if (
+			anniversary.getMonth() !== today.getMonth() ||
+			anniversary.getDate() !== today.getDate()
+		) {
+			return;
+		}
+
+		const cake = document.createElement( 'span' );
+		cake.textContent = ' 🎂';
+		cake.classList.add( 'citizen-user-regdate-anniversary' );
+		cake.setAttribute( 'aria-label', 'anniversary' );
+		date.insertAdjacentElement( 'beforeend', cake );
+	} );
+}
+
+module.exports = {
+	init: init
+};

@@ -196,7 +196,6 @@ function renderSearchClearButton( input ) {
  * @return {void}
  */
 function bindSearchTrigger( details ) {
-	// eslint-disable-next-line mediawiki/no-nodelist-unsupported-methods
 	document.querySelectorAll( '.citizen-search-trigger' ).forEach( ( trigger ) => {
 		trigger.addEventListener( 'click', () => openSearch( details ) );
 	} );

@@ -55,12 +55,15 @@ function registerServiceWorker() {
 function initBodyContent( bodyContent ) {
 	const
 		sections = require( './sections.js' ),
-		overflowElements = require( './overflowElements.js' );
+		overflowElements = require( './overflowElements.js' ),
+		contentEnhancements = require( './contentEnhancements.js' );
 
 	// Collapsable sections
 	sections.init( bodyContent );
 	// Overflow element enhancements
 	overflowElements.init( bodyContent );
+	// Content enhancements
+	contentEnhancements.init();
 }
 
 /**

@@ -151,6 +151,7 @@
 					"name": "resources/skins.citizen.scripts/config.json",
 					"callback": "MediaWiki\\Skins\\Citizen\\Hooks\\ResourceLoaderHooks::getCitizenResourceLoaderConfig"
 				},
+				"resources/skins.citizen.scripts/contentEnhancements.js",
 				"resources/skins.citizen.scripts/deferUntilFrame.js",
 				"resources/skins.citizen.scripts/dropdown.js",
 				"resources/skins.citizen.scripts/echo.js",