Prevent web pages by other web page iframe nested thinking and implementation

I received a message today, saying that our login page is nested by other pages, we can not let other pages nested our page;

Ii. Risk verification measures:

DOM elements in iframe pages cannot be obtained across domains

    window.onload=function(){
        var iframe = document.getElementsByTagName("iframe") [0];
        var win = iframe.contentWindow;  // Get the window object of the ifame child page via contentWindow. (Cross-domain access is not allowed)
        var iframeDocument = iframe.contentWindow.document;
        var input1 = iframeDocument.getElementById("id1");
        input1.onblur = function() {
            console.log(input1.value)
        }
    }
Copy the code

Monitor key information:

When the user clicks outside the non-IFrame area, the external document can be monitored;

    document.onkeydown=function(e){
        var keyNum=window.event? e.keyCode:e.which;console.log(keyNum)
    }
Copy the code

When a user clicks inside an iframe nested page, it is not listened for by an external document, but by an iframecontentWindow.documentObject, but not the same domain page, can not get iframe child page winodW form object;

    var iframe = document.getElementsByTagName("iframe") [0];
    var win = iframe.contentWindow;   
    if(win){
        var iframeDocument = iframe.contentWindow.document;
        iframeDocument.addEventListener("keydown".function(e){
            var keyNum=window.event? e.keyCode:e.which;console.log("iframe-----"+keyNum)
        })
    }   
     
Copy the code

Third, summary

Although without access to the web site is linked to the DOM in domain of embedded web information, but if users accustomed to in an unofficial log entry into, when the unofficial page one day change the code, assume that a few times before entering is a fake interface (phishing site), after landing error and then cut into the iframe, user information will be being stolen, Therefore, there is a risk. Baidu, Youku and YouTube all do this.

Refused to display 'https://youku.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.

4, processing

Reference article:

Removed support for X-frame-options in the label
MDN.. X – Frame – Options response headers
About preventing your web content from being iframe by others
Prohibit websites from being referenced by iframe

Front-end methods:

    if (window.top ! =window.self) {
        / / top. Location. Href = "http://192.168.57.1:8023/";
        console.log('nested')
        alert("dosth")}Copy the code

Comment: There are several ways around this and this is not recommended. For example:

    document.write('');
Copy the code

Many articles on the web refer to the Meta tag plusX-FRAME-OPTIONSProperties, via Google searchmetaandX-FRAME-OPTIONSKeyword to find that the method has been deprecated.X-FRAME-Options in the meta tag

Emails from 2016:

# in this paper,

‘x-frame-options’ will be ignored when inside the
tag (e.g.
). It will continue to be supported as an HTTP header.

# motivation

We are currently trying to support X-frame-options within the
tag by unloading the page while parsing the tag and navigating to a blank page. It’s functional, but not exactly reliable protection.

In fact, all of our XFO implementations are somewhat unreliable because they are all implemented in Blink. We’re working on migrating it to the browser process, but if we need to support the
implementation, it won’t be neat. We either need Blink and // content implementations, or we need another IPC.

I prefer to delete features.

It is recommended to add the response header to the back end. Without further details, please refer to the MDN document: X-frame-options response header

X-frame-options = SAMORIGIN; x-frame-options = SAMORIGIN; x-frame-options = SAMORIGIN; The sub-page protocol is HTTPS and cannot be accessed. However, if the parent page is HTTPS and the child page is HTTP, no authentication is performed.)

DENY

Indicates that the page is not allowed to be displayed in frame, even if it is nested within pages of the same domain name.

SAMEORIGIN

The page can be displayed in the frame of the same domain name page.

ALLOW-FROM uri

Indicates that the page can be displayed in a frame from the specified source.

V. Test and conclusion

Since it is the method of adding HTTP response headers to the back end, there should be no compatibility problem with the browser. However, simple tests have been done as usual. Chrome, UC, FireFox, Opera, Baidu, QQ, 360, IE11 have been tested on the PC side, and MOBILE QQ has been tested on the mobile side.
By adding HTTP response headers to the back end of the implementation to avoid the result of the webpage being nested, in the console reported error, and nested Youtube and Youkun effect consistent:

Refused to display 'https://youku.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.;

Prevent web pages by other web page iframe nested thinking and implementation