html5 문법 (4) 속성 프로퍼티

(4) 속성 프로퍼티 설정

자바스크립트에서 html 태그들의 속성을 설정하는 방식은 getAttribute / setAttribute 가 있다. get은 태그의 속성을 받아오는 역할을 하고, set은 태그의 속성을 지정한다. get / set을 설정할 때는 노드워킹에 주의해야 한다. 특정 태그를 선택할 수 없으면 불러오거나 지정하는 일은 불가능하기 때문이다. 

예제부터 살펴보자.

아래 코드는 attributes를 활용하여 img태그의 모든 프로퍼티, 속성을 추출하는 예제이다.

---

[예제]

<img id='logo' src='https://upload.wikimedia.org/wikipedia/commons/f/ff/Man_Utd_v_Everton%2C_August_2016_%2815%29_-_Marouane_Fellaini_%28edited%29.jpg' width='150' height='240' >

<script type="text/javascript">

var imgData = document.getElementById('logo');

var attrs = imgData.attributes;

for(var i=0; i<attrs.length; i++){

var attr = attrs.item(i);

console.log(attr.name+':'+attr.value);

}

</script>

---

먼저 attrs 변수에 img태그의 속성을 모두 저장한다. (attr 변수에 item( )매서드를 활용하여 각 프로퍼티를 불러온다) 그리고 .name과 .value를 활용하여 각 프로퍼티의 이름과 값을 console로 찍어본다.

name과 value를 활용한다면, 프로퍼티를 추출해내고, value값을 변경할 수 있다. 아래의 예제를 보자. 이벤트와 attributes 기능을 조합한 방식이다.

---

[예제]

<img id='logo' src='https://upload.wikimedia.org/wikipedia/commons/f/ff/Man_Utd_v_Everton%2C_August_2016_%2815%29_-_Marouane_Fellaini_%28edited%29.jpg' width='10%' >

<input type="button" value="사진변경" id="chk_img">

<script type="text/javascript">

var imgData = document.getElementById('logo');

var attrs = imgData.attributes;

var chkImg = document.getElementById('chk_img');

chk_img.addEventListener('click',function( ){

for(var i=0; i<attrs.length; i++){

var attr = attrs.item(i);

if(attr.name == 'src'){

attr.value = 'https://cdn.pixabay.com/photo/2017/07/20/18/31/pied-piper 2523213_960_720.jpg';

}

}

});

</script>

---

1 namedNodeMap 객체 

위의 코드에서 attributes에 오는 attribute는 모두 namedNodeMap 객체의 값이다.

아래 예제는 namedNodeMap 객체를  통해 프로퍼티를 추가하는 코드다. 빨간색 부분만 추가하였다. 

---

<img id='logo' src='https://upload.wikimedia.org/wikipedia/commons/f/ff/Man_Utd_v_Everton%2C_August_2016_%2815%29_-_Marouane_Fellaini_%28edited%29.jpg' width='10%' >

<input type="button" value="사진변경" id="chk_img">

<script type="text/javascript">

var imgData = document.getElementById('logo');

var attrs = imgData.attributes;

var chkImg = document.getElementById('chk_img');

var title = document.createAttribute('title');

     title.value = 'LogoImg';

     attrs.setNamedItem(title);

for(var i=0; i<attrs.length; i++){

var attr = attrs.item(i);

console.log(attr.name + ':' + attr.value);

}

chk_img.addEventListener('click',function( ){

attrs.setNamedItem(title);

for(var i=0; i<attrs.length; i++){

var attr = attrs.item(i);

if(attr.name == 'src'){

attr.value = 'https://cdn.pixabay.com/photo/2017/07/20/18/31/pied-piper-2523213_960_720.jpg';

}            

}

});

</script>

---

2 텍스트 취득 및 설정하기

노드 안의 text를 취득하거나 설정하는 메소드는 대표적으로 innerHTML과 textContent가 있다. 하지만 innerHTML은 태그 자체를 모두 노드 안으로 보내버리기 때문에 사용자가 html코드나 자바스크립트를 입력하면, 보안이 뚫릴 가능성이 높다. 따라서 createXXXX 방식으로 노드를 사용하자. 아래 예제를 통해 innerHTML과 textContent 노드의 결정적 차이점을 알아보자.

---

[예제]

<div id="ManU">

<p style="color:Red;">맨체스터 유나이티드</p>

</div>

<div id="ManCity">

<p style="color:Blue">맨체스터 시티</p>

</div>

<script type="text/javascript">

document.addEventListener('DOMContentLoaded',function( ){

document.getElementById('ManU').textContent = '<a href="http://www.manutd.com/">맨유 홈페이지</a>';

document.getElementById('ManCity').innerHTML = '<a href="https://kr.mancity.com/">맨시티 홈페이지</a>';

});

</script>

---

id '맨유'는 textContent로 붙였기 때문에 <a>태그가 그대로 출력이 된다. (a태그의 기능이 비활성화된다.) 반면, 맨시티 id같은 경우, innerHTML을 사용하였기 때문에 a태그의 기능이 활성화된 결과가 나타난다. 이는 보안에 치명적일 수 있다. 가령, 다음과 같은 코드를 보자. innerHTML의 단점을 바로 확인할 수 있다.

---

<input type="text" size="60" name="userInput" id="userInput">

<div id='userOutput'></div>

<input type="button" id='userbtn' value="제출" name="">

<script type="text/javascript">

var userOutput_ = document.getElementById('userOutput');

document.getElementById('userbtn').addEventListener('click',function(){

var userInput_ = document.getElementById('userInput');

var userOutput_ = document.getElementById('userOutput');

userOutput_.innerHTML += userInput_.value;

});

</script>

---

사용자가 html이나 자바스크립트를 사용할 경우 사이트의 디자인과 관련없이, 아래처럼 글자색을 마음대로 바꾼 스타일이나 태그를 사용하는 상황이 발생한다.

이런 취약점을 '크로스 사이트 스크립팅' 이라 한다. 따라서 innerHTML을 사용하지 않고, createElement / createTextNode 메소드를 사용해야 안전한다.