Actualmente estoy desarrollando un sistema de registro e inicio de sesión con HTML, CSS, JavaScript y PHP.
Vencimiento
El usuario ingresa su correo electrónico y contraseña en los campos de entrada con estilo CSS de html. Ahora, si el usuario presiona el botón de inicio de sesión, JavaScript obtiene el correo electrónico y la contraseña del usuario de estos campos de entrada y llama al script login.php con los parámetros de correo electrónico y contraseña. El script PHP hace el trabajo principal y devuelve el acceso o la denegación de JavaScript. Por último, JavaScript muestra el error del usuario o otorga acceso según la respuesta del script PHP.
Detailsnippet de Javascript
function loginuser(email, password) { if (email || password) { query('./php/login.php', null, [['email', email], ['password', password]]).then(function(obj) { console.log("REPLY"); if (obj.error) { //ERROR } else { //ACCESS } }); } else { //PASSWORD , EMAIL CAN NOT BE EMPTY } } function query(url, cmd_type, data_array) { var request = new XMLHttpRequest(); var params= ''; params = params + 'cmdtype=' + encodeURIComponent(cmd_type) + '&'; if (data_array) { data_array.forEach(function(item) { if (Array.isArray(item[1])) { var serialized_tda = ''; item[1].forEach(function(tdai) { serialized_tda = serialized_tda + "|" + tdai[0] + "," + tdai[1] + "|"; }); params = params + item[0] + '=' + encodeURIComponent(serialized_tda) + '&'; } else { params = params + item[0] + '=' + encodeURIComponent(item[1]) + '&'; } }); } return new Promise(function(resolve, reject) { request.open('POST', url, true); request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); request.onreadystatechange = function() { if (request.readyState === XMLHttpRequest.DONE) { if (request.status === 200) { var response = JSON.parse(request.response); resolve(response); } else { resolve({error: 'Cant connect!'}); } } }; request.send(params); }); } Dudas - El problema
Como estoy llamando a un script con parámetros, se puede encontrar en la pestaña de red en la consola de desarrollo del navegador con todos los parámetros que envié. 
¿Desaparece esto cuando uso un certificado SSL en producción más adelante? ¿Tengo que cifrar los datos en JavaScript antes de poder enviarlos mediante parámetros a php o es normal?
y se te vio el contenido del paso 2
Como dice la respuesta anterior, las herramientas de desarrollo del navegador solo muestran lo que ve el navegador. Una vez que sale de su navegador a través de HTTPS, se cifra.
Ya no se recomienda cifrar las contraseñas en la aplicación antes de enviarlas porque siempre habrá algún otro compromiso de seguridad. Por ejemplo, esto se implementó en la autenticación HTTP Digest y el impacto fue tener que almacenar la contraseña sin cifrar en el servidor.
Envíe su contraseña como texto sin formato. Asegúrese de que su servidor solo acepte HTTPS (redireccionamiento permanente) y guárdelo en forma de hash en el servidor.
No, el uso de SSL no hará que esa información desaparezca de la pestaña Red en producción.
SSL encripta los datos entre el cliente (es decir, el usuario que inicia sesión) y el servidor que los maneja. Enviarlo en texto sin formato generalmente está bien, siempre que siempre se realice a través de HTTPS, ya que eso encriptará el tráfico y hará que no tenga sentido para cualquier ataque de rastreo.
Además, la información de la pestaña de red solo es visible para el cliente, quien ingresó la contraseña de todos modos (para que la conozcan), por lo que no debe considerarse una falla de seguridad con su aplicación.