티스토리 이미지 우클릭(마우스 오른쪽 클릭) 무력화

 

 

(결론부터 말하자면 일단 내 티스토리는 이걸로 뚫린다.)

(다른 분들의 티스토리는 웬만해선 안 뚫린다.)

 

 

 

---

티스토리를 개설하면서 이리저리 만져보다가 플러그인 기능이 있다는 걸 알게 되었다.

 

 

누군가 내 게시글의 이미지를 가져가는 게 싫다면 이 플러그인으로 방지할 수 있다는 것이다.

내 티스토리에는 적용된 상태다.

 

 

로그아웃 상태에서 이미지 우클릭이 안 먹힌다.

 

 

F12를 눌러서 개발자 모드를 열었다.

HTML 소스가 화면을 덮었다.

 

 

고등학생 때 학원에서 얼핏 들었다. javascript를 써서 특정한 행동을 방지하는 경우가 많다고.

그리고 이때 특정한 행동에 대하여 false를 return하는 경우가 있다고.

기억이 가물가물했지만 행동과 관련된 코드. 그중에서도 javacript라는 키워드와 관련된 코드를 찾아보았다.

head에도 몇 개인가 있었지만 행동에 대한 값을 반환하는 내용은 없었다.

그래서 찾고 찾다가 body 내부에서 javascript 키워드를 찾을 수 있었다.

그것을 열어보니 위처럼 내가 딱 생각했던 코드 형식이 있는 게 아닌가.

 

 document.oncontextmenu = new Function ('return false');
 document.ondragstart = new Function ('return false');
 document.onselectstart = new Function ('return false');
 document.body.style.MozUserSelect = 'none';

 

이거다! 싶었다.

그런데 이게 뭔지 까먹었다.

구글링을 해보았다.

 

 document.oncontextmenu = new Function ('return false');

-> 우클릭을 했을 때 메뉴가 나오게 하는 거다. 아무래도 false를 반환해서 메뉴가 나오는 걸 막은 것 같다.

 document.ondragstart = new Function ('return false');

-> 사용자가 요소를 끌었을 때 시작하는 거라고 한다. 그렇다면 이건 이미지를 드래그해서 가져가는 걸 막는 것이다.

 document.onselectstart = new Function ('return false');

-> 한국어로 된 것도 찾아보고 영어로 된 것도 찾아봤는데 개념이 살짝 복잡했다. 아무튼 document.onselectstart는 이벤트 핸들러로서 선택했을 때 함수를 실행하는 그런 것이라고 한다. 즉, 여기선 false를 반환해서 이미지 선택 자체를 못하게 하는 것 같다.

 document.body.style.MozUserSelect = 'none';

-> 조금 해맸는데 MozUserSelect로 검색하니까 잘 나왔다. 모질라 유저 셀렉트. 그러니까 이건 파이어폭스 유저들이 요소를 선택할 수 없도록 하는 부분이라는 것이다. 근데 왜 파이어폭스만 이렇게 따로 빼놨을까.

 

일부 브라우저 환경에서는 정상적으로 작동하지 않을 수 있다. = 일부 브라우저 환경에서 정상적으로 작동하기 위해 별도의 방지 코드가 더 필요했다! 라고 이해하면 될 듯싶다.

그래서 document.body.style.MozUserSelect = 'none'; 이걸 바꾸는 방법은 잘 모르겠고.

일단 잊어버렸던 기억을 되살리기 위해 확실히 아는 것만 해보자.

 

---

 

Elements에서 Console로 창을 바꿨다.

 

 

 document.oncontextmenu = new Function ('return false');
 document.ondragstart = new Function ('return false');
 document.onselectstart = new Function ('return false');

 

-> 

 

 document.oncontextmenu = new Function ('return true');
 document.ondragstart = new Function ('return true');
 document.onselectstart = new Function ('return true');

 

메뉴가 나타나는 걸 허용한다!

드래그를 허용한다!

아무튼 선택해서 시작하는 것도 허용한다!

 

반환되던 거짓을 전부 참으로 바꿔서 콘솔에 입력하고 엔터를 눌렀다.

 

 

성공이다. 우클릭이 된다.

 

그래서 모르는 사람의 티스토리에 들어가 해당 코드를 주입하고 우클릭이 방지된 이미지를 우클릭해보았다.

 

그랬더니 안 된다. 대다수가 안 된다. 그 시절에 학원에서는 누구의 티스토리에 들어가든 다 뚫렸던 걸로 기억하는데.

 

내 티스토리는 이걸로 뚫리는데 다른 곳은 안 뚫리는 이유를 찾아보았다.

아무래도 단순히 플러그인만 적용하면 이 코드를 주입하는 것으로 뚫리고, 별도로 HTML을 만져서 방지책을 적용한 곳들은 뚫리지 않는 것 같다. 오늘날 많은 사람들이 이런 꼼수에 대처하고 있다는 생각이 들었다. 정말 좋은 변화다.

 

---

 

그런데 이렇게 우클릭을 뚫어서 다운로드한 이미지는 원본과 같을까?

 

 

좌측에 다운로드.png

 

일단 다운로드한 이미지의 파일명은 다운로드. 확장자는 png다.

화질은 잘 모르겠고.

나는 원작자로서 원본을 가지고 있으니 대조해보자.

 

왼쪽이 다운로드. 오른쪽이 원본.

겉보기엔 뭐가 다른지 모르겠다. 각자 열어서 나란히 보니 화질의 차이도 안 느껴지고.

 

다운로드는 139KB, 원본은 361KB

용량에 거의 두 배 차이가 있었다.

이미지 압축 형식이 같고 화질에서 차이를 못느꼈는데 용량에 차이가 있다는 건 대체로 이미지 크기와 직결된다.

그래서 보니까

다운로드한 파일은 1280 x 747

원본은 1685 x 984

이렇게 차이가 났다.

 

가로 크기에서 차이가 심한데 왜 이렇게 된 걸까?

사용자의 화면 너비에 따라서 다른 걸까?

어차피 우클릭을 뚫어도 원본과 100% 일치하는 파일을 얻을 수는 없으니까 된 건가?

 

언젠간 알아야할 때가 오면 알아보도록 하자.