Content Security Policy (CSP) 지시문 해결하기

 

현재 캡스톤 경진대회 고도화 작업을 하다가 다양한 오류를 접하고 있다. 

크롬 익스텐션 개발을 하고 있는데 크롬 익스텐션... 정말 오류 많이 생긴다. 

html prettier에서는 작동하지만 크롬익스텐션에 넣었을 때 안되는 상황이 너무 많다. 

 

이번에 생긴 오류는 CSP 오류였다.

약 8시간 동안 search 후.. 해결

문제가 생긴 곳은 바로 아래 toggleTable()이였다. 

 <button onclick="toggleTable()">제출</button>

 

오류가 발생하는 이유는 보안상의 이유로 인라인 핸들러의 실행을 제한한다고 한다. 

따라서 <button>의 요소에서 onclick의 속성들인 js코드들을 외부 JavaScript로 이동해야한다. 

• button의 onclick 속성을 제거하고 id를 만들어 요소를 추가한다

 <button id="submitBtn">제출</button>

• js 안에 toggleTable()함수를 호출한다. 

document.getElementById("submitBtn").addEventListener("click", toggleTable);

 

정리 : html 파일 안에 js function을 호출하는 것을 대신해 id,class만 js에서 부르고 그것을 통해 function을 호출하자!

... 간단했다. 가끔씩 이런 오류들을 잡는 것이 현타가 오면서 도움이 많이 되는거 같다.