Prevent secret values from leaking into the DOM when concealed

adifsgaid · adifsgaid · commit 038473c722ca · 2026-03-26T15:38:57.000+01:00
The conceal mechanism used a custom dot font to visually mask secret
values, but the actual plaintext remained in the DOM. Selecting text
(Ctrl+A or mouse selection) and copying would expose the real secret
values.

Replace the dot-font approach with a static placeholder that never
renders real values in the DOM when concealed. Add unit tests for
both KeyValue and DetailText components to verify secret values
are not present in rendered HTML when concealment is active.
diff --git a/shell/components/DetailText.vue b/shell/components/DetailText.vue
@@ -187,10 +187,9 @@ export default {
     >{{ body }}</span>
 
     <CodeMirror
-      v-else-if="jsonStr"
+      v-else-if="jsonStr && !concealed"
       :options="{mode:{name:'javascript', json:true}, lineNumbers:false, foldGutter:false, readOnly:true}"
       :value="jsonStr"
-      :class="{'conceal': concealed}"
       aria-live="polite"
     />
 
@@ -199,9 +198,16 @@ export default {
       :class="{'conceal-wrapper': concealed}"
     >
       <span
+        v-if="concealed"
+        data-testid="detail-top_html"
+        class="conceal"
+        aria-live="polite"
+      >&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;</span>
+      <span
+        v-else
         v-clean-html="bodyHtml"
         data-testid="detail-top_html"
-        :class="{'conceal': concealed, 'monospace': monospace && !isBinary}"
+        :class="{'monospace': monospace && !isBinary}"
         aria-live="polite"
       />
     </div>
diff --git a/shell/components/__tests__/DetailText.test.ts b/shell/components/__tests__/DetailText.test.ts
@@ -0,0 +1,113 @@
+import { mount } from '@vue/test-utils';
+
+import DetailText from '@shell/components/DetailText.vue';
+
+jest.mock('@shell/utils/clipboard', () => ({ copyTextToClipboard: jest.fn() }));
+
+describe('component: DetailText', () => {
+  const defaultMocks = {
+    $store: {
+      getters: {
+        'i18n/t':    jest.fn((key: string) => `%${ key }%`),
+        'prefs/get': jest.fn(() => true),
+      }
+    }
+  };
+
+  describe('concealment', () => {
+    it('should not render the actual secret value in the content area when concealed', () => {
+      const secretValue = 'super-secret-password-xyz';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   secretValue,
+          conceal: true,
+          label:   'Password',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain(secretValue);
+    });
+
+    it('should render the actual value when not concealed', () => {
+      const visibleValue = 'visible-value-123';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   visibleValue,
+          conceal: false,
+          label:   'Data',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html': (el: HTMLElement, binding: { value: string }) => {
+              el.innerHTML = binding.value;
+            },
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const contentSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(contentSpan.exists()).toBe(true);
+      expect(contentSpan.classes()).not.toContain('conceal');
+    });
+
+    it('should not render JSON secret values in CodeMirror when concealed', () => {
+      const jsonSecret = '{"api_key": "secret-key-123"}';
+      const wrapper = mount(DetailText, {
+        props: {
+          value:   jsonSecret,
+          conceal: true,
+          label:   'Config',
+        },
+
+        global: {
+          mocks:      defaultMocks,
+          directives: {
+            'clean-html':    () => {},
+            'clean-tooltip': () => {},
+            t:               () => {},
+          },
+          stubs: {
+            CopyToClipboard: true,
+            CodeMirror:      true,
+          },
+        },
+      });
+
+      const codeMirror = wrapper.findComponent({ name: 'CodeMirror' });
+
+      expect(codeMirror.exists()).toBe(false);
+
+      const concealedSpan = wrapper.find('[data-testid="detail-top_html"]');
+
+      expect(concealedSpan.exists()).toBe(true);
+      expect(concealedSpan.classes()).toContain('conceal');
+      expect(concealedSpan.text()).not.toContain('secret-key-123');
+    });
+  });
+});
diff --git a/shell/components/form/KeyValue.vue b/shell/components/form/KeyValue.vue
@@ -778,11 +778,18 @@ export default {
                     @onInput="onInputMarkdownMultiline(i, $event)"
                     @onFocus="onFocusMarkdownMultiline(i, $event)"
                   />
+                  <div
+                    v-else-if="valueConcealed"
+                    class="concealed-value conceal"
+                    data-testid="concealed-value"
+                    :aria-label="t('generic.ariaLabel.value', {index: i+1})"
+                  >
+                    &#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;&#8226;
+                  </div>
                   <TextAreaAutoGrow
                     v-else-if="valueMultiline && row[valueName] !== undefined"
                     v-model:value="row[valueName]"
                     data-testid="value-multiline"
-                    :class="{'conceal': valueConcealed}"
                     :disabled="disabled"
                     :mode="mode"
                     :placeholder="_valuePlaceholder"
@@ -941,6 +948,12 @@ export default {
         padding: 10px 10px 10px 10px;
       }
 
+      .concealed-value {
+        padding: 10px;
+        min-height: 40px;
+        user-select: none;
+      }
+
       .text-monospace:not(.conceal) {
         font-family: monospace, monospace;
       }
diff --git a/shell/components/form/__tests__/KeyValue.test.ts b/shell/components/form/__tests__/KeyValue.test.ts
@@ -177,6 +177,72 @@ describe('component: KeyValue', () => {
     expect(firstValueInput.element.value).toBe('testvalue1');
   });
 
+  describe('valueConcealed', () => {
+    it('should not render actual secret values in the DOM when valueConcealed is true', () => {
+      const secretValue = 'super-secret-api-key-12345';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: secretValue },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(true);
+      expect(wrapper.html()).not.toContain(secretValue);
+    });
+
+    it('should render a TextAreaAutoGrow with the real value when valueConcealed is false', () => {
+      const secretValue = 'visible-value';
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { myKey: secretValue },
+          mode:           'view',
+          valueConcealed: false,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.exists()).toBe(false);
+
+      const multilineEl = wrapper.find('[data-testid="value-multiline"]');
+
+      expect(multilineEl.exists()).toBe(true);
+    });
+
+    it('should have user-select none on the concealed placeholder to prevent text selection', () => {
+      const wrapper = mount(KeyValue, {
+        props: {
+          value:          { mySecret: 'secret' },
+          mode:           'view',
+          valueConcealed: true,
+        },
+
+        global: {
+          mocks: { $store: { getters: { 'i18n/t': jest.fn() } } },
+          stubs: { CodeMirror: true },
+        },
+      });
+
+      const concealedEl = wrapper.find('[data-testid="concealed-value"]');
+
+      expect(concealedEl.classes()).toContain('concealed-value');
+    });
+  });
+
   it('a11y: adding ARIA props should correctly fill out the appropriate fields on the component', async() => {
     const value = [{ key: 'testkey1', value: 'testvalue1' }];
 
