Рубрика «webkit» - 5

Предыстория:

Начался сегодня день не очень удачно… Начальство начало совокуплять мозг по поводу нестандартного поведения браузера Chrome относительно атрибута placeholder (не исчезание подсказки при появлении фокуса на элементе)

Сайтов много, желания что-то переделывать мало.

В результате данной совокупности факторов появился доработанный плагин для jQuery — powerful-placeholder, который добавляет поддержку placeholder старым браузерам + в Chrome при появлении фокуса на элементе скрывает placeholder.

Плагин: github.com/evgentus/powerful-placeholder

Использование:

Читать полностью »

Джофф Гарен (Geoff Garen) из компании Apple обнаружил вызов Sleep() в спинлоке функции TCMalloc сборщика мусора WebKit.

 -#if OS(WINDOWS)
-    Sleep(2);
-#else
-    struct timespec tm;
-    tm.tv_sec = 0;
-    tm.tv_nsec = 2000001;
-    nanosleep(&tm, NULL);
-#endif

После удаления Sleep производительность сборщика в определённых условиях выросла в 3,7 раза. Это наглядный пример, как одна маленькая оптимизация способна и уменьшить размер кода, и одновременно в несколько раз повысить производительность.
Читать полностью »

Команда MoboTab Inc., занимающаяся разработкой популярного браузера Dolphin HD для Android и Apple iOS, сегодня представила бета-версию нового браузера для платформы Android. Ранее браузер был лишь надстройкой над стандартными библиотеками WebKit и V8, заложенными в стандартную поставку сборки дистрибутива Android. Новая же версия пошла по пути Google Chrome Beta и работает со своим движком WebKit. Что из этого вышло, рассмотрю в тесте-сравнении с Google Chrome.
Читать полностью »

Это цикл статей о Web Inspector. Я постараюсь максимально подробно описать его возможности.
В первой серии мы залезем в настройки, посмотрим, что умеет консоль и поиграемся с панелью «Elements».

Так как Web-Inspector не переведен на Русский, я буду сохранять оригинальные названия.

В качестве бонуса, приложу скриншот одной и самых первых версий, из далекого 2006го. Читать полностью »

О том, как Chrome мешает мне искать XSS-уязвимости.

Почему я ищу уязвимости?

Как и многие из вас, я делаю Code Review и первое, что ищу это конечно уязвимости. Когда уязвимость найдена в коде, хорошо бы проверить есть ли она на самом деле через браузер, потому что бывают «ложные тревоги». Это те случаи, когда данные уже приходят фильтрованными и XSS невозможен. Всегда полезно иметь возможность показать разработчику атаку в действии, потому что это хороший аргумент и помогает быстрее перейти к конструктивному решению проблемы, если есть сомнения, что уязвимость таки существует. Но проверку в браузере я делаю не часто — либо проблема очевидна прямо из кода, либо верят на слово. В общем искать уязвимости — это интересно.

Начало этой истории

Друг скинул ссылки на сайт, который ещё год назад имел XSS-уязвимость, о чем я писал владельцам ресурса. Стало интересно проверить снова. Проверил — XSS есть, но вот простейшего подтверждения выполнения JS я получить не смог!..

Google Chrome хакеру не помощник

Я не ломаю сайты и не занимаюсь аудитом безопасности, поэтому возможно то, что я выяснил давно известно для специалистов, но для меня это было открытием.

Первые подозрения

Итак, стал проверять всевозможные варианты внедрения кода — но без результата. По ходу дела выяснил что и как фильтруется, какие есть проверки и прочее, но alert(1); упорно не выполнялся. По ходу дела нашелся ещё и XSRF — приятный бонус!
Читать полностью »

В девелоперской версии Google Chrome (на момент написания статьи — Chrome 20) появилась поддержка новых единиц измерения CSS — vh, vw и vmin, которые около месяца назад были реализованы в движке Webkit. До этого они работали только в Internet Explorer 9-й и 10-й версий. Эти единицы задают размеры объектов относительно высоты или ширины окна. В отличие от процентов, они всегда привязаны именно к окну браузера, а не к контейнеру текущего блока. 1vh равен 1% высоты окна, 1vw — 1% ширины, 1vmin — меньшему из этих двух значений.
Читать полностью »

image Взаимодействие с браузерами никогда не было работой для слабонервных: около полудюжины различных API, различные механизмы IPC, и разные возможности у разных поставщиков. Такие проекты, как WebDriver, пытаются абстрагироваться от этой сложности, к тому же в Сети можно найти десятки других «безголовых» драйверов, использующих WebKit или иные движки. В настоящее время в работе даже находится спецификация W3C на WebDriver.

Инструментирование Google Chrome

Тем не менее, в то время, как создание общего решения является сложной задачей, оказалось, что инструментирование 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.

Читать полностью »

Эти единицы позволяют задавать размеры объектов относительнно окна браузера. Размер считается в процентах от высоты (vh), ширины (vw) или минимального из этих двух значений (vmin). В отличие от указания размеров в процентах, vh, vw и vmin всегда привязяаны к размерам окна, а не контейнера текущего блока. До сих пор их поддерживал только Internet Explorer 9+ (впрочем, IE вместо указанной в стандарте единицы vmin использует обозначение «vm»).

Так, этот пример:

<!doctype html> <head> <style> * { margin:0; padding:0; border:0; }  #red  { 	background:red; 	height:100vh; 	width:100vw; } </style> </head> <body> 	<div id="red">Читать полностью »

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js