Пишу, по большей части, про историю, свою жизнь и немного про программирование.

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

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

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

Загадка (25.18КиБ)

Выше снимок того что вы должны увидеть на экране, я испытывал под «Оперой» последней версии (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) 2013

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

Link: <bolk.css>;rel=stylesheet

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

Александр Бабаев (bealex.moikrug.ru) 2013

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

Михаил Калашник (splurov.livejournal.com) 2013

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

Михаил Калашник (splurov.livejournal.com) 2013

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

efendy 2013

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

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

PastorGL 2013

Как сказали товарищи выше, в заголовках отдаётся Link: <bolk.css>;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) 2013

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

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

Artemy Tregubenko (arty.name) 2013

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

hshhhhh (hshhhhh.name) 2013

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

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

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

hshhhhh (hshhhhh.name) 2013

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

greli (greli.livejournal.com) 2013

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

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

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

Евгений Степанищев (bolknote.ru) 2013

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

Виталий 2013

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

Евгений Степанищев (bolknote.ru) 2013

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

Artemy Tregubenko (arty.name) 2013

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

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

shaltai-boltai 2013

Комментарий для Евгения Степанищева:

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

Дык драгонфлай (по крайней мере, под виндой) всё показывает.
Чего там колупать.

burn.cd 2013

приветствую...
а как с Вами связаться можно? спасибо

Евгений Степанищев (bolknote.ru) 2013

Комментарий для burn.cd:

Здравствуйте!

← Вот тут слева есть меню, там есть пункт «Обо мне», на той странице вся публичная контактная информация.