Это цикл статей о Web Inspector. Я постараюсь максимально подробно описать его возможности.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».
Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.
В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го. Читать полностью »
О том, как Chrome мешает мне искать XSS-уязвимости.
Как и многие из вас, я делаю Code Review и первое, что ищу это конечно уязвимости. Когда уязвимость найдена в коде, хорошо бы проверить есть ли она на самом деле через браузер, потому что бывают «ложные тревоги». Это те случаи, когда данные уже приходят фильтрованными и XSS невозможен. Всегда полезно иметь возможность показать разработчику атаку в действии, потому что это хороший аргумент и помогает быстрее перейти к конструктивному решению проблемы, если есть сомнения, что уязвимость таки существует. Но проверку в браузере я делаю не часто — либо проблема очевидна прямо из кода, либо верят на слово. В общем искать уязвимости — это интересно.
Друг скинул ссылки на сайт, который ещё год назад имел XSS-уязвимость, о чем я писал владельцам ресурса. Стало интересно проверить снова. Проверил — XSS есть, но вот простейшего подтверждения выполнения JS я получить не смог!..
Я не ломаю сайты и не занимаюсь аудитом безопасности, поэтому возможно то, что я выяснил давно известно для специалистов, но для меня это было открытием.
Итак, стал проверять всевозможные варианты внедрения кода — но без результата. По ходу дела выяснил что и как фильтруется, какие есть проверки и прочее, но alert(1); упорно не выполнялся. По ходу дела нашелся ещё и XSRF — приятный бонус!
Читать полностью »
Взаимодействие с браузерами никогда не было работой для слабонервных: около полудюжины различных API, различные механизмы IPC, и разные возможности у разных поставщиков. Такие проекты, как WebDriver, пытаются абстрагироваться от этой сложности, к тому же в Сети можно найти десятки других «безголовых» драйверов, использующих WebKit или иные движки. В настоящее время в работе даже находится спецификация W3C на WebDriver.
Тем не менее, в то время, как создание общего решения является сложной задачей, оказалось, что инструментирование Chrome очень просто, — как я недавно обнаружил при исследовании некоторых вопросов, связанных с сетевыми задержками. Начиная с 18 версии, Chrome теперь поддерживает протокол удалённой отладки v1.0, который предоставляет все возможности браузера с помощью обычного WebSocket!
/Applications/Path To/Google Chrome --remote-debugging-port=9222 # OSX
$> curl localhost:9222/json
[ {
"devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1",
"faviconUrl": "",
"thumbnailUrl": "/thumb/chrome://newtab/",
"title": "New Tab",
"url": "chrome://newtab/",
"webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1"
} ]
После появления сетчаточных дисплеев люди ищут альтернативы PNG-значкам, не зависящие от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.
Шрифты со значками восхитительны, но…
они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):
PhantomJS — это сборка движка WebKit без графического интерфейса, позволяющая в режиме консоли загружать веб-страницу, выполнять JavaScript, полноценно работать с DOM, Canvas и SVG. Одним из главных заявленных применений PhantomJS является автоматизированное функциональное тестирование пользовательского интерфейса. PhantomJS имеет интеграцию с различными фреймворками для тестирования JavaScript и веб-страниц. Посмотрим, что можно сделать на базе стандартного функционала PhantomJS, чтобы протестировать отдельный компонент и целое приложение, написанное на ExtJS/Sencha. В этой статье я приведу некоторую простейшую заготовку для тестировочного фреймворка, иллюстрирующую подход к тестированию кода, основанного на сторонней JavaScript-библиотеке. Весь код, представленный в статье, доступен на GitHub.
Добрый день! Мы — Windy Press, молодая компания, выросшая из группы энтузиастов, объединенный общей идеей — создания высококлассных интерактивных электронных книг для детей и взрослых. С момента основания компании в конце 2010 года нашими принципами являются… бла-бла-бла… нет, про это вы прочитаете в пресс-релизе :-)
С чего же начать?
А точнее, небольшая сказка, которую несколько лет назад написала для своего двухлетнего сына англичанка Хелен Страттон-Вуд. Далеко от нее, в Сибири, живёт молодой дизайнер Влад ГерасимовЧитать полностью »
Многие веб-мастера для придания оформления ссылкам, используют css селекторы вида [href^=”http://samedomen”], чтобы ссылки на определенный адрес по разному оформлялись не используя классы.
В одной админке использовал такой селектор, для придания иконки ссылке в зависимости от url. Однако у себя на Google Chrome 17 столкнулся с багом, что иконки у всех ссылок одинаковые. Во всех остальных браузерах(В том числе и в IE8 и Safari 5), все нормально. Ниже скриншот с простейшим примером.
Для простоты примера, я убрал из кода все лишнее.
<!DOCTYPE html> <html> <head> <metaЧитать полностью »