Iframe and Frame - what they are and how best to use frames in Html. How to insert an iframe into HTML: example of use Specify the path in the Src attribute of the Frame element

Virus checks often don't detect iframe inserts that may include links to dubious sites, but the new version of the WP AntiVirus plugin will identify them.

Iframe inserts themselves are not malicious code, so they are often not detected by online services that scan a site for viruses. WITH using Iframe inserts often load files that may be located on an external resource. For example, this method can be used to upload a video to your website from You Tube. But very often, iframe inserts are used by attackers to upload files of suspicious content to the victim’s website.

I have already written that I have repeatedly encountered obviously infected sites, but checking them on the antivirus-alarm.ru resource using databases of leading antivirus developers did not reveal anything suspicious. A check on 2ip.ru indicated the presence of suspicious iframe inserts, but without indicating a specific place in the code where they can be found. It also did not indicate whether these inserts were beneficial or malicious.

But with the release latest version With the WP plugin, the situation has changed. According to the developer, this plugin now shows iframe inserts. And you yourself will be able to determine whether they are harmful or not. Knowing what an iframe insert looks like:

If the plugin detects it, based on the address of which resource is indicated in this insert, it is easy to determine whether it is useful or harmful.

Unlike antiviruses for computers, which themselves find and remove malicious code, most antiviruses for the site, such as AntiVirus, only find code that is suspicious from their point of view. The decision to remove it and the removal itself is made by the user. Moreover, for beginners who are not familiar with PHP, only the TAC plugin, designed to test the theme, will really help. I know of only one plugin that not only finds, but also removes bad code. Unfortunately, this plugin has one unpleasant feature. If it cannot cope with the infection on the site, then it blocks access to the site without asking permission.

Therefore you should not put antivirus plugins, if nothing suspicious happens to your site. To perform a preventative check of a website for viruses, it is wiser to use the online services mentioned above. Only after something suspicious has been identified on these services can you turn to plugins that can help pinpoint the location of the malicious code. Again, not everyone has the qualifications for this. It will be easier for beginners to seek help from technical staff. hosting support.

The lion's share of sites become infected after the owner's computer is infected. As a result, the admin login and password are stolen. panels or from hosting. And only a small part becomes infected as a result of hacking. Therefore, the most important measure to protect the site is maintaining the security of your PC. Do not forget that the computer must also have a good .

Element

Frames

What does it do?

How to insert a page into an HTML page? To do this, you need to use , which creates an inline frame in the current document in which another HTML document is displayed.

Display

Display block.

Example code

Powerful yet easy to use

Back in the bad old days of web design, there were many elements that ruined the life of every developer. They were almost always a bad design approach. Fortunately, the element has been deprecated in HTML5. But or "inline frame" is still available. Will it be deprecated in the next version? Maybe we should avoid it? There are several valid uses of this element when creating an HTML page. But you need to understand what it is and how it works to avoid mistakes.

Similarities and differences and

Both of these elements allow you to create a separate HTML document. A link to the content of the document referenced by the current web page is specified in the src attribute.

. . . . . .

The main difference between and is that it enforces the rule that the HTML document takes precedence. Content is displayed within an element that is part of the current document. As an example, consider this embedded video taken from YouTube:

The video is clearly on the HTML page and not in a separate panel. element broke this paradigm and allowed the document to exert control over the browser window by breaking it into several small panels (frames), each of which displays separate document. All other differences between and follow from this basic difference.

Don't remake frame-based layouts with iframes

Someday you may be faced with the task of updating an old website that was built using frames. You might also want to use a fixed-width layout to recreate the same nightmare of independent panels and sills. But you won't be able to use the target attribute to open a link in a separate frame. You can start looking for JavaScript solutions. Please, do not do that.

Good (and terrible) uses

There are several valid use cases for creating an HTML page:

  • embedding third-party media content;
  • embedding your own media content through a cross-platform document;
  • embedding code examples;
  • embedding third-party “applets” as forms of payment.

