JavaScript конвертор - JS 2 PNG © 2024

Информация

 Как это работает

Принцип работы этого метода обфускации очень прост. Сейчас мы попробуем объяснить этот принцип в 4 простых шага.

Сперва очищаем код от лишних символов
Затем разделяем его на символы
Теперь каждый символ конвертируем в цвет пикселя
В завершение, пикселы складываются в один файл изображения

А теперь слегка поподробней. В ASCII для кодирования каждого символа используется 8 бит информации, что даёт 2^8 комбинаций или 256 возможных символов. Для начала, каждый символ JavaScript, конвертируем в код символов ASCII.
В 8-битном бинарном файле изображения 8 бит используется для интерпретации цвета. Используя 8 бит, ты можешь кодировать 256 различных цветов, начиная от белого до чёрного (градации серого). В цветном изображении для каждого пикселя используется 3 байта информации. Это позволяет хранить данные для красного, синего и зелёного цветов, в промежутке от 0 до 255, чтобы в дальнейшем объединять их, преобразовывая в определённый цвет.
Этот метод работает по принципу кодирования 256 доступных ASCII символов из JavaScript файла в 256 возможных цветов бинарного PNG изображения. Далее, при помощи canvas, происходит чтение значений цвета каждого пикселя, с дальнейшим преобразованием полученных данных обратно в ASCII эквивалент. Полученный результат преобразовывается из ASCII кода в символы и выполняется при помощи new Function в память клиента. Использование данного метода сжатия совместно с gzip на стороне сервера помогает достигнуть отличного результата.

 Скрипт декодер

Развёрнутая версия скрипта декодера без минификации, 1'293 Байт, MD5: 76D67BF40FF7FF0844F527D5A4CDF693. В качестве источника данных можно использовать как сам PNG архив, указав ссылку на файл, так и Base64 код, указав его вместо ссылки. Код будет распакован по событию window.onload конструтором new Function в память, без добавления в DOM.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

!function(
	image_source,
	image,
	canvas_element,
	draw_image,
	window_onload
	){
 
		canvas_element=document.createElement('canvas'),
		draw_image=canvas_element.getContext&&function(){
 
	if(
		body=document.body,
		get_context=canvas_element.getContext('2d'),
		!get_context.getImageData	
	)throw'Canvas draw error';
 
	image.src=image_source,
	image.style.opacity='0',
	image.style.position='absolute',
	body.appendChild(image),
 
	image.onload=function(){
 
		for(
			x=0,
			z=-1,
			new_array=[],
			offset_width=this.offsetWidth,
			offset_height=this.offsetHeight,
			canvas_element.width=offset_width,
			canvas_element.height=offset_height,
			get_context.drawImage(this,0,0),
			body.removeChild(this),
			get_image_data=get_context.getImageData(0,0,offset_width,offset_height).data;
			x<get_image_data.length;
			x+=4
		)get_image_data[x]>0&&(
			new_array[++z]=String.fromCharCode(get_image_data[x])
		);
 
	new Function('return '+new_array.join(''))()
 
	}
},
	window_onload=window.onload,
 
	window.onload='function'!=typeof window_onload?
 
	draw_image:(
		window_onload&&window_onload(),
		draw_image()
	)
 
}(
	'http://base64/code/or/image/source.png',
	new Image
);

 Минифицированный cкрипт декодер

Минифицированная версия скрипта декодера, 616 Байт, MD5: FFCF0F77F992418D05B222FDF9787C61.

1

!function(e,o,n,a,i,d,f){i=o.createElement('canvas'),d=i.getContext&&function(){if(b=o.body,r=i.getContext('2d'),!r.getImageData)throw'Canvas draw error';n.src=e,n.style.opacity='0',n.style.position='absolute',b.appendChild(n),n.onload=function(){for(x=0,z=-1,Z=[],t=this,j=t.offsetWidth,J=t.offsetHeight,i.width=j,i.height=J,r.drawImage(t,0,0),b.removeChild(t),g=r.getImageData(0,0,j,J).data;x<g.length;x+=4)g[x]>0&&(Z[++z]=String.fromCharCode(g[x]));new Function('return '+Z.join(''))()}},f=a.onload,a.onload='function'!=typeof f?d:(f&&f(),d())}('http://base64/code/or/image/source.png',document,new Image,window);

4 сообщений в “Информация”

  1. Петр:
    19.01.2020 в 22:21

    DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.
    at Image.n.onload
    Когда использую base, все работает
    Когда ссылку на изображение -получается это, что не так, не подскажете?

    • admin:
      20.01.2020 в 00:49

      Здравствуйте!
      Это говорит о том, что скрипт выполняется на одном домене, а изображение находится на другом «cross-origin data».

      • Петр:
        04.02.2020 в 11:31

        Скрипт я запускаю локально. Изображение лежит прямо рядом со скриптом. Есть какой-нибудь способ чтобы скрипт не считал, что изображение с другого домена? По сути, никакого сервера нет, и не хотелось бы его делать, это браузерная игра…