innerHTML application_HTML/Xhtml_웹페이지 제작

블랭크 블로그: http://www.planabc.net/
innerHTML 속성은 HTML 요소의 콘텐츠를 완전히 바꾸는 간단한 방법을 제공하므로 매우 널리 사용됩니다. 또 다른 방법은 DOM 레벨 2 API(removeChild, createElement,appendChild)를 사용하는 것입니다. 그러나 DOM 트리를 수정하기 위해 innerHTML을 사용하는 것은 매우 쉽고 효과적인 방법임은 분명합니다. 그러나 innerHTML에는 그 자체로 몇 가지 문제가 있다는 점을 알아야 합니다.

HTML 문자열에 defer로 표시된 스크립트 태그(

)가 포함되어 있는 경우 innerHTML 속성이 잘못 처리되면 Internet Explorer에서 스크립트 삽입 공격이 발생할 수 있습니다. innerHTML을 설정하면 이벤트 핸들러를 등록한 기존 HTML 요소가 삭제되어 일부 브라우저에서 메모리 누수 위험이 발생할 수 있습니다.

언급할 가치가 있는 몇 가지 다른 사소한 단점도 있습니다.

방금 생성한 요소에 대한 참조를 얻을 수 없습니다. 해당 참조를 얻으려면 DOM API를 사용하여 수동으로 코드를 추가해야 합니다. 모든 브라우저의 모든 HTML 요소에 innerHTML 속성을 설정할 수는 없습니다. 예를 들어 Internet Explorer에서는 테이블의 행 요소에 innerHTML 속성을 설정할 수 없습니다.

innerHTML 속성 사용과 관련된 보안 및 메모리 문제가 더 걱정됩니다. 분명히 이것은 새로운 문제가 아니며 이러한 문제 중 일부에 대한 해결책을 찾아낸 재능 있는 사람들이 이미 있습니다.
Douglas Crockford는 이벤트 핸들러를 등록하는 HTML 요소로 인해 발생하는 일부 순환 참조를 중단하고 가비지 수집기가 이러한 HTML 요소와 연결된 메모리를 해제할 수 있도록 하는 정리 함수를 작성했습니다.
HTML 문자열에서 스크립트 태그를 제거하는 것은 보기만큼 쉽지 않습니다. 정규식을 사용하면 원하는 효과를 얻을 수 있지만 모든 가능성을 포괄하는지 여부는 알기 어렵습니다. 내 해결책은 다음과 같습니다. <script>/</script>[^>]*>[Ss]*?]*>/ig

이제 이 두 기술을 단일 setInnerHTML 함수로 결합하고 setInnerHTML 함수를 YUI의 YAHOO.util.Dom에 바인딩해 보겠습니다.
YAHOO.util.Dom.setInnerHTML = 함수(el, html) {
el = YAHOO.util.Dom.get(el);
if (!el || typeof html !== 'string ') {
null을 반환합니다.
}
// 순환 참조 중단
(함수 (o) {
var a = o.attributes, i, l, n, c;
if (a) {
l = a.length; for (i = 0; i n = a[i].name;
if (typeof o[n] === '함수') {
o[n] = null;
}
}
}
a = o.childNodes;
if (a) {
l = a.length; for (i = 0; i c = o.childNodes[i];
// 하위 노드 지우기
args.callee(c);
// YUI의 addListener를 통해 요소에 등록된 모든 리스너를 제거합니다.
YAHOO.util.Event.purgeElement(c);
}
}
})(el);
// HTML 문자열에서 스크립트를 제거하고 innerHTML 속성을 설정합니다. <script> el.innerHTML = html.replace(/</script>[^>]*>[Ss]*?
]*>/ig, " ");
// 첫 번째 하위 노드의 참조를 반환합니다.
return el.firstChild;
};
이 함수가 수행해야 하는 다른 작업이 있거나 정규 표현식에서 누락된 부분이 있으면 알려주시기 바랍니다. <script>물론 웹페이지에 악성 코드를 삽입하는 방법은 이 외에도 많습니다. setInnerHTML 함수는 모든 A급 브라우저에서 <br /> 태그의 실행 동작만 정규화합니다. 신뢰할 수 없는 HTML 코드를 삽입하려면 먼저 서버 측에서 필터링해야 합니다. 이를 수행할 수 있는 라이브러리가 많이 있습니다. <script defer>&hellip;</script>원문: Julien Lecomte의 "innerHTML 문제"