웹보안) 리눅스를 이용한 문서 실행시키기

메모장에 저장되어 있는 html과 css 파일을 리눅스로 실행시켜보자

그전에 우선 css에 대해 간단히 개념만 알아보자면,

css(Cascading Style Sheet) : 디자인 서식 파일

- anchor (하이퍼링크)

- link : 해당 문서와 연결된 정보 (type, src, ref 를 꼭 입력한다.)

정도만 알면 될것이다.

 

 

 

html 파일과 css 파일을 만든다. html 에는 노래 가사를, css 파일에는 이미지에 대한 정보를 입력한다.

이렇게 따로 저장해주면된다. 하지만 위에 사진처럼 css파일이 저장되었다면

제대로 저장된것이 아니라 html 파일로 저장되었을 것이다. 

 

 

메모장에서 css파일을 만들고자 할때 간혹 css 파일이 안만들어지고 계속 html 파일이 만들어 질땐

탐색기에 들어가서 확장명 숨기기를 해제해주면 된다,

 

css파일의 링크도 걸어준다음 잠시 대기.

 

 

이제 리눅스를 이용해서 브라우저에 연결하는 방법을 알아보자.

 

#yum list installed httpd 를 설치. updates가 떴다면 설치 완료.

 

#service httpd start를 통해 실행.

#netstat -ant 를 입력했을 때 80이 제대로 출력되는지 확인한다.

 

 

#ifconfig 란 본인의 ip 주소를 알 수 있다.

위에 빨간 칸으로 나타낸게 ip 주소의 값이다.

이제 이 ip 주소를 브라우저에 입력해보면 위의 사진같이 나와야 정상적으로 실행하는 것이다

Apache가 제대로 동작하는것을 알 수 있다,

 

 

#cat /etc/passwd를 입력해보면 Apache의 기본 홈디렉토리를 확인할 수 있다

 

Apache의 기본 홈디렉토리로 이동한 그 밑의 리스트를 출력.

 

cd /var/www/html 으로 이동한 후

vi index.html을 입력한다.

 

#vi index.html 안에 출력하고자 하는 내용(INDEX FILE) 을 입력하고

브라우저에 다시 IP 주소를 입력해보면(새로고침) 내가 입력했던 값이 출력되는 것을 확인할 수 있다. 

 

 

간혹 원격설정(Xshell)에서 한글을 입력하여 출력하고 싶은데 글자가 깨지는 경우가 있을것이다

그럴 땐 아래의 사진을 참고하여 설정하면 된다.

Xshell 에서는 한글이 깨져도 브라우저는 다시 맞춰서 나타낼 수 있다.

 

 

메모장에 저장되어있는 html파일과 css파일의 내용을 vi를 통해 입력하자.

#vi index.html 에 html(노래가사)를 입력.

#vi style.css 에 css(이미지경로)를 입력한 후

브라우저에서 새로고침을 하면 내ip주소에서 위와 같은 화면이 나타나는 것을 확인할 수 있다.

 

 

#vi style.css 안에 있는 내용. 그림에 대한 링크와 글자위치, 글자 색 등이 입력된 것을 알 수 있다.

background-image:url(" ")  괄호 안에 본인이 첨부하고 싶은 이미지의 url을 넣어주면 된다.

background-size 로 이미지의 크기를 설정할 수 있다.

 

#vi index.html  안에 있는 노래 가사 내용.

 

 

브라우저에 가서 F12 키를 누르면 개발자 도구 프로그램이 실행된다.

여기서 바로 입력할 수 있다

위에 사진은 F12를 눌러서 브라우저에서 alert("hello world") 를 입력하니까 바로 출력되는것을 확인할 수 있다.

 

그럼 이제 리눅스로 실행시켜보자.

#cd /var/www/html 을 통해 html로 이동.

#cd sample 를 통해 sample로 이동

여기다 #vi javascripts.html로 이동한다.

alert() 는 내가 입력하는 내용을 출력해주는 기능을 갖는다.

vi 에서 메모장에서 입력했던 것처럼 입력한 후, 원하는 문장을 입력해본다

 

 

 

 

 

url에 내 ip 주소와/sample/javascripts.html을 입력하면

내가#vi /sample/javascripts.html 에 입력했던 내용을 브라우저에서 출력해준다.

 

 

 

f12(개발자도구)를 통해서 바로 브라우저에서 입력을 할 수 있다,

- 타입을 확인하고 싶을 땐 typeof [변수]를 입력하면 된다
- 배열도 하나의 객체로 받아들인다.

 

 

기능을 좀 더 추가해보자.

 

 

alert(" ")는 내가 입력한 값을 출력했다면

var ret = confirm(" ")은 내가 브라우저에서 누른 것에 대한 결과를 출력해준다.

위의 오른쪽 사진처럼 출력결과가 나온다.

confirm(" ")에 상대방에게 보여주고 싶은 메세지를 입력한 후 확인을 눌렀을 땐 true, 취소를 눌렀을 땐 false가 나오도록 작성

 

 

 

- prompt()   : 해당 웹브라우저에서 입력을 받는다. 즉 상대방이 직접 입력할 수 있도록 해준다.
                   괄호 안에 메세지는 입력하기 전에 나타나는 메세지이므로 오른쪽 위 사진을 참고하면 이해하기 편하다.

  ex) 주민번호를 입력하시오. 전화번호를 입력하시오. 와 같은 대답을 유도할 수 있다.

- document.write('return : ' +ret) :   var ret = confirm('yer or no'); 을 통해 return값을 출력해준다.
- 코드를 가져와서 웹브라우저에서 실행.