Authorization header visible in static generation

[narduin]

Hello,

I'm extremely grateful for your module, thanks a lot.

I'm using it with a headless CMS (directus) and nuxt generate for a full static website. As I'm using nuxt generate, I thought a static header Bearer static_token with read only access would be enough.

While inspecting the generated code, I noticed that the graphql endpoint and all the conf is visible, including the authorization header.

I'm wondering if it's an expected behaviour or if I'm supposed to try and hide those informations, or if they should not be rendered at all as no communication is made between the website and the CMS (except during generate)…

Thanks!

[Gomah]

Hey @narduin,

Do you have a minimal codesandox reproduction?

I assume if you don't want to expose your Bearer token, you might have to manually set the Bearer token header using setHeader while building your static routes.

[narduin]

Hello!

I made this example: https://codesandbox.io/s/elastic-stonebraker-4nms1 There actually is no use of any graphql request but the endpoint and bearer can still be viewed when inspecting the generated files. I tried to put the token inside an environment variable but it still renders the same.

It's a read only token so I'm not really worried, just wondering if it's considered risky to expose the token or not :)

[nonlinearcom]

Hi, same case here on a SSR application + Directus :) Does anyone know a workaround for this issue?

Thanks!

[narduin]

Hey @nonlinearcom, I've been using this method on a couple of websites without any drawbacks so far:

• create a new role "read-only"
• allow read rights to every custom collections and to the Directus files collection (no app access)
• create a new user in directus
• give it the role of "read-only"
• create a token for it

The token is visible in the source code but it's just a read token so… I guess it's ok :)

[Slgoetz]

There is a real fix for this. You can remove the headers item from the graphql object in the nuxt config file, then place it under the privateRuntimeConfig object.

privateRuntimeConfig: {
      graphql: {
         clients: {
            craft: {
               endpoint: `${process.env.GRAPHQL_URL}/api/`,
               options: {
                  headers: {
                     Authorization: `Bearer ${process.env.AUTH_TOKEN}`,
                  },
               },
            },
         },
      },
   },

[narduin]

Thanks @Slgoetz for the suggestion, I have not been able to make your solution work though. How do you use graphql from the privateRuntimeConfig object?

[Slgoetz]

To make this work you need to have the graphlQL object in 2 places in the Nuxt config. You set the bones of it normally, however, all private items like the endpoints and the authorization headers are set in the privateRuntimeConfig like shown above. This way it injects those pieces for run and then doesn't save them to the nuxt build. Once again this is for static builds only.

[narduin]

Thanks for the explanation @Slgoetz, I did not understand this would not work while in dev mode. This does, however, work when the site is generated, thanks!

To recap:

// nuxt.config

// private graphql options (only working with generate)
// won't work with dev mode
privateRuntimeConfig: {
    graphql: {
        clients: {
            default: {
                endpoint: `${process.env.BASE_URL}/graphql`,
                options: {
                    headers: {
                        authorization: `Bearer ${process.env.API_TOKEN}`,
                    },
                },
            },
        },
    },
},

[...]

// an empty graphql object to initialize it
graphql: {
    clients: {
        default: {},
    },
},

[Slgoetz]

It should still work on dev.