끄적끄적

[XSS 대응] JQuery Safe Method 사용 본문

Development/JavaScript

[XSS 대응] JQuery Safe Method 사용

Go0G 2022. 2. 17. 20:41

개요

JQuery로 사용자의 입력 값을 처리할 때 안전하지 않은 메소드 사용 시, XSS(Cross Site Scripting)가 발생할 수 있다.

관리자 도구로 안전한 메소드와 안전하지 않은 메소드를 비교하면 브라우저에서 HTML 요소(Element) 값(<script>, <h1>, <input> 등)을 렌터트리로 구성하는 과정에서 사용자의 입력을 태그 또는 텍스트로 구성되는지 여부를 확인할 수 있다.

HTML 요소 설명

Safe Method

  • .text(): 선택한 요소의 값을 가져오거나 변경
  • .attr(): 요소의 속성의 값을 가져오거나 수정 #사용자의 입력 값으로 요소와 속성 값을 수정할 경우 XSS 발생 가능
  • .prop(): JavaScript 입장에서의 속성 값을 가져오거나 추가
  • .val(): 양식(form)의 값을 가져오거나 설정

Unsafe Method

  • $("html code")
  • .html(): 선택한 요소의 값을 가져오거나 변경 #태그 자체로 인식
  • .append*(): 선택한 요소 끝에 콘텐츠 추가 #요소와 같은 동작 수행
  • .insert*(): 작성하고자 하는 콘텐츠를 선택한 요소 전/후에 추가 
  • .prepend*(): 선택한 요소 앞에 콘텐츠 추가 #요소와 같은 동작 수행
  • .wrap*(): 선택한 요소를 원하는 태그로 감쌈
  • .before(): 선택한 요소 앞에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동
  • .after(): 선택한 요소 뒤에 새 요소를 추가하거나, 다른 곳에 있는 요소를 이동

예제코드

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        //Safe
            function prepend_method(){
            //선택한 요소의 내용의 앞에 컨텐츠 추가
            $("#prepend_method").prepend("<h3>h3 Tag Use</h3>");
        }
        function textmethod() {
            var Teg_test = "<h3>h3 Tag Use</h3>";
            $("#textmethod").text(Teg_test);
        }
        function attrmethod(){
            var Val = $("#hide_input_form").attr("value"); //속성 값 가져오기
            $("#attrmethod").text(Val);
        }
        function propmethod(){
            //Javascript 입장의 속성 값 출력
            var Val2 = $("#propmethod_a").prop('href');
            $("#propmethod").text(Val2);
        }

        $(document).ready( function(){
            //양식의 값을 가져오거나 설정
            //일반적으로 값이 설정되어 있는지 확인할 때 사용
            $('button#jbInputButton').click( function() {
                $("#jbInput").val("<h3>h3 Tag Use</h3>");
			});
		});
        //Unsafe
        function htmlmethod() {
            var Teg_test = "<h3>h3 Tag Use</h3>";
            $("#htmlmethod").html(Teg_test);
        }
        function Unsafe_attrmethod(){
            $("#Unsafe_attrmethod_a").attr("onmouseover", "javascript:alert('XSS');");
            //attr는 JQuery내에서 setAttribute(name, value)와 관련된 DOM을 호출
            //name과 value에 사용자의 입력을 받을 시 주의
            //Redirection Code
            /*
            var url = "google.com";
            if (url.indexOf("http") != 0) { 
                url = "http://" + url;
            } 
            */
        }
        function append_method(){
            //태그내에 값 추가
            $("#append_method").append("<h3>h3 Tag Use</h3>");
        }
        function Insert_method(){
            //선택한 태그를 기준으로 값 추가
            $("<h3>h3 Tag Use</h3>").insertBefore("#insert_method");
            $("<h3>h3 Tag Use</h3>").insertAfter("#insert_method");
        }
        function wrap_method(){
            //선택한 요소를 wrap 값 내부로 삽입
            $("#Wrap_method").wrap("<h3>h3 Tag Use</h3>");
        }
        function before_method(){
            //선택한 요소 앞에 값(태그, 값 등)을 삽입
            $("#Before_method").before("<h3>h3 Tag Use</h3>");
        }
        function after_method(){
            //선택한 요소 뒤에 값(태그, 값 등)을 삽입
            $("#After_method").after("<h3>h3 Tag Use</h3>");
        }

    </script>
</head>
<body>
    <h1>Safe Method</h1>
    <div id="textmethod"></div>
    <a href="#" onclick="textmethod();">text_method</a>

    <div id="attrmethod"></div>
    <a href="#" onclick="attrmethod();">attr_method</a>
    <div id="hide_input_form", value="<h3>h3 Tag Use</h3>">

    <div id="propmethod"></div>
    <a href="#" id="propmethod_a" onclick="propmethod();">prop_method</a>

    <div id="valmethod">
    <p><input type="text" id="jbInput"> <button id="jbInputButton">val_method</button></p>
    </div>

    <h1>Unsafe Method</h1>

    <div id="htmlmethod"></div>
    <a href="#" onclick="htmlmethod();">html_method</a>

    <div id="Unsafe_attrmethod"></div> <!--주의 필요-->
    <a href="#" id="Unsafe_attrmethod_a" onclick="Unsafe_attrmethod();">Unsafe attr method</a>

    <h2>Related Insert</h2>
    <div id="Append_method"></div>
    <a href="#" id="append_method" onclick="append_method();">append method</a>

    <div id="Insert_method"></div>
    <a href="#" id="insert_method" onclick="Insert_method();">Insert_method</a>

    <div id="Prepend_method"></div>
    <a href="#" id="prepend_method" onclick="prepend_method();">Prepend_method</a>

    <div id="Wrap_method"></div>
    <a href="#" id="wrap_method" onclick="wrap_method();">Wrap_method</a>

    <div id="Before_method"></div>
    <a href="#" id="before_method" onclick="before_method();">Before_method</a>

    <div id="After_method"></div>
    <a href="#" id="after_method" onclick="after_method();">After_method</a>

</body>
</html>

Reference

'Development > JavaScript' 카테고리의 다른 글

[기초] DOM & BOM 개념  (0) 2022.02.24
[기초] JQuery 문법  (0) 2022.02.11
'Development/JavaScript' Related Articles more
Comments