Next.js로 크롬 익스텐션 빌드시 CSP에러

Next.js에 익숙해질 겸 크롬 익스텐션에 사용할 웹파일을 Next.js로 빌드해서 정적 파일로 export 했다.

그런데 익스텐션의 default_popup으로 등록한 스크립트가 실행되다가 도중에 멈췄다.

에러 예시

아래는 크롬이 보여준 오류다

에러

 

크롬 익스텐션에서 "inline script" 에러는 보안 정책 때문에 발생한다.

크롬 익스텐션의 Content Security Policy (CSP)는 기본적으로 인라인 스크립트의 실행을 허용하지 않는다.

Next.js가 빌드 과정에서 인라인 스크립트를 생성한것으로 보고 export된 파일을 확인해보았다.

export된 정적페이지 (app)

 

export된 정적페이지 (pages)

 

확인해본 결과 13버전에 업데이트 된 `app` 디렉토리 구조를 사용할때 export된 html 하단에 인라인 스크립트가 삽입되는 현상을 확인했다.

최신 업데이트된 기능을 사용해보고 싶어서 app 디렉토리를 채택했지만 역시 막 업데이트 된 내용을 간단히 적용하는건 위험한 선택인것 같다.

 

보안 정책과의 충돌을 피하기 위해 Next.js의 설정과 익스텐션의 CSP 설정을 조정하여 인라인 스크립트를 허용할 수도 있지만 가능하면 인라인 스크립트를 사용하지 않는 방향으로 개발하는것이 좋다고 생각해서 채택하지 않았다.

 

크롬 익스텐션을 빌드할때는 `pages` 디렉토리 구조를 사용하도록 하자