>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3570439. --> Reported by: [bluegeek9](https://www.drupal.org/user/1286304) Related to !22 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>The JavaScript validation code uses <code>innerHTML</code> to insert an error message. While the content comes from <code>Drupal.t()</code> which should be safe, using <code>innerHTML</code> is generally discouraged as it can introduce XSS vulnerabilities if the translation system is ever compromised or if translation strings include dynamic content.</p> <p>Location: <code>js/primary-selection.js</code>, line 223</p> <h4 id="summary-current-code">Current Code</h4> <pre><pre>errorContainer.innerHTML = `&lt;div class="messages__content"&gt;${Drupal.t(<br>&nbsp; 'Please select a primary item before saving.',<br>)}&lt;/div&gt;`;</pre></pre><h4 id="summary-risk-assessment">Risk Assessment</h4> <ul> <li><strong>Current Risk:</strong> Very low - The string is static and translated through <code>Drupal.t()</code></li> <li><strong>Future Risk:</strong> Could become an issue if: <ul> <li>Translation strings ever include user-provided content</li> <li>The translation system is compromised</li> <li>Code is copied/modified without understanding the security implications</li> </ul> </li> <li><strong>Best Practice:</strong> Avoid <code>innerHTML</code> when <code>textContent</code> or DOM manipulation suffices</li> </ul> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Replace <code>innerHTML</code> usage with proper DOM element creation using <code>textContent</code>. This follows security best practices and prevents any possibility of XSS injection.</p> <h4>Recommended Implementation</h4> <pre><pre>// Create the message content element<br>const messageContent = document.createElement('div');<br>messageContent.className = 'messages__content';<br>messageContent.textContent = Drupal.t(<br>&nbsp; 'Please select a primary item before saving.',<br>);<br><br>// Clear and append to container<br>errorContainer.innerHTML = '';<br>errorContainer.appendChild(messageContent);</pre></pre><h4>Alternative Approaches</h4> <p><strong>Option 1:</strong> Use <code>textContent</code> directly on container (simpler but loses wrapper div)</p> <pre><pre>errorContainer.textContent = Drupal.t(<br>&nbsp; 'Please select a primary item before saving.',<br>);</pre></pre><p><strong>Option 2:</strong> Use <code>createTextNode</code> (more explicit but more verbose)</p> <pre><pre>const messageContent = document.createElement('div');<br>messageContent.className = 'messages__content';<br>messageContent.appendChild(<br>&nbsp; document.createTextNode(Drupal.t('Please select a primary item before saving.'))<br>);<br>errorContainer.innerHTML = '';<br>errorContainer.appendChild(messageContent);</pre></pre><p>The recommended implementation (using <code>textContent</code> with element creation) provides the best balance of security, readability, and maintaining the expected HTML structure.</p> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <ul> <li>Replace <code>innerHTML</code> with DOM element creation and <code>textContent</code></li> <li>Test the error message display still works correctly</li> <li>Test the error message styling is preserved (CSS should still apply)</li> <li>Review other JavaScript files for similar <code>innerHTML</code> usage</li> <li>Consider adding ESLint rule to prevent future <code>innerHTML</code> usage</li> <li>Update JavaScript coding standards documentation if needed</li> </ul> <h3 id="summary-ui-changes">User interface changes</h3> <p>None. The error message will look identical to users. This is an internal implementation change that maintains the same visual output.</p> <h3 id="summary-api-changes">API changes</h3> <p>None</p> <h3 id="summary-data-model-changes">Data model changes</h3> <p>None</p>