Post
Ask Question

Disable New Window/Tab in Web Applications

Introduction

 
In this article, we will learn how to disable the new window/tab in web applications. There are two challenges in preventing multiple windows or tab usage in web applications: i.e how can we differentiate among two requests (GET or POST) at the server-side and how we can stop the user from generating a request (GET or POST) from two tabbed/different windows at the client-side.
 
The solution to the above problems is the use of window.name at the client-side using JavaScript and checking the HTTP Referer header at the server-side.
 
Step 1: First we create a Homepage.aspx in our website, like this:
  1. <head runat="server">  
  2.     <title>Home - Restrict Multiple Tab</title>  
  3.     <script language="javascript" type="text/javascript">  
  4.         if(window.name != "<%=GetWindowName()%>")  
  5.         {  
  6.             window.name = "invalidAccess";  
  7.             window.open("InvalidAccess.aspx", "_self");  
  8.         }  
  9.     </script>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.         <div>  
  14.             <h2>Try to Open the Link given below either in new window or tab.</h2><br />  
  15.             <img src="image/img1.jpg" alt="Image" align="right"  />  
  16.             <br />  
  17.             <asp:HyperLink ID="hlDemo1" runat="server" NavigateUrl="~/Demo1.aspx">Page 1</asp:HyperLink>  
  18.                <asp:HyperLink ID="hlDemo2" runat="server" NavigateUrl="~/Demo2.aspx">Page 2</asp:HyperLink>  
  19.                  
  20.             <asp:HyperLink ID="hlDemo3" runat="server" NavigateUrl="~/Demo3.aspx">Page 3</asp:HyperLink>  
  21.         </div>  
  22.     </form> 
The output of this page looks like this
 
Clipboard01.jpg
 
Step 2: Now create a Demo1.aspx page:
  1. <head runat="server">  
  2.     <title>Demo 1</title>  
  3.     <script language="javascript" type="text/javascript">  
  4.         if(window.name != "<%=GetWindowName()%>")  
  5.         {  
  6.             window.name = "invalidAccess";  
  7.             window.open("InvalidAccess.aspx", "_self");  
  8.         }  
  9.     </script>  
  10. </head>  
  11. <body  bgcolor="green">  
  12.     <form id="form1" runat="server" >  
  13.     <div>  
  14.     <h1> Page 1 </h1>  
  15.             Try to Open the Link given below either in new window or tab.<br />  
  16.             <img src="image/img.jpg" alt="Image" align="right"  />  
  17.             <br />  
  18.             <asp:HyperLink ID="hlDemo1" runat="server" NavigateUrl="~/Demo1.aspx">Page 1</asp:HyperLink>  
  19.                <asp:HyperLink ID="hlDemo2" runat="server" NavigateUrl="~/Demo2.aspx">Page 2</asp:HyperLink>  
  20.                  
  21.             <asp:HyperLink ID="hlDemo3" runat="server" NavigateUrl="~/Demo3.aspx">Page 3</asp:HyperLink>  
  22.         </div>  
  23.     </form> 
The output of this page looks like this
 
Clipboard02.jpg
 
Step 3 : Now create a Demo2.aspx page
  1. <head runat="server">  
  2.     <title>Demo 2</title>  
  3.     <script language="javascript" type="text/javascript">  
  4.         if(window.name != "<%=GetWindowName()%>")  
  5.         {  
  6.             window.name = "invalidAccess";  
  7.             window.open("InvalidAccess.aspx", "_self");  
  8.         }  
  9.     </script>  
  10. </head>  
  11. <body bgcolor="lime">  
  12.     <form id="form1" runat="server">  
  13.      <div>  
  14.      <h1>Page 2</h1>  
  15.             Try to Open the Link given below either in new window or tab.<br />  
  16.             <img src="image/img.jpg" alt="Image" align="right"  />  
  17.             <br />  
  18.             <asp:HyperLink ID="hlDemo1" runat="server" NavigateUrl="~/Demo1.aspx">Page 1</asp:HyperLink>  
  19.                <asp:HyperLink ID="hlDemo2" runat="server" NavigateUrl="~/Demo2.aspx">Page 2</asp:HyperLink>  
  20.                  
  21.             <asp:HyperLink ID="hlDemo3" runat="server" NavigateUrl="~/Demo3.aspx">Page 3</asp:HyperLink>  
  22.         </div>  
  23.     </form>  
  24. </body> 
