Customer feedback embedded third party page can not be accessed normally! Learn about iframes and get them done in one go.

What is an iframe?

Iframe is an HTML tag

<iframe></iframe>
Copy the code

Some attributes of the iframe tag:

attribute role
frameborder Whether to show borders
width The width of the
height highly
name The name of the
src The URL of the target web site displayed in the iframe
scrolling Whether scroll bars are displayed
sandbox Security restrictions

The sandbox option is used by the top-level context to control iframe security. The configuration items include:

Configuration items role
allow-scripts Allow scripts to run
allow-downlods Allowed to download
allow-same-origin Allow same-domain requests: Ajax
allow-top-navigation Allows navigation using top-level context: window.top
allow-popups Allows a new window to pop from iframe :window.open
allow-forms Allows form submission

For more options, click here

What can iframe do?

The iframe tag is used to nest documents within documents, or pages within web pages. Here’s an example:

Nest page B within page A

A page

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>page A</title>
  </head>
  <body>
    <p>This is page A</p>
    <! Select * from page A where iframe is inserted into page B
    <iframe src="./b.html"></iframe>
  </body>
</html>
Copy the code

B page

<! DOCTYPEhtml>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
    <title>page B</title>
  </head>
  <body>
    <p>This is page B</p>
  </body>
</html>
Copy the code

Page B is embedded in page A

Go to page A and have A look

Nesting works, isn’t it nice? So we can reuse the function of B website directly.

Try nesting Baidu in A page

Next we try to nest the page below and change the SRC of iframe:

<iframe src="https://www.baidu.com"></iframe>
Copy the code

Open page A again and have A look:

What happened to OOXX, why not let nesting?

Take a closer look at the error, there are two problems:

  1. The browser forbids Baidu to carry third-party cookies nested in page A and cannot use Baidu’s cookies saved in the browser. The browser does not set the SameSite cookie to Lax. The default SameSite value is Lax. The browser will only pass the cookie that is same-site =None and Secure (that is, HTTPS protocol) across sites. The sameSite property of the cookie has the following options:

    SameSite option
    Strict Third-party cookies are strictly prohibited
    Lax Send only to GET requests
    None Cookies can only be sent over HTTPS, that is, they must have the Secure field

    More details of the Chrome specification can be found in Documentation 1 and 2 of Chrome

  2. The x-frame-options property is the field set by the site in the response header. This field has the following Options:

X-Frame-Options option
deny Refuse to be nested
sameOrigin Allows web sites with the same domain name to be nested
allow-from example.com/ Allows web sites with a specified domain name to be nested

It turned out that Baidu had made a source restriction on the website, refusing all non-domain websites to nest it. For details about how to configure this field in Nginx, see MDN. Limiting iframe references can effectively avoid many security risks for websites at the source, such as clickjacking.

Not all sites impose citation restrictions, such as Petal (www.huaban.com), Meituan (https://www.meitua…

Cookie passing policies and reference restrictions are a long way off, but these features continue to influence the development of iframe.

The benefits of the iframe

  1. The postMessage method is used to support iframe nesting across domains

  2. Reusing functionality avoids redeveloping functionality

  3. AD pages and top-level pages generally don’t involve page-to-page communication, so nesting is a good fit

  4. Natural sandboxes, which enable CSS and JS isolation, have a place in microfront-end practices

The disadvantage of the iframe

  1. The top page and the embedded page have different styles, the page looks ugly, there is no sense of unity of the project, and the user experience deteriorates.
  2. The main page is loaded only after the inline onLoad event that blocks the top-level page is loaded.
  3. Sharing the connection pool The top page and the inner page share the connection pool. In Chrome, only six HTTP requests can be sent at a time. The embedding of iframe will affect the load of resources on the main page.

tips

  1. Can HTTPS web pages nest HTTP web pages? No, the following error will result

    Mixed Content: The page at ‘www.a.com’ was loaded over HTTPS, but requested an insecure frame ‘www.b.com’. This request has been blocked; the content must be served over HTTPS.

  2. Chrome ://flags/#cookies-without-same-site-must-be-secure Solution: Make jump pages support HTTPS

  3. Unsafe-toss-as-active-content Is not recommended because of security concerns. The unsafe-toss-as-active-content option is not recommended. Solution: Make the download resource service support HTTPS

  4. Chrome ://flags/#same-site-by-default-cookies

  5. What is clickjacking? In the early years, hackers used clickjacking to embed a bank page in a phishing site. When the user went to the phishing site and clicked a common button, what he actually clicked was the confirmation transfer button on the bank page.

conclusion

With the promotion of people’s awareness of personal information security, browser manufacturers pay more attention to the protection of user privacy security. Google, for example, has to pay hefty fines each year for violating users’ privacy, so Chrome is increasingly restricting access to cookies. Browsers have more strict control over cookies, which undoubtedly has a great impact on iframe. Imagine a time in the near future when third-party cookies are completely banned from browsers and iframe sites that nest across domains cannot carry cookies.

If there are any missing points, feel free to leave a comment in the comments section! In this article, iframe extends to cookie and browser security. Later, little sister will write a separate article about Web security and CSP. Pay attention to little sister and learn from it together.