fix: prevent XSS via innerHTML in browser tree and explain visualizer (#9865)

Use textContent instead of innerHTML when setting DOM element text
to prevent stored XSS through crafted PostgreSQL object names.

Author: asheshv

web/pgadmin/static/js/Explain/Graphical.jsx

@@ -96,13 +96,13 @@ PolyLine.propTypes = {
 
 function Multitext({currentXpos, currentYpos, label, maxWidth}) {
   const theme = useTheme();
-  let abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
+  const abc = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
   let xmlns = 'http://www.w3.org/2000/svg';
   let svgElem = document.createElementNS(xmlns, 'svg');
   svgElem.setAttributeNS(xmlns, 'height', '100%');
   svgElem.setAttributeNS(xmlns, 'width', '100%');
   let text = document.createElementNS(xmlns, 'text');
-  text.innerHTML = abc;
+  text.textContent = abc;
   text.setAttributeNS(xmlns, 'x', 0);
   text.setAttributeNS(xmlns, 'y', 0);
   let attributes={

web/pgadmin/static/js/components/PgTree/FileTreeX/index.tsx

@@ -458,7 +458,7 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
         if (typeof(label) == 'object' && label.label) {
           label = label.label;
         }
-        label$.innerHTML = label;
+        label$.textContent = label;
       }
 
     }
@@ -476,9 +476,9 @@ export class FileTreeX extends React.Component<IFileTreeXProps> {
         ref.style.background = 'none';
         const label$ = ref.querySelector('span.children-count') as HTMLDivElement;
         if(dir.children && dir.children.length > 0) {
-          label$.innerHTML = '(' + dir.children.length + ')';
+          label$.textContent = '(' + dir.children.length + ')';
         } else {
-          label$.innerHTML = '';
+          label$.textContent = '';
         }
       }
     }