Here are some terrible use cases:

  • Photo gallery;
  • forum or chat.

If you need to embed independent, pre-existing HTML documents into the current one, use . If you're building everything from scratch, there's no reason to split the page design into multiple separate documents. Especially if they aren't actually independent pieces of content.

iframe attributes
Attribute name Meaning Description
sandbox Allow-same-origin
Allow-top-navigation
Allow-forms
Allow-scripts
Sets a number of restrictions on the content loaded into the frame. Set before creating an HTML page.
scrolling yes no auto Determines whether to show scrolls in the frame or not. Deprecated in HTML5. Use CSS instead.
Name Name Specifies the name of the frame.
Align left right top
middle bottom
Determines the frame's alignment relative to surrounding elements. Is outdated. Use CSS instead.
frameborder yes (or 1)
no
Used to enable the display of a border around the frame. Deprecated in HTML5. Use CSS instead.
longdesc URL Used to specify the URL of a page that contains a long description of the contents of the frame. Is outdated. Use CSS instead.
marginwidth pixels Used to control the width of the padding from the content to the frame border. Is outdated. Use CSS instead.
src URL Specifies the document URL to display in the IFRAME.
vspace pixels Sets the vertical margins from the frame to the surrounding content. Is outdated. Use CSS instead.
width pixels % Defines the width of the frame by HTML page.

This publication is a translation of the article “”, prepared by the friendly project team

At the dawn of website building, web resources widely used frames to display individual parts of pages. But with the arrival new version HTML 5 has changed everything. Markup elements , and are deprecated. They were replaced by a single tag - . How to add to html? The example below will be clear even to a beginner in programming.

What are frames?

The frame is the basis of most first web pages. If translated literally, this word means “frame,” that is, a frame is a small part of a page in a browser. The widespread use of frames in the past can be explained by the low quality and high cost of Internet traffic. As a rule, the site was divided into 3-5 parts, each of which served a specific purpose:

  • “header” (top frame along the width of the page) - displays the name of the resource;
  • left/right “glass” - menu display;
  • The central frame is a display of site content.

Splitting the page into parts made it possible to overload only a certain part when updating it. For example, the user clicked a menu item, and new content was downloaded to the central frame.

Modern Frames in HTML 5

