Головоломка для верстальщика: 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)

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

Link: <bolk.css>;rel=stylesheet

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

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

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

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

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

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

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

efendy

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

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

PastorGL

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

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

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

Artemy Tregubenko (arty.name)

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

hshhhhh (hshhhhh.name)

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

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

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

hshhhhh (hshhhhh.name)

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

greli (greli.livejournal.com)

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

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

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

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

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

Виталий

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

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

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

Artemy Tregubenko (arty.name)

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

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

shaltai-boltai

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

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

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

burn.cd

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

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

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

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

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

Популярное