Password inputs do not synchronize the value attribute

packages/react-dom/src/__tests__/ReactDOMInput-test.js

@@ -1433,6 +1433,40 @@ describe('ReactDOMInput', () => {
       expect(node.getAttribute('value')).toBe('2');
     });
 
+    it('does not set the value attribute on password inputs', () => {
+      const Input = getTestInput();
+      const stub = ReactTestUtils.renderIntoDocument(
+        <Input type="password" value="1" />,
+      );
+      const node = ReactDOM.findDOMNode(stub);
+
+      expect(node.hasAttribute('value')).toBe(false);
+      expect(node.value).toBe('1');
+    });
+
+    it('does not update the value attribute on password inputs', () => {
+      const Input = getTestInput();
+      const stub = ReactTestUtils.renderIntoDocument(
+        <Input type="password" value="1" />,
+      );
+      const node = ReactDOM.findDOMNode(stub);
+
+      ReactTestUtils.Simulate.change(node, {target: {value: '2'}});
+
+      expect(node.hasAttribute('value')).toBe(false);
+      expect(node.value).toBe('2');
+    });
+
+    it('does not set the defaultValue attribute on password inputs', () => {
+      const stub = ReactTestUtils.renderIntoDocument(
+        <input type="password" defaultValue="1" />,
+      );
+      const node = ReactDOM.findDOMNode(stub);
+
+      expect(node.hasAttribute('value')).toBe(false);
+      expect(node.value).toBe('1');
+    });
+
     it('does not set the value attribute on number inputs if focused', () => {
       const Input = getTestInput();
       const stub = ReactTestUtils.renderIntoDocument(

packages/react-dom/src/__tests__/ReactDOMServerIntegrationForms-test.js

@@ -96,6 +96,50 @@ describe('ReactDOMServerIntegration', () => {
           expect(e.getAttribute('defaultValue')).toBe(null);
         },
       );
+
+      itClientRenders(
+        'a password input hydrates client-side with the value prop',
+        async render => {
+          const e = await render(
+            <input type="password" value="foo" readOnly={true} />,
+            0,
+          );
+
+          expect(e.value).toBe('foo');
+          expect(e.hasAttribute('value')).toBe(false);
+        },
+      );
+
+      itClientRenders(
+        'a password input hydrates client-side with the defaultValue prop',
+        async render => {
+          const e = await render(
+            <input type="password" defaultValue="foo" readOnly={true} />,
+            0,
+          );
+
+          expect(e.value).toBe('foo');
+          expect(e.hasAttribute('value')).toBe(false);
+        },
+      );
+
+      it('will not render the value prop server-side', async () => {
+        const e = await serverRender(
+          <input type="password" value="foo" readOnly={true} />,
+        );
+
+        expect(e.value).toBe('');
+        expect(e.hasAttribute('value')).toBe(false);
+      });
+
+      it('will not render the defaultValue prop server-side', async () => {
+        const e = await serverRender(
+          <input type="password" defaultValue="foo" readOnly={true} />,
+        );
+
+        expect(e.value).toBe('');
+        expect(e.hasAttribute('value')).toBe(false);
+      });
     });
 
     describe('checkboxes', function() {
@@ -540,6 +584,20 @@ describe('ReactDOMServerIntegration', () => {
             <input defaultValue="Hello" />,
           ));
 
+        it('should not blow away user-entered text on successful reconnect to an uncontrolled password input', () =>
+          testUserInteractionBeforeClientRender(
+            <input type="password" defaultValue="Hello" />,
+            '',
+            'Hello',
+          ));
+
+        it('should not blow away user-entered text on successful reconnect to an controlled password input', () =>
+          testUserInteractionBeforeClientRender(
+            <input type="password" value="Hello" readOnly={true} />,
+            '',
+            'Hello',
+          ));
+
         it('should not blow away user-entered text on successful reconnect to a controlled input', async () => {
           let changeCount = 0;
           await testUserInteractionBeforeClientRender(

packages/react-dom/src/client/ReactDOMFiberInput.js

@@ -218,7 +218,9 @@ export function postMountWrapper(element: Element, props: Object) {
     // value must be assigned before defaultValue. This fixes an issue where the
     // visually displayed value of date inputs disappears on mobile Safari and Chrome:
     // https://github.com/facebook/react/issues/7233
-    node.defaultValue = '' + node._wrapperState.initialValue;
+    if (props.type !== 'password') {
+      node.defaultValue = '' + node._wrapperState.initialValue;
+    }
   }
 
   // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
@@ -304,16 +306,24 @@ export function setDefaultValue(
   type: ?string,
   value: *,
 ) {
-  if (
-    // Focused number inputs synchronize on blur. See ChangeEventPlugin.js
-    type !== 'number' ||
-    node.ownerDocument.activeElement !== node
-  ) {
-    if (value == null) {
-      node.defaultValue = '' + node._wrapperState.initialValue;
-    } else if (node.defaultValue !== '' + value) {
-      node.defaultValue = '' + value;
-    }
+  if (type === 'password') {
+    // Do not synchronize password inputs to prevent password from
+    // being exposed in markup
+    // https://github.com/facebook/react/issues/11896
+    return;
+  }
+
+  // Only assign the value attribute on number inputs when they are not selected
+  // This avoids edge cases in Chrome. Number inputs are synchronized on blur.
+  // See ChangeEventPlugin.js
+  if (type === 'number' && node.ownerDocument.activeElement === node) {
+    return;
+  }
+
+  if (value == null) {
+    node.defaultValue = '' + node._wrapperState.initialValue;
+  } else if (node.defaultValue !== '' + value) {
+    node.defaultValue = '' + value;
   }
 }
 

packages/react-dom/src/server/ReactPartialRenderer.js

@@ -326,6 +326,7 @@ function createOpenTagMarkup(
   isRootElement: boolean,
 ): string {
   let ret = '<' + tagVerbatim;
+  const isPasswordInput = tagLowercase === 'input' && props.type === 'password';
 
   for (const propKey in props) {
     if (!props.hasOwnProperty(propKey)) {
@@ -335,6 +336,13 @@ function createOpenTagMarkup(
     if (propValue == null) {
       continue;
     }
+    // Do not render values for password inputs
+    if (
+      isPasswordInput &&
+      (propKey === 'value' || propKey === 'defaultValue')
+    ) {
+      continue;
+    }
     if (propKey === STYLE) {
       propValue = createMarkupForStyles(propValue);
     }