This is the 20th day of my participation in the August Text Challenge.More challenges in August

preface

Yesterday, I wrote an article about the cross-domain communication problem of iframe, which is a nested IFrame, which cannot communicate with the main page because of cross-domain, and then proposed several solutions.

Iframes cannot communicate across domains, but pages can still be displayed. Today we will talk about how to restrict websites from being nested by iframes, meaning that pages cannot be displayed.

The effect is similar to the following:

Iframe nesting is disabled

The first way

  1. addX-Frame-OptionsResponse headers

The response header, which is used to determine whether to allow web pages to be nested with the iframe element, has three values

  • deny

    Do not allow any web pages to be nested, including homologous domain names.

  • sameorigin

    Only domain names of the same origin can be accessed

    • Such ashttps://test.aaa.com/abcnestedhttps://test.aaa.com/testWeb pages, homologous, allow nesting
    • Such ashttps://test.aaa.com/abcnestedhttps://cp3.abc.com/testWeb pages, different sources, can not be nested

  • allow-from url

    The domain names of urls can be nested. Multiple urls can be separated by commas (,). For example, allow-from http://aaa.com and http://aaa.com are allowed to nest this web page.

    Google Chrome does not support allow-from, firefox does

Let’s put it into practice:

Create a new file

index.js

const http = require('http')
http.createServer((req, res) = > {
  res.writeHead(200, {
   'Content-Type': 'text/html; charset=UTF-8'.'X-Frame-Options': 'sameorigin'   // Only same-origin domain names are allowed
  })
  res.end('Hello I'm CP3! ')
}).listen(8081)

console.log('Service is started, please open http://127.0.0.1:8081')
Copy the code

Start the service using Node index.js

Then create a new page a.HTML and embed it

<div>
  <iframe src="http://127.0.0.1:8081" frameborder="0"></iframe>
</div>
Copy the code

Start a service with http-server, then open your browser to http://127.0.0.1:8080

That’s it. It’s working

Set the Content ws-security – Policy

Content-security-policy (CSP) defines the resources allowed to be loaded on web pages to protect against external XSS attacks to a certain extent.

It can set a number of qualifying policies, so here we’re limiting the nesting of iframes, so “Content-security-policy “:” frame-rooted ‘self'”.

const http = require('http')
http.createServer((req, res) = > {
  res.writeHead(200, {
    'Content-Type': 'text/html; charset=UTF-8'."Content-Security-Policy": "frame-ancestors 'self'"
  })
  res.end('Hello I'm CP3! ')
}).listen(8081)

console.log('Service is started, please open http://127.0.0.1:8081')

Copy the code

In effect, the effect is as follows:

Judge by window

Determine whether the current page’s top window window.top is equal to its window window.self

If not, it is because of the embedded iframe, because the window of the iframe itself is not equal to the top-level window.

  if (window.top ! =window.self) {
    window.top.location = window.self.location; // Replace the address of the top-level window
  }
Copy the code

conclusion

These are just a few ways to prevent websites from being nested by iframes

  • addX-Frame-OptionsResponse headers `
  • Set the Content ws-security – Policy
  • Judge by window

Thank you for reading.