Cross-site Request Forgery (CSRF) issue with Axios, replace with fetch?

[alexbjorlig]

There is a new CSRF issue with Axios, check more here: https://security.snyk.io/vuln/SNYK-JS-AXIOS-6032459

Maybe it's time to switch Axios with fetch? Would also make it more easy to support different runtimes than Node.js - like Cloudflare workers.

[wangela]

If you would like to upvote the priority of this issue, please comment below or react on the original post above with :+1: so we can see what is popular when we triage.

@alexbjorlig Thank you for opening this issue. 🙏 Please check out these other resources that might help you get to a resolution in the meantime:

• Check the issue tracker - bugs and feature requests for Google Maps Platform APIs and SDKs
• Open a support case - Get 1:1 support in Cloud Console.
• Discord - chat with other developers
• StackOverflow - use the google-maps tag

This is an automated message, feel free to ignore.

[flashblaze]

@alexbjorlig did you resort to using fetch?

[alexbjorlig]

@flashblaze I reported this, because this repo is using Axios - not me 😎

[usefulthink]

That issue doesn't affect our library at all and only applies for usage of axios in the browser. However, we will still update to newer versions of axios as they become available.

[alexbjorlig]

100% - would be amazing if npm security audits were more intelligent, but well 😅

[iBobik]

That issue doesn't affect our library at all and only applies for usage of axios in the browser. @usefulthink

There still is an issue with other then Node and browser environments - Cloudlfare, Deno etc. where Axios does not work (and they are not interested in supporting it).

[iBobik]

Possible workaround is to use this library only for types, but send requests by anything our environment likes:

import { defaultUrl, PlaceAutocompleteRequest, PlaceAutocompleteResponseData } from '@googlemaps/google-maps-services-js/dist/places/autocomplete'

const { googleMapsApiKey } = useRuntimeConfig()

export default defineEventHandler<{ query: {
  input: string
  language: string
  sessionToken: string
} }>(async (event) => {
  const { input, language, sessionToken } = getQuery(event)

  try {
    const data = await $fetch<PlaceAutocompleteResponseData>(defaultUrl, {
      query: {
        input,
        language,
        key: googleMapsApiKey,
        sessiontoken: sessionToken,
      } as PlaceAutocompleteRequest['params']
    })
    if (data.status !== 'OK' && data.status !== 'ZERO_RESULTS')
      throw createError({ statusCode: 400, statusMessage: 'Bad Request' })

    return data
  }
  catch (err) {
    console.log(err)
    throw createError({ statusCode: 500, statusMessage: 'Internal Server Error' })
  }
})