2021.05.21

2021.05.20

🎉 TIL

1. XSS(Cross Site Scripting)

• 찾아보게 된 계기
  : 프로젝트 진행 중에 어드민 쪽에서 에디터에 스크립트 태그 삽입을 허용해달라는 요청이 들어왔다. 기본적으로 켄도 UI 에디터에서는 스크립트 태그가 입력되면 k-script로 escape 처리를 하거나 아예 스크립트 태그를 삭제시켜 버려서 스크립트 태그 입력이 어려운 상황이었다.

• 해결한 방법
  : 우선 kendo Editor 옵션 중에서 serialization: { scripts: true, }를 적용해서 script 태그의 입력을 허용했다. (관련 문서)
  : 켄도 에디터는 기본적으로 XSS 기법을 방지하기 위해서 입력된 스크립트 태그를 serialization 하지 않았기 때문에, 강제로이 옵션을 true로 변경해줘야 했다. (관련 문서)
  : 하지만 그 다음에 발생한 문제는 처음 입력시에는 script태그가 날아가지 않고, 서버로 잘 전송이 되었는데 에디터에 서버에서 받아온 값을 넣을 때 script라는 단어가 전부 x-script로 변경되는 이슈가 발생했다.
  : 서버에서 가져온 데이터는 문제 없는 것으로 보아 서버로 전송될 때 변경되는 것이 아니라, kendo Editor의 값으로 넣기 전 즉, textarea의 value에 값을 넣을 때 문제가 되는 것을 알았다.
  : 따라서, 기존에 textarea.val()에 데이터를 넣는 것이 아니라 $(textarea).data("kendoEditor").value()에 직접 값을 전달했다.
  : 또한, 기존에는 태그들이 <와 같이 인코딩되어서 서버에 전송되었는데, 인코딩을 하지 않고, 태그 자체를 문자열로 묶어서 전송했고 그대로 받아와서 해결했다.

• XSS 란?

• 방지하는 방법(기법)
  : 입력 값(html 소스)를 검사해서 악의적인 코드가 있으면 적절한 처리를 해준다.

• XSS를 우회해서 스크립트 태그를 innerHTML로 삽입하는 방법

<!-- 삽입할 스크립트 -->
<script id="test-script" type="text/javascript">alert(123);</script>

// 스크립트 태그의 내용을 문자열로 가져온다.
const content = document.querySelector("#test-script").innerHTML; // "alert(123);"

// 가져온 문자열을 eval 함수의 파라미터로 전달하면 해당 스크립트의 내용을 실행시킬 수 있다!
eval(content);

2. 문자열로 들어온 스크립트 태그를 추출해서 현재 문서에 append 하여 실행하기

var arr = [];
$('.detail').children.forEach( v=> {
    if(v.tagName.toUpperCase() == 'SCRIPT') {
        var tag = document.createElement('script');
        tag.innerHTML = v.innerHTML;
        v.attributes.forEach( attr => {
            tag.setAttribute(attr.name, attr.value);
        });

        arr.push(tag);
        v.remove();
    }
});

arr.forEach( tag => {
    $('.detail').appendChild(tag);
})

3. 플래그(Flag) 변수의 활용

• 사용한 이유: 페이지에서 API 조회가 완료된 후 화면에 렌더링된 이후에 특정 로직을 실행해야 하는데, 최초 1회만 실행시키기 위해서 플래그 변수를 사용했다.

• 사용한 방법: isInit이라는 변수를 생성, 최초 Vue 인스턴스가 생성되었을 때는 false로 설정한다. 그리고 특정 로직을 실행하기 전에, isInit의 값이 true인지 체크 후 true면 해당 함수를 실행하지 않고 종료한다.
  isInit이 false라면 아직 로직을 실행한 적이 없었다는 뜻이므로 해당 로직을 실행한 후에 isInit의 값을 true로 변경한다.

data : {
    isInit: false,
}

updated() {
    if( this.isInit ) return;

    // ... 원하는 로직 실행
    this.isInit = true;
}

4. Javascript function arguments

arguments는 배열이 아니다!

• arguments를 배열로 만드는 방법

    // 1.
    Array.from(arguments);

    // 2. 
    Array.prototype.slice.call(arguments);