Disable the ability for new windows, such as popups, submit buttons, and forms with the target set to blank, to reference

Encountering an issue, I stumbled upon some solutions here and on various other websites that I would like to share with you.

The Problem: The window.opener functions of child pages stopped working after some security updates in modern browsers around 2020 / 2021.

When opening a new link from your site using target="_blank", the window.opener functions may no longer function as expected.

Solutions: Refer to the Answer below. I hope this solution proves helpful to others facing the same issue.

I spent countless hours searching for a fix to these issues. I even attempted to restore the previous behavior via .htaccess but it was unsuccessful. If anyone has a successful solution through .htacces, please share it in a post or response.

javascriptformshyperlinkwindow.openercross-origin-opener-policy

Answer №1

To make simple href links functional again, you just need to include rel="opener".

<a href="https://myPage.com/childpage.php" target="_blank" rel="opener">Link to child page</a>

For certain JavaScript functions, like the example provided here, you can use setAttributs in your scripts.

(...)
var form = document.createElement("form");
form.setAttribute("method", "post");
form.setAttribute("action", "myChildPage.php");
form.setAttribute("target", "formresult");      // Update: setting form target to a window named 'formresult'
form.setAttribute("rel","opener");          // Required due to security changes in modern browsers
(...)
document.body.appendChild(form);
form.submit();

However, for buttons with input type="submit", it's not as straightforward as before. The rel="opener" may not work within the button if using formaction or formtarget attributes.

Doesn't work (using rel="opener" in INPUT tag):

<form name="myForm" id="myForm" method="post">
(...)
<input type="submit" value="My Submit Button" formaction="childpage.php" formmethod="post" formtarget="_blank" rel="opener">
</form>

Works (using rel="opener" in FORM tag)

<form name="myForm" id="myForm" method="post" rel="opener">
(...)
<input type="submit" value="My Submit Button" formaction="childpage.php" formmethod="post" formtarget="_blank" rel="opener">
</form>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the process for generating a fresh PSBT transaction using bitcoinjs-lib?

This is the code I've been working on import * as bitcoin from 'bitcoinjs-lib' const NETWORK = bitcoin.networks.regtest; const psbt = new bitcoin.Psbt({ network: NETWORK }); function p2shAddress(node: bitcoin.ECPairInterface): string { c ...

javascripttypescriptbitcoin

Unable to show input in Javascript HTML

Every time I try to run this code on my webpage, the buttons do not seem to respond when clicked. I am aiming to have the user input for full name, date of birth, and gender displayed in the text box when the display button is clicked. When the next butt ...

javascripthtml

Tips for aligning the Bootstrap inline form in the center of the webpage

Is there a way to center align my form in such a way that the input box and button appear in the same row? I've tried the code below, but for some reason they don't display inline. Can anyone provide a code sample to help me achieve this? Your as ...

htmlcssformsbootstrap-4inline

carousel initialization failed due to materialization error

I am experiencing a peculiar issue with the carousel feature on a website built using MaterializeCSS. Sometimes it functions correctly, but other times I encounter the following error: jQuery.Deferred exception: c is undefined s@https://cdnjs.cloudflare.c ...

javascriptjquerycarouselmaterialize

Responsive Gallery Grid Slider with uniform height boxes

Looking to develop a responsive gallery grid slider with equal height boxes. For instance, at 650px wide or wider, display 3 columns and 2 rows. When the width is 550px or less, switch to 2 columns and 3 rows. If the width is 450px or less, go down to 1 ...

javascriptjqueryslidergallery

Is there a way to capture the click event of a dynamically generated row within a panel?

Could you please advise on how to capture the click event of a row that is generated within a panel? I have successfully captured events for rows generated on a page using the , but now I need assistance with capturing events from rows within a panel. I c ...

javascriptjquery

The inclusion of react-helmet in my Gatsby website is leading to an issue where the element type is considered invalid

Incorporating the Layout component in my app has significantly improved the styling. This is where I introduced react-helmet. This is how the component looks: import React from 'react'; import { Global, css } from '@emotion/core'; im ...

