Cilent-Side Script, Server-Side Script에 대한 이해

Client-Side Sciprt와 Server-Side Script에 대한 이해

해당 실습을 진행하기 전 XAMPP를 설치해야 하는데, XAMPP 설치는 여기를 참고한다.

XAMPP 설치 후 C:\xampp\htdocs\example 경로에 test1.php 파일을 생성한다.

test1.php는 서버 측에서 실행되는 Server-Side Script로 만들어진 파일이다.

 

< test1.php >

<?php

	echo "test";
	
?>

 

 

해당 파일의 코드를 작성 후 127.0.0.1/example/test1.php 접속 시 웹 브라우저에서 아래와 같이 확인이 가능하다.

그림1 - test1.php(1)

그림2 - test1.php(1) 소스보기

test1.php 동적 자원을 호출하였더니, test 라는 문자열이 출력되었다.

소스 보기를 통해 확인해도 test 라는 문자열만 확인이 된다.

 

test1.php에는 echo "test"라는 코드를 작성하였는데 왜 test 라는 문자열만 출력되는 걸까?

echo 함수는 php에서 문자를 출력해주는 함수로 서버에서 echo 함수를 해석하여 test 문자열만 출력된 것이다.

 

클라이언트 측에서는 Server-Side Script로 작성된 코드를 확인할 수 없다.

만약 Client-Side Script 를 해당 코드에 추가하면 어떻게 인식될까?

 

 

< test1.php >

<?php

	echo "<b>test</b>";
	
?>

 

HTML <b> 태그를 사용하여 볼드 처리(굵게) 하였다.

웹 브라우저에서는 아래와 같이 확인된다.

그림3 - test1.php(2)

그림4 - test1.php(2) 소스보기

<b> 태그는 Client-Side Script 이기 때문에 웹 브라우저 인터페이스에서는 해석이 되어 test 문자열이 굵게 변하였다.

소스보기를 통해 확인한 결과, <b> 태그는 Client-Side Script 이기 때문에 Apache 웹 서버에서는 이를 해석하지 못하므로 코드 그대로 반환하였다.

 

 

 

 

JavaSciprt로 구구단 2단 코드 작성

php로 구구단 2단 코드 작성

<script>
var x = 2;
document.write("<b>>> Client-Side Script</b><br>");
for(var i=1; i<10; i++) {
	document.write(x + "x" + i + "=" + x*i + "<br>");
}
</script>


<?php
echo "<b>>> Server-Side Script</b><br>";
$x = 2;
for($i=1; $i<10; $i++) {
	$y = $x*$i;
	$result = "{$x}x{$i}={$y}<br>";
	echo $result;
}	
?>

 

코드 작성 후 127.0.0.1/example/test1.php 접속 시 웹 브라우저에서 아래와 같이 확인이 가능하다.

그림5 - test1.php(3)

그림6 - test1.php(3) 소스보기

test1.php가 웹 서버에서 기동되고 결과값을 반환한다.

JavaScript로 작성한 코드가 먼저 작성되어 있더라도, 웹 서버에서는 해석이 되지 않아 그대로 반환한다.

php로 작성한 코드는 웹 서버에서 해석하여 컴파일 한다.

 

웹 브라우저에서 웹 서버의 응답값을 받아서 출력하게되면, JavaScript로 작성된 코드가 해석되어 출력된다.

php로 작성된 코드도 웹 서버에서 해석하여 반환한 값을 그대로 출력하게 된다.

 

test1.php 페이지의 소스보기를 확인 시, Client-Side Script로 작성된 코드(JavaScript)는 웹 서버에서 해석하지 못해 코드 그대로 반환되며, Server-Side Sciprt로 작성된 코드(php)는 웹 서버에서 해석되어 결과값이 반환되는 것을 확인할 수 있다.

 

 

 

결론

1. Client-Side Script는 웹 서버에서 해석이 불가능하여 소스보기로 확인 시 코드가 그대로 반환된다.

2. Server-Side Script는 웹 서버에서 해석이 되어 소스보기로 확인 시 결과값만 반환된다.

3. 웹 브라우저는 Client-Side Script를 해석하며, 서버에서 보낸 응답값과 같이 출력해준다.

→ Client-Side Script는 공격자가 코드를 확인하여 변조가 가능하므로 보안에 취약하다.

→ Server-Side Script는 결과값만 반환하므로 공격자가 변조하기 어렵다.

 

 

 

 

 

 

 

참고

https://www.inflearn.com/course/%EC%9B%B9-%EA%B8%B0%EC%88%A0-%EA%B8%B0%EC%B4%88