nextjs 파일 다운로드 링크 만들기

nextjs 에서 파일 다운로드 링크를 만들고 싶으면 아래와 같이 코드를 작성하면 됩니다.

 

<a href="/file.jpg" download>파일 다운로드</a>

a 태그를 사용할때 download를 추가하면 됩니다. “download=파일이름” 을 지정해서 다운로드할 파일 이름을 변경할 수도 있습니다.

하지만 이 방법은 다른 도메인에 있는 파일을 다운로드할 때는 동작하지 않습니다.

 

해결 방법

const request = require("request");

export default (req, res) => {
	const pipeline = promisify(stream.pipeline);
	
	export default async (req: NextApiRequest, res: NextApiResponse) => {
	  const id:string = req.query.id as string;
	  const url:string = getPath(id);
	
	  const response = await fetch(url);
	  if (!response.ok) throw new Error(`unexpected response ${response.statusText}`);
	
	  res.setHeader("content-disposition", "attachment; filename=" + url );
	  await pipeline(response.body, res); 
	}
}

이 문제를 해결하기 위해서는 API를 생성해야 합니다. Content-Disposition 헤더를 설정합니다.

/api/proxy?id=fileid와 같은 식으로 요청하면 파일이 다운로드 됩니다.

 

SSRF(Server-side Request Forgery) 공격

파일 URL을 직접 넘겨서 사용할 경우 SSRF(Server-side Request Forgery) 공격을 받을 수 있습니다.  파일 내부 경로로 접근할수도 있기 때문에 데이터 유출 위험이 있습니다.