The output of this page looks like this
 
Clipboard03.jpg
 
Step 4 : Now create a Demo3.aspx page
  1. <html xmlns="http://www.w3.org/1999/xhtml" >  
  2. <head runat="server">  
  3.     <title>Demo 3</title>  
  4.     <script language="javascript" type="text/javascript">  
  5.         if(window.name != "<%=GetWindowName()%>")  
  6.         {  
  7.             window.name = "invalidAccess";  
  8.             window.open("InvalidAccess.aspx", "_self");  
  9.         }  
  10.     </script>  
  11. </head>  
  12. <body bgcolor="#669999">  
  13.     <form id="form1" runat="server">  
  14.      <div>  
  15.      <h1>Page 3</h1>  
  16.             Try to Open the Link given below either in new window or tab.<br />  
  17.             <img src="image/img.jpg" alt="Image" align="right"  />  
  18.             <br />  
  19.             <asp:HyperLink ID="hlDemo1" runat="server" NavigateUrl="~/Demo1.aspx">Page 1</asp:HyperLink>  
  20.                <asp:HyperLink ID="hlDemo2" runat="server" NavigateUrl="~/Demo2.aspx">Page 2</asp:HyperLink>  
  21.                  
  22.             <asp:HyperLink ID="hlDemo3" runat="server" NavigateUrl="~/Demo3.aspx">Page 3</asp:HyperLink>  
  23.         </div>  
  24.     </form>  
  25. </body> 
The output of this page looks like this
 
Clipboard04.jpg
 
Step 5: Create a Default.aspx page where we use window.name at the client-side using JavaScript. On page load, the following script will execute:
  1. <head runat="server">  
  2.     <title>Default</title>  
  3.     <script language="javascript" type="text/javascript">  
  4.         if (window.name == "default") {  
  5.             var windowFeatures = 'channelmode=0, directories=0, location=0, menubar=0, resizable=0, scrollbars=1,status=1,titlebar=0,toolbar=0,top=0,left=0,width=800,height=600';  
  6.             //With windowFeatures  
  7.             window.open("Home.aspx", "<%=GetWindowName()%>", windowFeatures);  
  8.             window.opener = top;  
  9.             window.close();  
  10.         }  
  11.         else if (window.name == "") {  
  12.             window.name = "default";  
  13.             window.open("Default.aspx", "_self");  
  14.         }  
  15.         else if (window.name == "invalidAccess") {  
  16.             alert("Invalid access. Please close the window, and try again.");  
  17.             window.close();  
  18.         }  
  19.         else {  
  20.             window.name = "invalidAccess";  
  21.             window.open("Default.aspx", "_self");  
  22.         }  
  23.     </script>  
  24. </head>  
  25. <body>  
  26.     <form id="form1" runat="server">  
  27.         <div>  
  28.         </div>  
  29.     </form> 
Step 6: Then we create an InvalidAccess.aspx page which is used only when the user opens a page either in a new window or a tab:
  1. <head runat="server">  
  2.     <title>Invalid Access</title>  
  3. </head>  
  4. <body>  
  5.     <form id="form1" runat="server">  
  6.         <div>  
  7.            <h1> Invalid Access. Please close the window and try again.</h1> <br />  
  8.         </div>  
  9.     </form>  
  10. </body>  
  11. <script language="javascript" type="text/javascript">  
  12.     alert(" Operation not allowed either you opened this webpage in a new tab or a new window. ");  
  13.     window.close();  
  14. </script>   
The output of this page looks like this:
 
Clipboard06.jpg
 
The final result when the user tries to open a new window/tab looks like this:
 
Clipboard20 


Similar Articles