Our stack:
- Vue.js frontend using vuetify component lib
- custom python middleware rest api using flask + tornado
- matomo running externally and connected to the frontend using vues plugin system.(https://github.com/AmazingDreams/vue-matomo)
We recently added matamo to our site and very very rarely we’ve noticed 4 incidents out of thousands of users where the username/password which is submitted via POST request to our middleware is ending up being logged in matomo as https://somesite.com?username=someUser&password=somePassword.
Strangely enough the actual route to login is at somesite.com/login so its weird matamo sees it on the homepage.
Here’s the code we use for logging users in:
auth.js
const authenicateUser = async (username, password) => { const body = { username: username, password: password } const headers = new Headers() headers.append('Content-Type', 'application/json') headers.append('Accept', 'application/json') try { const response = await fetch('https://somesite.com/users/login', { method: 'POST', ...(body ? { body: JSON.stringify(body) } : {}), cache: 'no-store', credentials: 'include', // this is to allow cross origin requests to our middleware microservice headers: headers }) return response } catch (error) { return false } }
login form
<v-form @submit.prevent="submit" @keyup.native.enter="submit" id="check-login-form"> <v-text-field class="input-field" label="MS ID" v-model="username" name="username" data-cy="userName" prepend-icon="mdi-account" type="text" color="rgb(232, 119, 34)" /> <div class="password-field"> <v-text-field class="input-field" id="password" data-cy="userPassword" label="Password" v-model="password" name="password" prepend-icon="mdi-lock" :type="showPassword ? 'text' : 'password'" @click:append="showPassword = !showPassword" color="rgb(232, 119, 34)" ></v-text-field> <div v-if="showPassword" class="icon-container" v-on:click="toggleShowPassword"> <img src="~assets/Icons/View.svg" class="eye-icon" /> </div> <div v-else class="icon-container" v-on:click="toggleShowPassword"> <img src="~assets/Icons/ViewHide.svg" class="eye-icon" /> </div> </div> </v-form>
submit method
async submit() { this.isLoading = true const response = await authenticateUser(this.username, this.password) this.statusCode = response.status this.currentStatusCode = this.statusCode if (this.statusCode === 200) { this.currentStatusCode = this.statusCode this.$router.push('/') this.isLoading = false this.$matomo.setUserId(this.username) } else { this.isLoading = false this.currentStatusCode = null this.showPassword = false } }, toggleShowPassword: function() { this.showPassword = !this.showPassword } },
Any ides on why this might be happening?
Advertisement
Answer
We ended up resolving this by adding the method="POST"
attr to <v-form>
. turned out in some rare cases the form would try to submit as GET which resulted in the form params ending up in the URL as URL params.
<v-form method="POST" enctype="text/plain" @submit.prevent="submit" @keyup.native.enter="submit" id="check-login-form" >...</v-form>