Form body in a POST ending up as URL params?

cmflynn commented 4 years ago

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?

AmazingDreams commented 4 years ago

It seems to me that the browser (or some kind of bot perhaps) is in some rare cases submitting the form as a plain HTML form rather than going through your javascript handler. I don't think it's matomo or this plugin interfering in any way. You could maybe try adding method="POST" to your form so that sensitive data won't be added as query parameters at least

Cody Flynn notifications@github.com schreef op 14 mei 2020 18:00:46 CEST:

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?

-- You are receiving this because you are subscribed to this thread. Reply to this email directly or view it on GitHub: https://github.com/AmazingDreams/vue-matomo/issues/62

cmflynn commented 4 years ago

That makes sense. I'll close this issue, thanks for the help with this!

AmazingDreams commented 4 years ago

Just curious - did you manage to find the source of that issue?

AmazingDreams / vue-matomo

Form body in a POST ending up as URL params? #62