사이트 캡처 외부 유출 방지 배경 워터마크 기능 개발 과정 mahler83, 2019-01-102023-07-19 운영중인 사이트의 스크린샷(캡처)이 타 커뮤니티에 흘러들어가 비난을 받는 일이 발생했다. Closed community 속성을 가지고 있어 외부인이 보면 불편해할만한 내용도 편하게 이야기하는 분위기인데, 이런 일이 반복적으로 일어나면 이용자들이 불편해질 것 같아 조치를 취하기로 했다. 배경에 흐릿하게 아이디, 필명, 가명(유동닉)이 대각선으로 반복해서 나타나는 형태의 워터마크(watermark)를 만들기로 했다. 이렇게 바탕에 배경무늬처럼 깔아두면 스크린샷을 찍을 때 본인의 아이디가 노출되는 부담을 느끼게 하는 의도이다. 워터마크 생성 $txt = $loginid . $nickname . “n” . $alias;$img = $img = imagecreate(150,100);$bg = imagecolorallocate($img, 255, 255, 255); // 배경흰색$c = imagecolorallocate($img, 242, 242, 242); // 연한회색 글자색imagettftext($img, 11, 25, 5, 80, $c, ‘./font.ttf’, $txt); // 글자크기11, 기울기25도, 시작좌표5,80header(‘Pragma: public’);header(‘Cache-Control: max-age=3600’);header(‘Expires: ‘. gmdate(‘D, d M Y H:i:s GMT’, time() + 3600));header(‘Content-type: image/png’);imagepng($img); 간단하게 흰색 바탕을 깔아두고 연한 회색으로 아이디를 배경 타일로 사용하는 것이다. TTF 파일은 라이센스를 잘 확인해서 사용할 것. 워터마크 이미지의 캐시 시간을 1시간으로 설정했는데, 늘려도 큰 상관은 없을 것 같다. URL 뒤에 의미 없는 get 값을 덧붙여주는 트릭을 이용하기 때문. 이 내용은 뒤에 기술. 배경 css #body {background-image:url(“./watermark?v=hash”);background-repeat:repeat;image-rendering:pixelated;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;-ms-interpolation-mode:nearest-neighbor;} id=body인 메인 영역 div에 워타마크를 바둑판식으로 반복해서 깔아주라고 지정하면 된다. 여기서 부딪친 문제점은 2가지였다. 1) 워터마크 이미지가 캐싱되어 로그아웃하거나 다른 아이디로 재로그인할 때 이전에 접속한 사람의 아이디가 노출됨. 그렇다고 no-cache 설정을 해버리면 페이지를 열 때마다 워터마크를 서버에 요청해서 받아와서 부하가 늘어남 해결: 워터마크 url 뒤에 v=아이디-필명-익명의 hash 값을 덧붙여서 로그인한 아이디가 바뀌거나 같은 아이다라도 필명을 바꾼 경우에 다른 url로 인식해 서버에 새로 요청해서 받아오게 됨. 로그인 안 한 경우에는 background-image 지정을 안 하도록 수정 2) 모바일 페이지의 경우 전통적으로 pixel 수를 낮게 산정해서 디자인하는데, 요즘 모바일 기기의 해상도는 웬만한 모니터보다 높기 때문에 모든 컨텐츠를 up-scaling해서 채우는 방식으로 작동함. 이 과정에서 글자는 벡터이미지처럼 취급해서 경계면을 선명하게 만들어서 보여주는데, 이미지는 기본적으로 부드럽게 extrapolation해서 확대시킴. 이 과정에서 연한 회색으로 아이디가 새겨진 이미지는 배경 흰색과 뒤섞여서 글씨를 알아볼 수 없게 된다. 해결: 이미지 확대시 부드럽게 처리하지 말고 그냥 픽셀화가 되도록 선명하게 처리하라고 따로 추가 지정을 해줘야 한다. 이미지 확대 처리 관련 css 설정의 경우 표준화가 덜 되어있어서 크로스브라우징을 위해 다음 자료를 참고해 image-rendering 관련 값을 5줄 써줬다. https://css-tricks.com/almanac/properties/i/image-rendering/ https://stackoverflow.com/questions/18677983/how-to-prevent-the-background-image-from-getting-blurry 이걸 테스트하는 과정에서 크롬 개발자툴을 이용해 에뮬레이션하는 것과 실제로 모바일 기기에서 보는 것 사이에 차이가 나서 고생했다. (이미지 확대 처리 방식에 차이) 로컬 개발 환경으로 사용하는 데스크탑에 AP모드 설정한 usb 무선랜카드를 꽂아 테스트 모바일기기로 접속하는 방식으로 테스트해야 했다…. 결론 생각보다 훨씬 어려웠다. 모바일에서 이미지 확대 처리를 제멋대로 한다는 것도 처음 알았고, 공용PC 등에서 아이디를 바꿔 재로그인하는 시나리오가 존재한다는 것을 개발하는 중간에 알게 되었다. 이가 안되면 잇몸으로 어떻게든 구현하긴 했지만 그래도 웬만큼 만족스러운 결과를 얻을 수 있었다. 제발 정말 간단한 소스코딩 하나입니다 오늘 당장 시행할 수 있는 안전장치인데 왜 아직 안하고 계신지 모르겠습니다. 이런 댓글이 달려있어서 솔직히 좀 언짢았는데, 문제 해결을 한 만족감이 더 크니 패스하는걸로…ㅎㅎ Share this:FacebookX Web development
Cannot start session without errors in phpMyAdmin 2013-08-212023-07-19 Error: Token Mismatch Cannot start session without errors, please check errors given in your PHP and/or webserver log file and configure your PHP installation properly. 이런 류의 오류가 계속 발생하는 현상을 겪었다. CentOS에서는 phpMyAdmin을 기본 리포지터리에서 제공하지 않는 바람에 수동 설치하느라고 애먹었다. session 폴더를 따로 지정해주지 않는 경우 “/var/lib/php/session” 폴더를… Share this:FacebookX Read More
Web development mysql charset utf8 vs utf8mb4 2016-10-182023-07-19 트위터 데이터를 수집해 mysql db에 저장하는 중인데 종종 트윗 내용이 없는 현상이 있어 찾아보니 맨 앞에 4바이트 이모티컨을 사용해서 일어나는 일이었다. (이런 문자들 ???? ) 4 byte character가 들어가면 그 이후의 내용이 잘리고 안 들어가고 있었던 것. mysql 5.5 이상에서는 utf8 대신 utf8mb4 인코딩을 이용하면 된다고 해서 백업 후 설정 변경…. Share this:FacebookX Read More
AWS EC2 입문 – Editplus로 ftp접속하기 2013-12-282023-07-19 지금까지는 아이디-비번 방식의 인증방식만 사용해오다 이번에 처음으로 아마존 EC2를 이용하면서 private key file을 이용한 인증을 접하게 되어 구글링을 좀 해서 방법을 찾아봤다. 일단은 기본적으로 PUTTY로 접속을 성공한 뒤의 이야기다. http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/putty.html 이 링크에 있는대로 정말 step-by-step으로 하면 접속이 가능할 것이다. 아마존 녀석들 documentation 정말 잘 해둔 듯…^^ 우선 Editplus에서… Share this:FacebookX Read More