Example of JavaScript preventing Web pages from being embedded into the framework

Q: The website has been embedded into a framework by a malicious website before, and the title and content of the webpage are completely irrelevant to the website, which is clearly meant to fool the user's browsing, we can solve this problem through JavaScript script testing.

It seems that this phenomenon is quite common in China. What is the difference between Loading webpages and placing advertisements and website logos?

Visitors with unknown information can only see that the address bar is the URL of the website, but they do not know the real content of the webpage. In fact, the webpage is from another website, seriously damaging the traffic and user experience of the origin site.

Why am I opposed to this practice?

The framework may bring us a lot of benefits. Currently, website advertisements are basically loaded using the framework, but on normal webpages, I strongly oppose this approach.

It intentionally shields websites embedded in webpages, infringes the copyright of the original author, and the visitors' right to know;
A large number of practitioners use invisible frameworks, which make the framework webpage exactly the same as the embedded webpage visually and highly fraudulent;
The advertisements (even viruses and trojans) attached to the top or surrounding pages of the embedded web page by a poor operator not only damage the original design intent and image of the original author, but also infringe upon the use of others' resources for profit;
If a visitor clicks from one webpage to another within the framework, the address bar of the browser remains unchanged. This is a poor user experience and the visitor will blame the author of the original webpage for this experience.
How can we reasonably use the framework?

Can't we use the framework in a friendly way? No, it depends on the situation:

In the conspicuous position of the framework webpage, it clearly indicates that the webpage uses the framework technology and explicitly lists the URL URLs of the original webpage. This method is used in many examples of source code websites.
The "remove framework" feature is provided to visitors in the eye-catching position of the framework webpage.
Do not attach any advertisement or malicious code.
If you often use Google image search, you will know that Google is doing this.

Solution

It is not enough to condemn it alone. We have to take some action to prevent such malicious embedding framework. Below is the code that uses JavaScript to prevent web pages from being embedded into the framework, with detailed code explanations and instructions for use.

// Determine whether the current window object is the top object
If (window! = Top)
// If not, the top object URL is automatically directed to the URL of the embedded webpage
Top. location. href = window. location. href;
This code is valid. However, after a problem occurs, no one can embed your webpage into the framework, including yourself. On the surface, this problem is quite simple. You only need to make another judgment: whether the domain names of the current framework and the top-level framework are the same, and if so, a URL redirection is implemented.

If (top. location. hostname! = Window. location. hostname ){
Top. location. href = window. location. href;
}
However, the above code may run incorrectly and cannot be run at all.

Suppose top. location. hostname is www.111cn.net, and window. location. hostname is www.222.com. That is to say, 111.com embeds 222.com into its webpage. In this case, compare top. location. hostname! = Window. location. hostname the browser will prompt a code error!

Because they are cross-domain, the browser's security policy does not allow 222.com webpages to operate on 111.com webpages, and vice versa. IE calls this error "no permission ". Further, the browser does not even allow you to view the top. location. hostname. When this object is viewed across domains, an error is reported directly.

In fact, this prompts us to check whether the top. location. hostname error is returned. If an error is reported, it indicates that cross-origin exists, and URL redirection is performed on the top object. If no error is reported, it indicates that no cross-origin exists (or no framework is used.

Try {
Top. location. hostname;
}
Catch (e ){
Top. location. href = window. location. href;
}
This is correct and can be run correctly in IE and Firefox. However, Chrome may encounter errors. For some reason, Chrome does not report errors for top. location. hostname in cross-origin scenarios!
No way. You can only add additional code for Chrome.

Try {
Top. location. hostname;
If (top. location. hostname! = Window. location. hostname ){
Top. location. href = window. location. href;
}
}
Catch (e ){
Top. location. href = window. location. href;
}
Okay, this is the final code. All domain names except the local domain name cannot embed your webpage into the framework. This code is used when the Internet is in use. In other words, web snapshots of some search engines are automatically redirected to real web pages.