Why is it needed in HTML? An example is inserting content from a third-party resource. The classic situation is when a web developer wants to show the location of an object on a map. What should I do? Draw a site plan from scratch? No - there is a simpler solution: embed a Google Map, Yandex Maps or 2GIS element on the page. The problem is solved in four steps.

  • You need to go to the website of any mapping service.
  • Find the desired object. Once you know the exact address, you can enter it in the search window.
  • Using the “Save and get code” button (for Yandex.Maps) or “Done” (for google maps) get the embed code.
  • All that remains is to enter the generated markup tags onto the page.
  • Additionally, you can select the map size and configure other display options.

    How else can you use it in HTML?? An example is inserting video materials from the Youtube resource. Multimedia technologies attract Internet users, which is why video content is so popular. The developer will handle the installation of the video quickly.

  • Should be uploaded to Youtube own video or find a third-party file to stream.
  • Get the tag by selecting the "HTML Code" button
  • The final step is to paste into . An example of the resulting tag content will be discussed below.
  • Both examples used automatic code generation, but professional developers must be able to compose it themselves. Firstly, this will allow them to understand the layout of the page and, if necessary, modify it. Secondly, the markup of site elements (even though they belong to an external resource) is not always formed without the participation of the webmaster. This is where the high qualifications of the developer come into play.

    Syntax

    So, before you start laying out the page, you need to consider the iframe (html) tag: what it is and how to use it correctly.

    First of all, it should be noted that the tag is paired. Between the opening and closing elements, you specify the content that will be displayed in browsers that do not support this markup element. Main tag attributes:

    • width(width);
    • height(height);
    • src (address of the downloaded resource);
    • align(align method);
    • frameborder;
    • allowfullscreen.

    Thus, the code for . The HTML example is demonstrated in full below:

    In the above markup, it is enough to replace the site address with any other one and, if necessary, adjust the frame size.

    One of the most common ways to infect the computer of website visitors is to exploit a vulnerability associated with an overflow of user browser buffers. The recipe is quite simple. Attackers inject malicious code by inserting iframes into website pages and try to download malicious files to an unsuspecting user’s computer. It is quite easy to detect such malicious insets on your websites. You just have to pay attention to the code fragments that use the iframe connection. Such inserts can be in both HTML and PHP files.

    Attackers almost always try to hide the use of malicious bets as much as possible from owners, hiding them visually for resource users and obfuscating (obfuscating) their code.

    Hiding iframe inserts from users' eyes

    To disguise a malicious insert, hackers in most cases use the same method over and over again - they set the properties of the tag so that it is not displayed on the page, but is contained in its code. Most often, the width and length are set to zero or one pixel: width="1px", height="1px".

    For example, malicious code might look like this:

    However, often hackers do not limit themselves to such disguise, complementing the concealment with more sophisticated techniques that can confuse and complicate search and elimination even for advanced programmers.

    Obfuscation

    This is one of the most common methods of protecting code in programming in unstructured languages ​​(such as, for example, PHP). In fact, all encryption is about mixing up/obfuscating the code itself by changing the names of variables and other elements. As a result, it is quite difficult to recognize signs of maliciousness in obfuscated code and is only possible based on indirect signs of the explicit use of special JS (JavaScript) functions used specifically for obfuscation: unescape , fromCharCode .

    However, the discovery of obfuscated code on a website does not mean that it is definitely harmful or easy to remove. You need to understand that, firstly, attackers could obfuscate the code, also capturing part of the site’s working code. In this case, when you try to cut out an encrypted fragment, you risk crashing your resource. Secondly, obfuscated code may not be malicious, but only a consequence of the operation of your CMS or its individual components, as well as additional modules you have installed.

    In any case, if you encounter suspicious obfuscated code, you need to act with the utmost care.

    Other signs of infection

    If you doubt whether the code you found is malicious, you can try to analyze indirect signs. If you have a large number of files on your site, you may want to pay attention to the date and time last change files. If you know well the scenarios for how your CMS works with files, you can take a closer look at files changed on the same date at the same time, or with changes occurring at the same time interval, for example, 1 second.

    If you are an advanced programmer, you can write a script that checks for the presence of the type of inserts you have detected in all files on your site. If you are even more advanced, you can force the script to cut out inserts, however, you always need to be careful.

    Alternative Methods

    We recommend that you use the Virusday service to remove malicious inserts even if you are an advanced specialist. Our service not only contains many signatures by which it finds malicious codes, but also saves time! Plus, the cost of using Virusday for cleaning will likely be much lower than paying for your own time. You will be able to detect and remove not only iframe inserts, but also many other threats. You will probably be able to find and automatically remove the threat that caused iframe inserts to appear on your site, such as Shell.

    Virusday service team.

    We made an analogue of the Google Webmaster Marker tool. Let me remind you that Marker is a tool in the Google Webmaster account that allows you to annotate your Open Graph pages with tags. To do this, you simply select a piece of text on the page with your mouse and indicate that this is the title, and this is the rating. Your page is then loaded into an Iframe in the webmaster’s account.

    Now Google, having encountered a similar page on your site, already knows what kind of content is published on it, and how to beautifully parse it into its essence (article, product, video..)

    We needed similar functionality. The task seemed simple and exclusively client side. However, in practice, the solution lies at the intersection of clientside and serverside (“pure” JS programmers may not know anything about various proxy servers and take a very long time to approach the project). However, I did not find an article on the Internet that would describe the entire technology from start to finish. I would also like to say thank you to the BeLove user and our security guards for their help.

    In our case, we wanted the webmaster to be able to conveniently (by clicking with the mouse) get the xPath value for certain elements on his page.

    Iframe “Same Origin” And so in our admin panel a person must enter the URL of the page of his site, we will display it in the iFrame, the person will point the mouse where necessary, we will get the required xPath. Everything would be OK, but we do not have access to the content of a page from another domain loaded into an iframe in our admin panel (our domain), due to the browser’s security policy.CORS - Cross origin resource sharing Some people advised me to use CORS. A fashionable technology that solves many problems with accessing content from another domain in the browser and allows you to bypass same origin policy restrictions.
    A site that wants to give access to its content on the pages of someone else’s domain simply writes in the http header:
    Access-Control-Allow-Origin: http://example.com
    And in the http header of a request coming from a page of another domain from the browser there must be an origin field:
    Origin: www.mysupersite.com
    It is clear that the browser itself adds the origin field to the request. Let's add the article on Habré and see what modern browsers add Origin even to a request for the same domain:

    However:

  • browser does not indicate origin in the header of the request to the page loading in the iframe (can anyone explain why?)
  • we don't want to ask webmasters to specify the Access-Control-Allow-Origin header
  • Iframe sandbox Another fashionable technology. Sandbox is an attribute of the Iframe tag. One of the values ​​of this attribute can be set to allow-same-origin . Before I started digging into this topic, I didn’t know what exactly this attribute does, but it sounded very tempting. However, the sandbox attribute simply limits what a page loaded in an iframe can do and has no bearing on the issue of accessing the contents of the frame from the parent document.

    Specifically, the allow-same-origin value (or rather, its absence) just says that the iframe should always be regarded as loaded from a foreign domain (for example, you cannot send an AJAX request to the domain of the parent document from such a frame)

    Let's see how Google did it Time to see how big brother did it

    Let's pay attention to the src attribute of the iframe element: src="https://wmthighlighter.googleusercontent.com/webmasters/data-highlighter/RenderFrame/007....." - our page is loaded into the admin panel from the Google domain. Further, it is even more severe: even scripts and images in the source document are run through a proxy. All src, href... are replaced in html with proxied ones. Something like this:

    All resources that your page uses are also stored on Google proxy servers. Here's ours for example.

    CGIProxy? It immediately seemed that in order to do the same thing, you need to raise a full-fledged proxy like CGIProxy. This proxy server does approximately the same thing as Google's wmthighlighter.googleusercontent.com
    Visit the script"s URL to start a browsing session. Once you"ve gotten a page through the proxy, everything it links to will automatically go through the proxy. You can bookmark pages you browse to, and your bookmarks will go through the proxy as they did the first time. Your own Proxy! However, if you narrow the task down, writing a simple proxy yourself is much easier. The fact is that Google does this, sending all page content through a proxy is not at all necessary. We just need the html of any page to be served from our domain, and resources can be loaded from the original domain. We have discarded HTTPS for now.
    There is no need for super performance or convenient settings here, and this can be done quickly and using anything, from node.js to php. We wrote a servlet in Java. Download the page What should a proxy servlet do? Using the get parameter, we get the url of the page that needs to be loaded, then download the page.

    Be sure to determine the encoding of the page (via http response or charset in html) - our proxy must respond in the same encoding as the page we loaded. We’ll also define the Content-Type just in case, although it’s clear that we’re getting the page in text/html and we’ll give it back the same way.
    final String url = request.getParameter("url");
    final HttpGet requestApache = new HttpGet(url);

    final HttpClient httpClient = new DefaultHttpClient();
    final HttpResponse responseApache = httpClient.execute(requestApache);
    final HttpEntity entity = responseApache.getEntity();
    Our proxy works at
    http://adminpanel.indexisto.com/highlighter?url=http://habrahabr.ru
    - this is how the hub will load from our domain. We give this address in the iframe and try to access the DOM tree of the hub via JS in the admin panel - everything works. CSRF naturally will not work since the page was loaded from our proxy which does not have cookies. SSRF problem Let’s load the site with the “localhost” address into our iframe - oops, there you go start page our nginx. Let's try some internal (not visible to the outside) resource on the same network as our proxy server. For example secured_crm.indexisto.com - everything is in place.
    Of course we are trying to prohibit these things in our proxy, if someone tries to proxy localhost we exit without returning anything:
    if (url.contains("localhost")||url.contains("127")||url.contains("highlighter")||url.contains("file")) ( LOG.debug("Trying to get local resource. Url = " + url); return; )
    but we will clearly not list all network resources here. This means we need to move the proxy into a completely isolated environment so that the machine sees nothing except the Internet, itself and our proxy. We select a machine, configure and launch our servlet there. XSS problem Let's upload our page into our iframe on which we will write:
    alert("xss")
    An alert pops up. Sadly. This can be bypassed with the iframe sandbox allow-scripts attribute, but what about older browsers that don’t really understand this attribute? You can only steal your cookies, but you still can’t leave them like that.
    We move the servlet not only to a separate machine, but also give it a separate subdomain highlighter.indexisto.com .

    We arrived, we broke our own solution with bypassing cross-domain restrictions. Now we can't reach the iframe content again.

    Continuing to find a solution from Google, I opened our page served through a proxy in a separate window

    And I noticed a strange error in the console.
    CrossPageChannel: Can't connect, peer window-object not set.
    It became clear that organizing everything was more complicated than simply loading a page into an iframe from your domain. Pages communicate with each other. Accordingly, we move towards window.postMessage

    Post Message It was inhumane to force the webmaster to embed our script into their page, which would ensure that page elements were selected with the mouse, and then the xPath of these elements would be sent to us in the parent document via postMessage. However, no one is stopping our proxy from injecting any scripts into the page loaded into the iFrame.
    We save all the scripts necessary for implementation to a file and insert them before the closing body:
    final int positionToInsert = responseText.indexOf("");
    final InputStream inputStream = getServletContext().getResourceAsStream("/WEB-INF/inject.js");
    final StringWriter writer = new StringWriter();
    IOUtils.copy(inputStream, writer);
    final String jsToInsert = writer.toString();

    responseText = responseText.substring(0, positionToInsert) + jsToInsert + responseText.substring(positionToInsert, responseText.length()); for testing, we insert an alert - everything works. The JS part - we highlight the house element under the mouse and get xpath Okay, let's move on to the actual JS that we inserted into the webmaster's page. We need to highlight dom elements over which a person moves the mouse. It is better to do this using shadow because then the element will not move and the entire page will jump. We hang onmouseover on the body and look at the target of the event. In the same handler I calculate the xpath of the element. It’s better to calculate the xPath of an element per click, but I didn’t notice any slowdowns in this implementation either.
    elmFrame.contentWindow.document.body.onmouseover= function(ev)( ev.target.style.boxShadow = "0px 0px 5px red"; curXpath = getXPathFromElement(ev.target); )

    I'm not providing the implementation of getting the xPath of a DOM element here. There are many snippets on how to do this. These snippets can be modified to suit your needs, for example, you only need tags in xpath. Or do you need ids if they exist and classes if there are no ids - everyone has their own requirements.
    Here is an example of a proxy

    home page

    We put nginx in front of the proxy, it listens to port 80, and we remove the proxy itself to another port. We close all other ports except 80 from the outside world.

    Now let's make the proxy work only through the admin panel. At the moment when the webmaster enters the URL of his site, we quickly run to the server where we generate an md5 hash from the current TimeStamp + 1 hour, the URL itself and the super-secret when:
    final String md5Me = timeStampExpires + urlEncoded + "SUPERSECRET";
    final MessageDigest md = MessageDigest.getInstance("MD5");
    md.reset();
    md.update(md5Me.getBytes("UTF-8"));

    String code = Base64.encodeBase64String(md.digest());
    code = code.replaceAll("/", "_");

    code = code.replaceAll("\\+","-");

    Also note that in the code we receive the md5 string not as the usual hex, but in base64 encoding, plus in the resulting md5 we make strange replacements of the slash and plus characters with underscores and dashes.

    The fact is that ngnix uses base64 Filename Safe Alphabet tools.ietf.org/html/rfc3548#page-6