티스토리 HTML 삽입시 악성코드 의심으로 부터 벗어나는 방법

HTML 삽입을 통해 HTML 소스삽입시 아래에보면 아래와 같은 문구가있다.

안전한 서비스를 위해 악성코드로 의심되는 부분은 삭제될 수 있습니다.

 

내가작성한 코드는 악성코드가 아닌데 ... 삭제되는경험을 한적이 있을것이다.

 

다음 글은 이를 우회하기 위한 아이디어글이다.

 

---

 

예시로 ...

다음과 같이 input box 에 내용을 입력 한 후 버튼을 클릭하면 input box 의 내용을 alert 으로 출력하는 간단한 소스를 티스토리에 포스팅했다.

 

 

"<>HTML 삽입"을 통해 삽입한 소스는 다음과 같다.

<style>
  .round-button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 12px 24px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 50px;
    float : right;
  }
  
  .round-button:hover {
    background-color: #218838;
}
</style>

<div style="border: 5px solid black; padding: 10px;">
<input type="text" id="figcaption1" placeholder="이곳에 내용을 입력하세요."  style="width:100%;">

<button class="round-button" onclick="fnClick1()">버튼</button>
</div>

<script type="text/javascript">
  function fnClick1() {
 	 alert(document.getElementById("figcaption1").value);
  }
</script>

-

삽입한 소스 내용을 보면 버튼은 버튼처럼 보이려고 나름 style로 공드린것을 확인할 수 있다.

---

그런데 포스팅 한 글의 본문의 hltml을 개발자 모드를 열고 확인해보면 다음과 같이 적용되어있다.

-

-

<div id="code_1738706834884" 안에 내가 삽입한 코드가 들어가 있고

그중 input 태그와 button 그리고 script 부부만 살아 있고 style 은 사라진것을 볼 수 있다.

 

---

 

그렇다면 id="code_1738706834884" 안의 div 요소를 가져온 후, data-source 속성 값을 가져와서

div 요소의 내용을 변경해버리면 ? 해결되지 않을까?

 

---

 

다음은 그 적용예이다.

-

-

-

적용한 소스는 다음과 같다

-

<script type="text/javascript">
  // 1. div 요소 가져오기
  const divElement = document.getElementById('code_1738696835477');
  // 2. data-source 속성 값 가져오기
  const dataSource = divElement.dataset.source;
  // 3. div 요소의 내용 변경
  divElement.innerHTML = dataSource;
</script>

-