Головоломка для верстальщика: CSS не видно, картинка спрятана
Хотите голову поломать? Вот вам тест на знание всякого странного, откройте следующий урл в «Опере»: /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]Когда догадаетесь где тело страницы, переходите на уровень два — догадайтесь откуда берётся картинка.
Тело страницы — в bolk.css, который подключается через заголовок Link:
А вот почему url(bolk.css#0x5F0xBF0xFF0xDC0x530xF60....) превращается в картинку — не пойму...
Заголовок ищется легко, а дальше я не крут а наоборот :)
Троллишь читателей? :)
http://bolknote.ru/all/2848#09
А картинка это X BitMap, судя по всему.
На сервере проверяешь реферер и отдаешь картинку?
Как сказали товарищи выше, в заголовках отдаётся 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...», и Опера его корректно отображает. Какой-то экзотический однобитный формат картинки, который другие браузеры не поддерживают, судя по всему.
я уже видел у кого-то пустое тело страницы и генерацию всего через css прикреплённый в заголовках
а вот картинка в виде url(bolk.css#0x…) напомнила мне mht, кажется, именно в нём я видел такую адресацию встроенных ресурсов. Кстати, размер строки ровно 800 байт = 6400 бит, а картинка размером 80х80=6400, ровно по
если перейти на http://bolknote.ru/files/opera-mystery/1 и отредактировать исходник страницы, вставив картинку с правильным адресом, то она будет показана без рамки. Однако почему-то Опера для этой картинки не показывает контекстное меню картинок. Это подозрительно.
Комментарий для arty.name:
Потому что когда картинка бекраундом оно никогда не показывается.
Не понял как сделана картинка, наверняка разновидность твоего любимого data-uri, а вот рамка сделана очень круто. Понравилась куда больше картинки :).
Картинка явно зашифрована во фрагменте
Всё что после „#“ явно и есть закодированное изображение, предположительно, в формате WBMP. Не очень понятно как оно так считывается.
Надо же, всё расколупали за ночь :)
Недавно общаясь с пепелсбеем в твиттере пришёл к тому, что использование link http header — это единственный реальный способ задания произвольного урла для фавикона на всём сайте, даже не для HTML ресурсов, жаль что только в опере работает
В общем, сегодня напишу как сделано.
Комментарий для hshhhhh.name:
я писал про то, что даже вставленная явно, а не через CSS, эта картинка всё равно выдаёт контекстное меню страницы, а не картинки
Комментарий для Евгения Степанищева:
Дык драгонфлай (по крайней мере, под виндой) всё показывает.
Чего там колупать.
Комментарий для burn.cd:
Здравствуйте!
← Вот тут слева есть меню, там есть пункт «Обо мне», на той странице вся публичная контактная информация.