Головоломка для верстальщика: CSS не видно, картинка спрятана

21 января 2013 года, 17:25

Хотите голову поломать? Вот вам тест на знание всякого странного, откройте следующий урл в «Опере»: /files/opera-mystery/ (именно в «Опере») и попробуйте догадаться как это сделано.

Ответ завтра. Кажется, во всём интернете так ещё никто не делал.

Выше снимок того что вы должны увидеть на экране, я испытывал под «Оперой» последней версии (12.12) для «Мака», не факт, что под другими ОС всё так же будет.

Вот что видно в консоли, если попытаться скачать этот файл:

bolk@Bolk ~$ wget -O- --user-agent="Opera/9.80 (Macintosh; Intel Mac OS X 10.8.2) Presto/2.12.388 Version/12.12" /files/opera-mystery/
--2013-01-22 00:24:09--  /files/opera-mystery/
Resolving bolknote.ru... 91.230.61.15
Connecting to bolknote.ru|91.230.61.15|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 0 [text/html]
Saving to: ‘STDOUT’

    [ <=>                                                                                                                                                   ] 0           --.-K/s   in 0s      

2013-01-22 00:24:09 (0.00 B/s) - written to stdout [0/0]

Когда догадаетесь где тело страницы, переходите на уровень два — догадайтесь откуда берётся картинка.

Комментарии 18

Viperet (viperet.info) 21 января 2013 года, 20:47№ 1

Тело страницы — в bolk.css, который подключается через заголовок Link:

Link: ;rel=stylesheet

А вот почему url(bolk.css#0x5F0xBF0xFF0xDC0x530xF60….) превращается в картинку — не пойму…

Александр Бабаев (bealex.moikrug.ru) 21 января 2013 года, 20:55№ 2

Заголовок ищется легко, а дальше я не крут а наоборот :)

Михаил Калашник (splurov.livejournal.com) 21 января 2013 года, 20:55№ 3

Троллишь читателей? :)
/all/2848#09

Михаил Калашник (splurov.livejournal.com) 21 января 2013 года, 21:18№ 4

А картинка это X BitMap, судя по всему.

efendy 21 января 2013 года, 21:20№ 5

body::after { content: ' %27http://bolknote.ru%27 ';

На сервере проверяешь реферер и отдаешь картинку?

PastorGL 21 января 2013 года, 21:44№ 6

Как сказали товарищи выше, в заголовках отдаётся Link: ;rel=stylesheet

И в самом bolk.css
#define ,body { background: 20px 20px url(bolk.css#0x5F0xBF0xFF0xDC0x53 ням-ням-ням 000xFF) no-repeat; width: 80px; /*_width 80px*/ height: 80px; /*_height 80px*/ border: 7px dashed #259; outline: #259 dashed 6px; margin: 10px; padding: 3px; } body::after { font: 13px Arial, sans-serif; content: ' %27http://bolknote.ru%27 '; display: block; position: absolute; left: 10px; top: 120px; outline: rgba(0,0,0,0) solid 1; }

Поигравшись в Dragonfly, можно вставить в DOM узел img, у которого задать src="bolk.css#0x5F0xBF0xFF0xDC0x53…", и Опера его корректно отображает. Какой-то экзотический однобитный формат картинки, который другие браузеры не поддерживают, судя по всему.

Artemy Tregubenko (arty.name) 21 января 2013 года, 23:03№ 7

я уже видел у кого-то пустое тело страницы и генерацию всего через css прикреплённый в заголовках

а вот картинка в виде url(bolk.css#0x…) напомнила мне mht, кажется, именно в нём я видел такую адресацию встроенных ресурсов. Кстати, размер строки ровно 800 байт = 6400 бит, а картинка размером 80х80=6400, ровно по

Artemy Tregubenko (arty.name) 21 января 2013 года, 23:12№ 8

если перейти на https://bolknote.ru/files/opera-mystery/1 и отредактировать исходник страницы, вставив картинку с правильным адресом, то она будет показана без рамки. Однако почему-то Опера для этой картинки не показывает контекстное меню картинок. Это подозрительно.

hshhhhh (hshhhhh.name) 21 января 2013 года, 23:19№ 9

Комментарий для arty.name:

Однако почему-то Опера для этой картинки не показывает контекстное меню картинок.

Потому что когда картинка бекраундом оно никогда не показывается.

hshhhhh (hshhhhh.name) 21 января 2013 года, 23:24№ 10

Не понял как сделана картинка, наверняка разновидность твоего любимого data-uri, а вот рамка сделана очень круто. Понравилась куда больше картинки :).

greli (greli.livejournal.com) 22 января 2013 года, 03:07№ 11

Картинка явно зашифрована во фрагменте

url(bolk.css#0x5F0xBF0xFF0xDC0x53 ням-ням-ням 000xFF)

Всё что после „#“ явно и есть закодированное изображение, предположительно, в формате WBMP. Не очень понятно как оно так считывается.

Евгений Степанищев (bolknote.ru) автор 22 января 2013 года, 03:07№ 12

Надо же, всё расколупали за ночь :)

Виталий 22 января 2013 года, 03:47№ 13

Недавно общаясь с пепелсбеем в твиттере пришёл к тому, что использование link http header — это единственный реальный способ задания произвольного урла для фавикона на всём сайте, даже не для HTML ресурсов, жаль что только в опере работает

Евгений Степанищев (bolknote.ru) автор 22 января 2013 года, 07:06№ 14

В общем, сегодня напишу как сделано.

Artemy Tregubenko (arty.name) 22 января 2013 года, 08:16№ 15

Комментарий для hshhhhh.name:

я писал про то, что даже вставленная явно, а не через CSS, эта картинка всё равно выдаёт контекстное меню страницы, а не картинки