티스토리 블로그 발행일자를 과거일자로 수정하기 / 발행시각 감추는 방법

포스트 발행일자를 과거일자로 수정해 보자. (Pixabay)

발행일을 과거로 돌릴 수 없다?

티스토리 블로그에서 글 등록 시 발행일을 과거 일자로 설정할 수는 없습니다. 그 이유는 납득이 갑니다. 만약 발행일자를 과거로 설정할 수 있다면 하루 만에 역사와 전통을 자랑하는 블로그를 뚝딱 만들어 낼 수 도 있을 테니까요. 

 

달력의 disabled 속성을 풀어도 과거일자는 선택 불가

정말 안될까?

과거에 발행했던 글을 수정하다가 잘못해서 현재일자로 발행을 눌러버렸습니다. 최초 발행일로 돌리고 싶었는데 방법이 없더라고요. 진짜로 발행일자 수정이 불가능한지 확인해 보았습니다. 먼저 티스토리 글 발행 시 서버로 전송되는 JSON 패킷을 확인해 봅니다.

 

티스토리 글 발행시 서버로 전송되는 JSON 파라미터

 

티스토리는 글 발행 시 발행일자를 Epoch Time 형태로 변경하여 published 라는 키를 이용하여 전송합니다. 발행 시에 전송되는 데이터에서 published의 값을 과거 날짜로 수정하여 티스토리 서버로 전송하면 발행일자를 변경할 수 있겠지? 두근두근하며 일단 시도해 보기로 합니다.

Epoch Time 은 유닉스 시간이라고도 부르는데 1970년1월1일 00시 00분(세계 협정 시)에서부터 현재까지의 경과시간을 초로 환산하여 나타내는 시간 표현법입니다. 자바스크립트에서는 Date.getTime() 메서드를 이용하여 구할 수 있습니다.  자바스크립트의 Date.getTime() 메서드는 밀리세컨드 단위로 리턴하기 때문에 1000으로 나눠주어 Epoch Time으로 변환합니다.

// EPoch 타임 변환
new Date('2020-06-22T15:10:00').getTime()/1000;

발행일 파라미터 변조하기

발행 버튼을 누르기 전 콘솔 창에서 아래 스크립트를 실행하여 AJAX 요청을 가로챕니다. 전송할 원본 데이터에서 발행일자 부분만 원하는 과거 데이터로 교체한 후 서버로 데이터를 전송하면 작업은 감쪽같이 끝납니다. 이제 서버로부터의 응답만 기다려 봅니다.

/*
 * 발행일자를 한달 전(6월 22일)로 수정 
 */
var _send = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body){ 
    var jsonValue = JSON.parse(body);
    jsonValue.published = new Date('2020-06-22T15:10:00').getTime()/1000;
    _send.apply(this, [JSON.stringify(jsonValue)]);
}

티스토리는 바보가 아니다.

발행시각 파라미터를 변조하여 전송해도 티스토리 서버에서 현재 일자보다 과거 일자로 수정이 안되도록 하는 유효성 체크를 수행하고 있었습니다. 티스토리가 바보가 아닌 이상 서버시간으로 체크하는 로직이 들어가 있을 것으로 예상하고 있었습니다.(진짜로?) 사실은 살짝 기대하고 있었는데 아쉽습니다. 역시 카카오! 대기업 답네요.

 

파라미터를 변조해도 서버에서 검사해서 튕긴다.

티스토리는 카카오에서 사랑을 담아 운영한다더라. (카카오)

최후의 수단. 발행일자 바꿔서 보여주기

티스토리의 발행일자를 과거일자로 수정하는 것은 불가능합니다. 대신 화면에서 원하는 과거 일자로 보여주는 것까지 막을 방법은 없습니다. 글 본문에 아래 스크립트를 삽입하여 발행일을 과거 일자로 보이게 만들 수 있습니다. 

document.querySelector('#content div.post-meta > span.date').innerText = '2020. 6.22. 15:10';

