I know the Window object is the "master" object of the browser (tab) to which everything is appended - core methods, globally declared variables, functions, even the DOM. It is above everything.
When I go to a different page in the same browser window (tab) I suppose the window object remains the same (only the dom changes), because the history and other stuff is accessible. Why I don't quite grasp is why the global variables that are attached to the window object (even using window.myvariable) don't persist.
To me the only possible explanation is because it is made this way. If so what happens, do the "non core" window elements (methods and variables that were set by the code) get erased; is every new page visit a new instance of the window object (sounds the most obvious way to me) or ...?
I can't find any useful info on this matter, usually people only know that you can't pass variables between pages (except cookies, web storage, window title), but why/how (the mechanics, not reasons) this happens are hard to come by. Thanks.
Every tab in your browser is independent window object and has its own set of global variables and thus your assumption of sharing window object is not correct. Your javascript is not and should not be allowed to SEE between tabs. If that was possible then imagine one webpage you open sniffing data and other information between tabs. Your tabs are not allowed to do your browsing history sniffing ( they can get the length of the history, I think, though).
How can the browser be secure (If you are browser's vendor)?
First, it can chose not to support certain capabilities, period such as reading client's file system arbitrarily.
Second, restrict some of the features they provide.
You might want to take a look at Same-Origin Policy and certain restrictions that are relaxed that might be helpful.
All the global JavaScript variables, functions & objects automatically become member of the window object and they are persisted as long as the the new page is not loaded/visited in the same browser window (tab).
Whenever new page is loaded or we redirect to new page within same tab then scope of these functions and variables from previous document ends and they are removed from the window object. And globally declared variables and functions for newly loaded document (from scripts associated with document) gets attached to the window object
Related
Today I found a security issue with Chrome (or maybe other browsers I haven't tested yet). What happens is that once you open a site and then open another site in the same tab, the previous site's global variables are accessible to the current site in that tab. I have demonstrated it in this video: https://www.youtube.com/watch?v=oDFKsLaecOs
Browsers should fix this but is there any other way to protect our global variables?
This is how you can reproduce it:
I logged in to exotel.com site and they are using a name variable to store currently logged in user's name. You can use it in console and check its value.
Now go to any other site in same tab and try accessing that variable from exotel. Your name will be displayed or just add a button from HTML in inspector and on click of that display the name variable.
See the description of window.name on MDN.
You're renaming the window, not creating a new global variable.
is there any other way to protect our global variables?
Don't assign values to predefined properties unless you really mean it.
Also avoid using global variables in the first place.
When do you need to use global variables, don't make them implicit globals. Declare them using let or const.
I am writing a simple clickbot in JavaScript to perform repetitive tasks on a 3rd party website. It just sets input values, calls the click() method of buttons and maybe I'll have it navigate to other URLs of the same website. I initially used Firefox but got the same behaviour with Internet Explorer.
I use plain JS so far and as long as I paste in every command by myself everything works fine but here's the problem: Any time a new page is loaded (including when JS clicks a submit button) I lose all vars and functions I defined. Note that I use the web console as opposed to a <script> tag that obyiousely would be dropped when a new DOM is loaded.
Honestly, I do not entirely understand why this happens. I looked at JavaScript scope and the documentation of window.location and document.location. This site even mentioned that "In a web browser, global variables are deleted when you close the browser window (or tab), but remain available to new pages loaded into the same window." (cf. here, but that's not the point here)
I thought it might be because strict mode might be enabled by default but that would have raised an error for name = "value" instead of silently interpreting it as a local variable.
According to this answer, any var declared outside any methods should be globals that are properties of window. Changing another propertie of window (e.g. location) should not affect them - as far as my reasoning goes - but even when assigning properties myself, they disappear when I load another page.
I suppose it could be worked around if I wrote my own website that has the site I need as an iFrame so the page my script runs on would not actually be changed. But still this is strange. Can anyone explain this behaviour? Is there another (easy) way around it?
[Edit1] Thanks to same-origine policy my proposed workaround using an own website and iframe does not work. Since the whole point of my clickbot is to be started once and click through all pages on it's own, a way to carry on data (i.e. strings including JSON) is answering this question but does not solve my problem.
[Edit2] For future visitors: After recent edits, the accepted answer does provide all information I needed. Greasemonkey is the way to go if you can use addons but the combination of bookmarklets and sessionStorage stil allow for a decent bot that performes all steps between two reloads with just one user input. Another (ugly bot possibly more powerfull) approach is to open the target website and use document.body.innerHTML and the iframe workaround. That way you bypass the same-origine policy and can build your own website as needed and still access the target website.
Regarding the lifetime of a variable this SO question goes into detail, but variables don't persist across reloads.
If you're staying within the same domain (e.g. everything happens at https://example.com, so https://example.com/page1, https://example.com/page2, etc.) then you can use cookies or local storage to keep track of values.
You can't keep track of functions easily with local storage or cookies.
Cookies and local storage are not available across domains.
I would use local storage as that is easier to interface with. So instead of:
var someVar = 'hello';
Write
localStorage['someVar'] = 'hello';
Then to use the variable:
console.log(localStorage['someVar']);
Local storage has a maximum size of 10MB. Probably enough for any automation script.
If you want to persist functions across page reloads, you should use something like grease monkey to store your user scripts.
in a programming challenge I recently took part in I had to use the window.name property to store / manipulate data. I found out that, when you change this property, it persists through page refreshes (although not when opening a new page with the same URL).
The only information I could find was that this is known and even used by some frameworks as data storage, but I would be interested in the why (as in why is window.name persistent? Any historical reasons?) and the how (which rules are there of when the window.name is kept between page changes and when it is discarded?).
Apparently, my Google-fu is not strong enough to find the answers to these questions (there is not even a mention of it on the MDN page!) so I hope that maybe you could help me.
My understanding of it is that the window object is persistent throughout the lifetime of a tab, and represents the window that is loading different HTML documents.
Each tab contains its own window object, which is why even when you navigate to/from different pages the window object is persistent, whereas if you check on a different tab the window.name will be different.
When opening different html pages, most of them do not override the window.name property, and it is completely optional. If nothing else is manipulating it, it will be what you leave it as. Most pages only touch on manipulating the window.document itself.
Named windows are used as link targets, for one:
some page
The link will open in a new window once, and in the same window if it still exists on subsequent clicks, with the window’s name being how it’s targeted.
The second argument of window.open is also a window name.
window.open('example.html', 'some_page');
You can try it out in your browser across unrelated websites; in one tab’s console, set window.name = 'test'; and in the other, use window.open('https://example.com/', 'test');. (You may have to let it through a pop-up blocker.) The unrelated tab should navigate to https://example.com/.
I want to redirect the user to an external page and simultaneously break out of a frameset.
The outermost frameset is most likely within the same domain as the page doing the redirection, but there is the possibility that it will span domains. In development, the outermost frameset might not even exist at all. Ideally, I want to cover all those situations.
The innermost page (the one that has the breakout code) is going to be served over HTTPS. The target URL may be HTTP or HTTPS. It is acceptable for the redirection to fail (there is a fallback link "click here to continue" to cover for that scenario) but the redirection should work in the majority of cases. Particularly for the purposes of this question, I'd hate for it to be more browser-dependent than necessary.
The web application itself is ASP.NET.
Because of the framesets, I can't simply use a HTTP redirect.
So far I have this Javascript code, which is registered as a startup script from within a class subclassing Page, where ... represents the redirection target URL:
((window.top == null) ? (window) : (window.top)).location = '...';
What bothers me is what MDN has to say about window.top and window.parent, respectively. Particularly, the documentation for window.parent spells out explicitly that
If a window does not have a parent, its parent property is a reference to itself.
which means that I can assert window.parent != null. But there is nothing similar about the value of window.top.
For the purposes of my question, you can assume that neither of these have been reassigned.
All that to lead up to the actual question: Does window.top make guarantees similar to that of window.parent? (I'm a bit concerned about the conditional expression. In my so far limited testing it works, but that doesn't prove it correct.)
As far as I can tell, at least MDN doesn't say for certain either way.
The HTML5 spec defines window.top like so:
The top IDL attribute on the Window object of a Document in a browsing context b must return the WindowProxy object of its top-level browsing context (which would be its own WindowProxy object if it was a top-level browsing context itself), if it has one, or its own WindowProxy object otherwise (e.g. if it was a detached nested browsing context).
So the top attribute must always refer to a window. The spec also defines top as readonly so it is not posisble to change it to point to something else (if the spec is implemented properly).
Something is very bad if window.top == null!
(I am Javascript Beginner)
While I am learning Javascript global variable's life time, it say:
The lifetime of Global variables starts when they are declared, and
ends when the page is closed.
I read that Javascript will store the global variable into window object? And when will it be destroyed? After I close the tab in web browser?
For example:
If abc.com/page1.html create a global variable, after that in the same tab, I navigate to abc.com/page2.html will the global variable still there? How about if I navigate to another domain in the same tab, for example, another.com/page1.html?
Once window is unloaded all your JavaScript variables are lost, let's say you move from page 1 to page 2, on window leaving your variables are lost, same applies if it's on same domain or cross domain
No, the global variables aren't available from one page to the other. If you need to preserve data between page, you need to maintain state.
Maintaining state involves using either cookies or query string values. My answer to How to use JavaScript to fill a form on another page explains this in depth.