Блог

Главная - Вопросы по программированию - Видимость токена в Next.js

Видимость токена в Next.js

#javascript #reactjs #graphql #next.js #frontend

Вопрос:

Является ли токен запроса на извлечение в next.js приложение, видимое пользователю на стороне клиента?

Я должен подготовить приложение с использованием API GitHub GraphQL. Я думал об использовании запроса на извлечение с токеном на предъявителя для него, но у меня есть сомнения в безопасности и хороших практиках в моем приложении.

      fetch((`https://api.github.com/graphql`, {
            method: 'POST',
            headers: {
                "Content-Type": 'application/json',
                'Authorization': 'Bearer '   TOKEN,
            },
            body: JSON.stringify({
                query: `
                {
                    search(query: "is:public", type: REPOSITORY, first: 10) {
                      repositoryCount
                      pageInfo {
                        endCursor
                        startCursor
                      }
                      edges {
                        node {
                          ... on Repository {
                            name
                          }
                        }
                      }
                    }
                  }
            `
            })
        }))

Комментарии:

1. Если вы делаете это на интерфейсе, как предполагает ваш тег, то токен может быть перехвачен

2. Это зависит от того, откуда вы делаете запрос. Если запрос сделан внутри getStaticProps / getServerSideProps или по маршруту API, запрос (и токен) не будут видны клиенту. Если это будет сделано на стороне клиента useEffect , то это будет видно.

Ответ №1:

В соответствии с Next.js документы, вам нужно создать .env.local файл в корневом каталоге проекта и добавить секреты.

При добавлении секретов вам нужно добавить к секрету префикс NEXT_PUBLIC_ , чтобы открыть его для браузера. Например:

     NEXT_PUBLIC_GITHUB_TOKEN=amogussus

Согласно документам:

Значение будет встроено в JavaScript, отправленное в браузер из-за NEXT_PUBLIC_ префикса.

Затем вы можете добавить его в свой код с помощью process.env.NEXT_PUBLIC_GITHUB_TOKEN

Метки: