크롬 HTML에서 전역 변수 사용하기,( 부제: CSP 에러 발생 - Refused to execute inline script)

예전 jquery를 쓰던 때를 생각하고 전역변수를 사용해보려 했다. 

<script>var data = @Html(Json.stringify(Json.toJson(title)));</script>

그러나, 크롬에서는 에러를 발생한다.

Refused to execute inline script because it violates the following Content Security Policy directive: "default-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-lfyc2lBqjP0Km9O0kTi2WbS/mSUMSiDX55goNiumC30='), or a nonce ('nonce-...') is required to enable inline execution. Note also that 'script-src' was not explicitly set, so 'default-src' is used as a fallback.

XSS 공격을 막는 크롬의 CSP 정책이다. 

https://developer.chrome.com/extensions/contentSecurityPolicy

결론은 meta 태그를 생성해 별의 별 짓을 했지만, 소용없었다. 처음부터 전역 변수를 사용하기 위해 인라인 스크립트를 쓰지 않는 것이 좋다.

=> common.js라는 파일에 자바 스크립트를 정의하고 호출하는 형태만 사용 가능하다. 

하지만.. input hidden을 사용하는 방식을 사용해서 전역 변수를 활용했다.

전역 변수로 쓰일 html 파일에는 다음과 같이 정의하고,

<input type="hidden" id="kemiTag" value="@kemiTag"/>

번들(분리된) java script 파일에는 document를 읽도록 했더니. 읽히긴 한다..

console.log(document.getElementById("serviceTag"))