javascriptreactjsgatsbyreact-helmet

Executing multiple ajax calls and retrieving the results: A step-by-step guide

I am looking to run a series of Ajax calls and collect the responses before rendering the results for the user. The current code I am using is not working as expected because the render function is being executed before all the Ajax responses have been ga ...

javascriptjqueryajax

Visual Studio cannot find the reference for require, resulting in an error in Node.js

I'm currently working on developing a web application using Visual Studio, Node.js, and React.js var fs = require('fs'); var path = require('path'); var express = require('express'); Unfortunately, I encountered an erro ...

javascriptnode.jsvisual-studio

unnecessary_validator in AdonisJs

I am aware that it is possible to extend the validator in order to create custom validation rules, but I am unsure of how to do so to meet my specific requirements. It's possible that my goal can be accomplished using an existing validation rule. My ...

javascriptnode.jsvalidationadonis.js

Utilize tags as properties in Vue.js by selecting them

I am attempting to retrieve a value from a select tag and use it in an object property. Below is the HTML code: <div id="app"> <h3>{{title}}</h3> <div class="form"> <div class="form-group"> <div ...

javascriptvue.js

What are some ways to optimize the use of the jquery.mCustomScrollbar.js script?

I have a myriad of inquiries and would greatly appreciate your assistance in addressing them. Despite spending countless hours attempting to solve the issue independently, I have been unsuccessful. One question that plagues me is why, when using Google Ch ...

javascriptjqueryhtmlcssscrollbar

Ajax - unable to show posts upon submission

Whenever I submit a post, I am unable to display them and I'm not sure why it's not working. The getPosts() function works fine when I refresh the page. However, after submitting the posts, I can't seem to retrieve them. I am using a JSON fa ...

javascriptajaxasynchronouspostget

Issue with Bootstrap Navbar dropdown functionality not functioning correctly in browsers, but working fine on Codepen

I'm encountering an issue with a dropdown menu in the navbar of my document. The dropdown menu works fine in my codepen but not in my text editor (Sublime). I've tried various solutions and couldn't find a fix, so I'm reaching out here ...

javascriptjquerytwitter-bootstrap

What is the best way to create a function that triggers another function every minute?

Currently, I have a function that checks if a user is authenticated: isAuthenticated = (): boolean => { xxx }; I am working with AngularJS and I want to create a new function called keepCheckingAuthentication() This new function should call the ...

javascriptangularjs

Actility's LoraWan platform integrated with Node-Red

I am currently working on learning how to implement an HTTP GET request for the Actility platform in Node-RED. However, I keep encountering an error 401 indicating that the authorization bearer is missing. This is how my setup looks: https://i.sstatic.ne ...

javascriptjsonhttprequestnode-red

Angularjs: a powerful tool for passing data efficiently between controllers

In my angular.js application, I have implemented multiple views and I am in need of maintaining the status across view changes. To achieve this, I have created a simple factory to share data between controllers. Instead of using "$scope" in the controllers ...

javascriptangularjsangularjs-scope

When a JavaScript variable refuses to cooperate and won't populate

I am currently working with a simple variable that is accepting a JSON Object. Here is the code snippet: To maintain privacy, I have sanitized the code to avoid revealing sensitive information. var server = "00.00.000.00:8800"; var webServices = "http:/ ...

javascriptjson

Strange response received from $http GET request on Android device running Crosswalk

I am attempting to retrieve data in JSON format from an API using AngularJS. The process is successful on iOS and desktop browsers, but I'm encountering a strange response when trying it on my Android device. The request code looks like this: $http({ ...

javascriptangularjsapicordovacordova-plugins

Adding JSON data before the second to last element of an array:

I am looking to create a function that can consistently add JSON Items to an array just before the last item. const array = [ {India: { Score: '12', PlayedMatched: '21' } }, { China: { Score: '52', PlayedMatched: '51 ...

javascriptarraysinsert