[넥사크로N] 콘텐츠 보안 정책(CSP) 헤더가 설정되지 않음, Content Security Policy (CSP) Header Not Set

728x90

상황

넥사크로 프로젝트 수행 중 헤더에 csp(Content Security Policy)가 설정되지 않았다고 감리지적사항으로 올라왔다

Content Security Policy (CSP) is an added layer of security that helps to detect and mitigate certain types of attacks, including Cross Site Scripting (XSS) and data injection attacks. These attacks are used for everything from data theft to site defacement or distribution of malware. CSP provides a set of standard HTTP headers that allow website owners to declare approved sources of content that browsers should be allowed to load on that page — covered types are JavaScript, CSS, HTML frames, fonts, images and embeddable objects such as Java applets, ActiveX, audio and video files.

CSP(Content Security Policy)는 XSS(사이트 간 스크립팅) 및 데이터 주입 공격을 비롯한 특정 유형의 공격을 탐지하고 완화하는 데 도움이 되는 추가 보안 계층입니다. 이러한 공격은 데이터 도난에서 사이트 손상 또는 악성 프로그램 배포에 이르기까지 모든 것에 사용됩니다. CSP는 웹사이트 소유자들이 브라우저가 해당 페이지에 로드할 수 있도록 허용된 콘텐츠의 승인된 소스를 선언할 수 있게 해주는 표준 HTTP 헤더 세트를 제공한다.

넥사크로에서 만들어진 index.html을 보면 csp설정이 없다.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang='ko'> <!-- LANGUAGE : locale setting (value of location property in Environment) --> 
<head> 
<meta http-equiv="X-UA-Compatible" content="IE=Edge"> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
<meta name="viewport" content="user-scalable=1, initial-scale=0.1, width=device-width, target-densitydpi=device-dpi"> 
<!-- META_CHECKVERSION : Add if value of checkversion property in Envrionment is true --> 


<!-- FAVICON_ICON : favion setting (value of icon property in Environment. add to value of icon property in Environment) --> 


<!-- USERFONT_STYLE : userfont style setting (value of userfontid property in Environment. crate contents contained in xfont file specified userfontid property in Environment) --> 


<!-- FRAMEWORK_LIBRARY : framework lodaing path (list of scripts files in the Framework.json file) --> 
 <script type="text/javascript" src="./nexacro17lib/framework/SystemBase.js"></script>

넥사크로는 빌드(generate)하면 index.html이 생성되는데 이 자동으로 생성되는 html 헤더에 csp를 줘야된단 소린데.. 방법이 없을까?

처리방법

Bootstrap Customize

스튜디오 메뉴에서 Generate > Bootstrap Customize 를 선택한다.

Bootstrap Customize 팝업이 열리면 아래와 같이 헤더에 csp를 설정을 넣어준다.

CSP 설정

<meta http-equiv="Content-Security-Policy" content="img-src *; font-src *;">

전체코드

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html #{LANGUAGE}> <!-- LANGUAGE : locale setting (value of location property in Environment) -->
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="user-scalable=1, initial-scale=0.1, width=device-width, target-densitydpi=device-dpi">
	
    <meta http-equiv="Content-Security-Policy" content="img-src *; font-src *;">
	
	<!-- META_CHECKVERSION : Add if value of checkversion property in Envrionment is true -->
	#{META_CHECKVERSION}
	
	<!-- FAVICON_ICON : favion setting (value of icon property in Environment. add to value of icon property in Environment) -->
	#{FAVICON}
	
	<!-- USERFONT_STYLE : userfont style setting (value of userfontid property in Environment. crate contents contained in xfont file specified userfontid property in Environment) -->
	#{USERFONT_STYLE}
	
	<!-- FRAMEWORK_LIBRARY : framework lodaing path (list of scripts files in the Framework.json file) -->
	#{FRAMEWORK_LIBRARY}
	
	<!-- COMPONENTS_LIBRARY : commonent lodaing path (list of script file in json file specified in the TypeDefinition module) -->
	#{COMPONENTS_LIBRARY}
	<!-- ENVIRONMENT_LIBRARY : application environment path (path of Environment.xml.js) -->
	#{ENVIRONMENT_LIBRARY}
	
	<title></title>
</head>
<body style="margin:0;border:none;-ms-touch-action:none;" onload="oninitframework()">
	<script>
		function oninitframework()
		{
			nexacro._launch_screenid = "Desktop_screen_classic";
			<!-- SCREEN_INFORMATION : create screen information defined in Environment > ScreenDefinition -->
			var screeninfo = [
#{SCREEN_INFORMATION}
			];

			nexacro._initHTMLSysEvent(window, document);
			nexacro._initEnvironment(screeninfo);
			<!-- create internal iframe -->
			<!-- USERFONT_INFORMATION : userfontid property is specified in the Environment -->
			nexacro._prepareManagerFrame(onloadframework#{USERFONT_INFORMATION});
		}
		function onloadframework()
		{
			<!-- application loading -->
			nexacro._loadADL();
		}
		function onfinalframework()
		{
			<!-- application exit -->
		}
	</script>
</body>
</html>

속성
default-src : 모든 리소스에 대한 정책(아래 것들 다 포함)
script-src : Javascript 등 웹에서 실행 가능한 스크립트에 대한 정책
object-src : 플러그인, 오브젝트에 대한 정책
style-src : style, 즉 css에 대한 정책
img-src : 이미지
media-src : video, audio
frame-src : iframe, X-Frame 헤더랑은 비슷한 역할을 하지만 약간 다르다.
font-src : font
connect-src : script src로 불러올 수 있는 url에 대한 정책
form-action : form 태그 내 action 부분에 대한 정책
sandbox : HTML 샌드박스
script-nonce : 위에 script-src + 아래쪽에 none 이 포함되는 정책(좀 더 빡센 느낌)
plugin-types : 로드할 수 있는 플러그인 타입, 위에 object-src와 접점
reflected-xss : X-XSS-Protection header와 동일한 효과
report-uri : 정책 위반 케이스가 나타났을 때 내용을 전달할 URL

값
*: 모든 것을 허용
'none': 아무것과도 일치하지 않는다.
'self': 현재 출처와 일치하지만 하위 도메인은 일치하지 않는다.
'unsafe-inline': 인라인 자바스크립트 및 CSS를 허용한다.
'unsafe-eval': eval 같은 텍스트-자바스크립트 메커니즘을 허용한다.

출처 - Dominic Repo님 블로그
https://dominicsecurity.tistory.com/m/67
출처 - Mdn web docs 참고
https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP

확인

Bootstrap Customize로 헤더에 csp 설정 후 빌드하고 실행해보면 아래처럼 csp가 헤더에 적용된걸 확인 할 수있다.
확실하게 하려면 default-src, script-src...등등 속성을 설정하고, 각 속성별로 self, unsafe-inline, unsafe-hashes등 알맞게 값을 설정하면 된다.

728x90

저작자표시 변경금지

상황

처리방법

Bootstrap Customize

확인

티스토리툴바