[Next.js]を使用して隠しAPIキーを書き換える
開発の際、外部APIを使うために、私のAPI鍵の情報を一緒に書く必要があります.
この露出を防ぐために特に注意しなければならない.Next.jsの
next.config.js | rewrites
次のコードはthemoviedb apiをインポートすることによって呼び出されます.開発者ツールの
すなわち、ユーザは、クライアントを介してapiおよび鍵の情報を表示することができ、これはセキュリティの面で望ましくない.
Rewrite Rewrite index.jsページで
https://nomadcoders.co/nextjs-fundamentals/lectures/3447
この露出を防ぐために特に注意しなければならない.Next.jsの
rewrites
を使用して、APIキーが非表示になります.next.config.js | rewrites
次のコードはthemoviedb apiをインポートすることによって呼び出されます.開発者ツールの
network
Tabを開くと、私のAPI KETの情報が暴露されていることがわかります.すなわち、ユーザは、クライアントを介してapiおよび鍵の情報を表示することができ、これはセキュリティの面で望ましくない.
export default function Home() {
const [movies, setMovies] = useState()
useEffect(() => {
(async () => {
const { results } = await (
await fetch(
`https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`
)
).json()
setMovies(results)
})()
}, [])
return (
...
)
}
Next.config.jsで書き換え設定を行います。
rewrites
属性には、要求パスを他の宛先パスにマッピングする設定オブジェクトを配列としてNextが含まれる.jsの設定プロパティ.rewrites
プロパティを使用する場合、urlリクエストを変更することはできません.開発者が指定したパスのみでアクセスできます.next.config.js
module.exports = {
images: {
domains: ['image.tmdb.org'],
},
async rewrites() {
return [
{
source: '/api/movies',
destination: `https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}`,
},
]
},
}
Rewrites
:(URLは変わらない)들어오는 request 경로
다른 destination 경로
매핑
URL 프록시 역할
,destination 경로를 mask
,사용자가 사이트에서 위치를 변경하지 않은 것처럼 보이게
./api/movies
が呼び出されると、https://api.themoviedb.org/3/movie/popular?api_key=${API_KEY}
にマッピングされ、apiキーが見えずにマスク処理が行われる.index.js
export default function Home() {
const [movies, setMovies] = useState()
useEffect(() => {
(async () => {
const { results } = await (
await fetch(
`/api/movies` // 이 부분을 rewrites 의 source에 있는 url과 동일하게 입력
)
).json()
setMovies(results)
})()
}, [])
return (
...
)
}
同様に、開発者ツールを開き、network
タブで検証すると、/api/moviesのUrlが変更されていることがわかります.REFERENCE
https://nomadcoders.co/nextjs-fundamentals/lectures/3447
Reference
この問題について([Next.js]を使用して隠しAPIキーを書き換える), 我々は、より多くの情報をここで見つけました https://velog.io/@godud2604/Next.js-rewrites-를-이용하여-API-Key-숨기기テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol