이미지나 로고를 내가 직접 그리고 배포하면 크게 상관 없겠지만
주변 사람들에게 일러스트를 부탁해야 해서 혹시나 어플 사용 중 손수 만든 이미지를 캡쳐하거나 저장 할 위험이 있어 몇 가지 추가 설정을 해 주었다.
1. 웹
아래 index.html 설정은 모두 적용하면 앱 내 텍스트 복사 붙여넣기도 되지 않으므로
롱클릭 이벤트로 텍스트 복붙은 가능하게 하려면 index.html 설정은 적용하지 않는다.
Vue의 index.html의 head부분
<head> <script type="text/javascript"> document.oncontextmenu = () => { return false } </script> </head>
body 부분
<body oncontextmenu="return false" onselectstart="return false" ondragstart="return false" onselect="return false"> </body>
style.css ~ scss 클릭 이벤트 관련 방지
img { pointer-events : none !important; -webkit-user-select: none !important; -webkit-touch-callout: none !important; -ms-user-select: none !important; user-select: none !important; }
styel.css ~ scss 클릭(터치)시 하이라이트 방지
-webkit-tap-highlight-color: transparent !important;
위 설정대로 추가하면 텍스트는 드래그나 복붙이 가능한데 이미지는 다운로드 할 수 없다.
2. 안드로이드
캡쳐 방지
getWindow().addFlags(WindowManager.LayoutParams.FLAG_SECURE);
원하는 액티비티의 onCreate 부분에 추가 해 주면 캡쳐 시 보안알람이 뜨거나 캡쳐 이벤트가 발생하지 않는다.
웹 개발자(FE / BE) anna입니다.