사이트 캡처 외부 유출 방지 배경 워터마크 기능 개발 과정 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
apt-get 업데이트 자동 최신 설정 2012-10-062023-07-19 crontab으로 apt-get update, apt-get upgrade 명령어를 돌릴 수 있는 방법이 있어 소개한다. 우선 크론탭 수정 화면으로 들어가 # crontab -e 다음과 같이 항목을 하나 추가한다. 0 3 * * * (apt-get update && apt-get -y upgrade) > /dev/null 이렇게 하면 매일 새벽 3시00분에 설치된 프로그램들을 모두 업데이트시키게 된다. 내용 중 -y는… Share this:FacebookX Read More
favorites 소군추 – 소녀전선 군수지원 추천기, 최적화 계산기 2017-12-182023-07-19 진정한 시키칸이라면, 군수지원을 보내며 ‘과연 이게 최선인가’ 의문이 들었을 것이다. 주말에 틈이 나서 이 의문을 해소하는 기능을 만들었다. 이름하여 “소군추” ㅋㅋㅋ 필요한 자원은 그때그때 다른데, 웹에 떠돌아다니는 정해진 비율의 최적 조합은 마음에 안 들고, 군수를 돌리는데 생기는 딜레이나, 짧은 군수를 배제하는 기능도 필요하다고 보고 여러가지 옵션을 넣어봤다. 8전역까지 열지 못한… Share this:FacebookX Read More
jQuery each loop를 돌면서 continue, break 하는 방법 2013-09-142023-07-19 each() 자체가 while와 같은 루프가 아닌 함수이기 때문에 continue, break를 바로 사용하면 구문 오류가 뜨게 된다. 대신에 return true; (이건 continue의 개념. 다음 루프를 바로 돌게 된다.) return false; (이건 break의 개념. 그 자리에서 루프를 멈춘다.)를 써야 한다. form submit하기 전에 빈 칸이 없는지 확인하고 submit하는 코드를 다음과 같이 써봤다…. Share this:FacebookX Read More