사용자 삽입 이미지
Ajax 개발을 하면서 가장 많이 사용하는 프로퍼티중의 하나입니다.

서버에서 HTML로 생성해주거나 혹은 데이터를 html 스트링으로 변환하여 해당 엘리먼트에

Element의 프로퍼트(property)인 innerHTML에 string을 치환하게 됩니다.

비어져 있는 엘리먼트일 수도 있고 그렇지 않는 경우도 있습니다.

DOM을 일일이 생성하는 것보다 innerHTML이 간단하기 때문에 많이들 사용하지만

이렇게 innerHTML을 자주 사용하는 프로퍼티인데 하지만 이를 사용할 때 문제가 되는 사항이 많이 있습니다.

그래서 유의해서 사용해야합니다.


1. 이미 innerHTML에 어떤 Element 구조가 형성되어 있을 때 해당 엘리먼트에 innerHTML을 하게 되면
기존에 있던 구조가 모두 없어져 버리게 됩니다.
만약에 그 구조안에 이벤트 헨들러를 등록했었다면 몇몇 브라우저에서는 메모리 누수가 발생합니다.

2. DOM 엘리먼트를 참조는 되돌릴 수가 없습니다.

3. 모든 브라우저의 모든 엘리먼트에서 innerHTML 프로퍼티를 사용하여 설정할 수 없습니다.
예를 들어 IE에서는 table의 row 엘리먼트에는 설정할 수 없다는 것입니다.

4. 익스플로러에서는 innerHTML속성을 이용해 script-injection 공격을 할 수 있습니다.
익스플로러에는 스크립트 태그에 defer 속성이 있는데요.
이를 이용해 <script src="" defer></script>를 이용하면 외부 script 로딩을 해 여러가지 공격이 가능합니다.

뭐 더 생각해보면 많을 것 같습니다.

FireFox에서는 파이어버그를 이용해서 다양한 동적인 지원과 디버깅을 지원하는데요.
전문가들에게는 이게 해킹의 수단이 될 수도 있습니다.
신고
Posted by Rhio.kim