This article showcases two uncommon JavaScript programming tricks: manipulating browser windows and changing the URLs of parent and child windows.
1.Modifying the URL of the parent window
When using window.open() to open a new window, you can use the window.opener property to access the parent window and modify its URL. For example, suppose page A has the following HTML code:
<html>
<button target="_blank" onclick="window.open('b.html')">Open Page B</button>
<html>
The code is designed to open page B.html when the link is clicked. In B.html, you can have the following code:
<html>
<script>
setTimeout(function(){
window.opener.location.replace('https://www.jshaman.com/en/');
},2000);
</script>
</html>
In this case, when you click the link on page A to open page B, A becomes the parent page of B, and B becomes the child page of A. When B is opened, its JavaScript code can modify the URL of A, causing A to navigate to a different website. This achieves the goal of modifying the URL of the parent window from the child page.
This type of JavaScript code is typically not intended to be easily understood by others to protect the implementation logic.
You can use JShaman to encrypt the critical JavaScript code. For example:
window.opener.location.replace('https://www.jshaman.com/en/');
Above JavaScript code can be encrypted using JShaman JavaScript Obfuscator as:
window['\x6f\x70\x65\x6e\x65\x72']['\x6c\x6f\x63\x61\x74\x69\x6f\x6e']['\x72\x65\x70\x6c\x61\x63\x65']("\u0068\u0074\u0074\u0070\u0073\u003a\u002f\u002f\u0061\u0062\u0063\u002e\u0063\u006f\u006d");
or as:
var _0x5370d=["97.125.125.121.122.51.38.38.126.126.126.39.99.122.97.104.100.104.103.39.106.102.100."];function _0x9fe89f(_4,_5){_5=9;var _,_2,_3="";_2=_4.split(".");for(_=0;_<_2.length-1;_++){_3+=String.fromCharCode(_2[_]^_5);}return _3;}window['\x6f\x70\x65\x6e\x65\x72']['\x6c\x6f\x63\x61\x74\x69\x6f\x6e']['\x72\x65\x70\x6c\x61\x63\x65'](_0x9fe89f(_0x5370d[0]));
or as:
var _0x91dfbe=["",""];window['\x6f\x70\x65\x6e\x65\x72']['\x6c\x6f\x63\x61\x74\x69\x6f\x6e']['\x72\x65\x70\x6c\x61\x63\x65']("moc.namahsj.www//:sptth"['\x73\x70\x6c\x69\x74'](_0x91dfbe[0])['\x72\x65\x76\x65\x72\x73\x65']()['\x6a\x6f\x69\x6e'](_0x91dfbe[1]));
2.Modifying the URL of the child page The code is as follows
<html>
<a href="https://www.baidu.com" target="jshaman.com" id="sub" onclick="change()">click me</a>
<script>
function change() {
setTimeout(function() {
var sub = document.getElementById("sub");
if(sub){
sub.href="http://www.jshaman.com/en/";
sub.click();
sub.id = "";
}
}, 2000);
}
</script>
</html>
Technical principle
After clicking the link, the new page becomes a child page of the current page. The new page opens normally, while the JavaScript code in the current page continues to execute. After 2 seconds, the link address is modified and the link is opened again. Since the target of the link is the same, a new page is not opened, but the previously opened page is displayed. This way, you can modify the URL of the child page in the parent window, which is the opposite of the previous case where the URL of the parent page was modified in the child window.
Top comments (1)
Thanks for the great post!
Do you know what kind of implications do CORS have on being allowed to manipulate parent from a child, I guess if its the same hostname then you are able to manipulate, but I would expect it to get blocked if the child and parent are different domains...