사진 한 장이 천 단어를 말해도 프로그램을 숨길 수 있습니다 code_html5 튜토리얼 기술

저는 최근에 HTML5 비디오 퍼즐이라는 첫 번째 웹 게임을 개발했습니다. 개발 과정은 흥미로웠습니다. 저는 프로그래밍을 좋아하지만 게임 로직을 구현한 후 흥미로운 아이디어를 얻었습니다. 코드를 숨길 수 있는 방법을 찾아보면 어떨까요? 처음에는 마우스 오른쪽 버튼을 클릭하면 페이지의 소스 코드를 볼 수 있도록 컨텍스트 메뉴를 비활성화하는 등 매우 간단한 것을 생각했습니다. 그러나 이것은 말이 되지 않습니다. 마우스 오른쪽 버튼 클릭 메뉴는 작동하지 않으며 사람들은 키보드 단축키나 메뉴 표시줄의 "소스 보기"를 통해 소스 코드를 계속 볼 수 있습니다.

사진 한 장이 천마디 말을 할 수 있습니다

사진의 크기에 따라 다릅니다. 하지만 저는 소스 코드를 암호화하여 이미지에 저장하기로 결정했습니다. HTML5 캔버스 구성 요소는 이미지 픽셀에 대한 작업을 지원하므로 이러한 종류의 작업에 매우 적합합니다. 픽셀은 빨간색, 녹색, 파란색 및 알파 채널의 네 가지 값(채널)으로 표시됩니다. 해당 값은 0에서 255까지 분포됩니다. 내 Javascript 코드는 문자이며 각 문자에는 해당 ASCII 값이 있습니다. ASCII 값의 범위도 0~255이므로 캔버스의 각 픽셀을 순회하면서 각 픽셀에 대한 3개의 코드 문자의 ASCII 값을 RGB 값으로 설정하는 것을 통해 쉽게 할 수 있습니다. charCodeAt 함수를 사용하여 이러한 문자를 제거하세요.

코드 복사

코드는 다음과 같습니다.

.charCodeAt(0)

생성되는 것은 다채롭고 작은 그림입니다. 살펴보세요:

디코딩할 때 캔버스에 이 그림을 그리고 픽셀을 순회하면 됩니다. 점, r, g, b 값으로 표시되는 문자를 빼냅니다.

코드를 복사하세요

코드는 다음과 같습니다. :

String.fromCharCode(code)

이 두 문자열을 하나의 큰 문자열로 연결하면 이것이 바로 실행 가능한 코드입니다.

이렇게 하면 소스 코드가 보호되나요?

사실 아니요. 숙련된(또는 경험이 없는) 프로그래머라도 이미지를 디코딩하고 내부 코드를 추출하는 방법을 알아낼 수 있지만 이는 나쁜 비즈니스 의도를 가진 사람들을 방지하기 위한 것이라고 생각합니다. 누군가가 당신의 코드를 훔칠 수 있도록 - 그리고 그것을 해독하는 방법을 알아낼 수 있는 프로그래머는 (주로) 훔칠 수 있는 존재가 아닙니다.

이 방법의 주요 결함
이 기술은 HTML5 캔버스 기술을 지원하는 최신 브라우저에만 적용되며 IE6 및 IE8에서는 작동하지 않습니다. 일부 최신 브라우저에서도 이미지의 알파 채널을 인코딩하는 데 문제가 있으므로 픽셀당 3문자만 입력할 수 있습니다. 100×100 이미지는 30,000개의 텍스트 문자를 저장할 수 있습니다.

다른 사람이 귀하의 코드를 복사하는 것을 방지할 수 있는 다른 간단한 방법이 있습니까? 물론 문자를 암호화할 수 있지만 암호 해독 단계가 쉽게 깨지지 않도록 하려면 어떻게 해야 할까요? 당신의 생각을 말해주세요!