위에서 사용된 CSS Selector는 사용하는 스킨에 따라 다를 수 있습니다. CSS Selector 확인은 브라우저의 개발자 도구를 이용하면 쉽게 확인이 가능합니다. 크롬 기준 F12키를 누르면 개발자 도구가 활성화됩니다. 좌측 상단 엘리먼트 선택 아이콘을 클릭한 후 날짜 텍스트를 선택하면 소스 탭에 엘리먼트가 선택됩니다. 

 

개발자도구(F12) 에서 검사 아이콘 클릭 후 발행일자를 선택한다.

 

소스 탭에서 날짜 엘리먼트를 선택 후 마우스 우클릭 > Copy > Copy Selector 를 선택하면 클립보드에 날짜 엘리먼트의 CSS Selector 코드가 복사됩니다. 해당 코드를 이용하여 위 스크립트 코드를 수정하시면 됩니다.

 

발행일자의 CSS Selector 코드를 복사

document.querySelector('{복사한 CSS Selector}').innerText = '2020. 6.22. 15:10';

블로그 본문에 스크립트 삽입

발행일을 과거날짜로 보여줄 포스트의 수정 화면에서 HTML Edit 모드로 이동합니다. 본문 하단에 위에서 작성한 스크립트 코드를 <script> 태그를 이용하여 아래와 같이 작성합니다.

<script>
document.querySelector('#content div.post-meta > span.date').innerText = '2020. 6.22. 15:10';
</script>

본문 저장 후 변경된 날짜로 정상적으로 표시되는지 확인합니다. 

 

과거일자로 수정된 발행일자. 감쪽같다 ㅋㅋㅋ

응용 #1 완전범죄 - 카테고리 목록에서도 날짜를 바꾸자

글 보기 하단에 카테고리의 다른글 보기가 활성화되어있는 경우에 본문 상단의 발행일과 카테고리 글 목록에서의 발행일이 다르게 표시될 수 있습니다. 완전범죄를 위해서 카테고리 목록에서도 발행일자를 변경하는 코드를 삽입합니다. 

 

카테고리의 다른 글 목록에서도 발행날짜를 바꿔줘야 완전범죄

<script>
/** 카테고리 다른 글 목록에서 현재 포스트의 발행일자를 수정 */
document.querySelectorAll('#content > div.inner > div.entry-content > div > div.another_category.another_category_color_gray > div > table > tbody > tr')
    .forEach(function(el) {
        if(location.href === el.querySelector('th > a').getAttribute('href')) {
            el.querySelector('td').innerText = '2020.06.22'
        }
});
</script>

완전범죄 성공

응용 #2 포스트 발행시각을 가리자

위 코드를 조금 응용하면 발행 일자만 보여주고 포스팅 시각은 안 보여 줄 수도 있습니다. 발행 시각이 한창 업무시간(?) 이라던가 알리바이에 문제가 있는 시각(?)이라면 활용할 수 도 있을 것 같습니다. 기본 코드는 다음과 같습니다.

/* 발행시각 지우기 */
document.querySelectorAll('#content div.post-meta > span.date')
    .forEach(function(el) {
    	el.innerText = el.innerText.substr(0, 11);
    });

모든 글에 일괄적용을 위해서는 스킨에 위 코드를 삽입해야 합니다. 블로그 관리자 화면에서 스킨 편집 메뉴로 이동합니다. 스킨 편집 창에서 HTML 모드를 클릭하면 스킨 소스 수정이 가능한 창이 열립니다. 소스 하단으로 이동하여 위 스크립트를 삽입합니다. 

 

스킨편집 HTML 에디터로 이동한다.

본문 하단에 스크립트를 삽입한다.

스킨 편집 창의 왼쪽 미리 보기 화면에서 글을 선택하여 발행 시각이 정상적으로 삭제되는지 확인하고 스킨 변경사항을 저장하여 반영합니다. 이제 블로그 내 모든 포스트 열람 시 발행 시각 정보는 표시되지 않습니다.

 

혹시모를 알리바이를 위해 발행시각을 제거했다.