Here's a simple JavaScript snippet that lets you sneak a peek at a web page from the outside. You can use it to catch variables declared in the wrong context on your page or to assess the tech stack of someone else's site. Please note that this technique may not work on all sites. The major ones are often protected, probably by cross-browser policies. If you've got any clever tips or hacks to share, any suggestions are appreciated.
Description
With a "bookmark", you can save a link to one site. But bookmarks are not only about links, they can also accept JavaScript. (Add this page to the "bookmark bar", by clicking the 'Star' on the "address bar" and then opening the "bookmark manager" to find the newly added link and edit it that way.)
javascript: alert('Hello world');
Now, anytime you click the link in the "bookmark bar", the iconic "hello world" message will prompt.
It is important to know that the context where the js code is executed is the current page shown by the browser. Therefore:
javascript: alert(document.querySelector("body").innerText);
this code can access the page currently displayed.
There was a time this trick can even interact with the page itself:
javascript: try {
debugger;
document.querySelector("body").style.border = "solid 10px red";
} catch (jse) {
alert(jse.message);
}
What the code gets now is just a white page showing the text:
as if the innerText was converted to 'write'. Just to double-check, the same code in the console does exactly as expected: a red frame around the page:
That means the browsers implemented some kind of 'security' protection.
But not everything is lost. The technique proposed here is still running on my browser so what we need to do is to push it to the limit:
javascript: try {
debugger;
var src = 'https://www.metita.net/Inject/inject.js';
var selector = `head script[src="${src}"]`;
var script = document.querySelector(selector);
if (!script) {
script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", src);
document.getElementsByTagName("head")[0].appendChild(script);
}
} catch (jse) {
alert(jse.message);
}
The snippet appends to the head section of the HTML page a tag script that refers to a JS file on my site:
(It is a very simple implementation of a pop-up '<div> containing a browsable tree view of the "window" object. The code is not deeply tested.)
The result should be like the picture above.
Probably, this technique is bound to be blocked in the future (relatively at the access on other sites). As long as it works, though.
I hope you enjoy this simple trick. In the old times, I used to gather lots of data from other sites (when doing so was still legal).
Background
It is a simple "trick", perhaps not for beginners but nothing sophisticated.
Using the Code
This trick could always be used to define analysis or implement behavior on your own sites. Could be anything, in the example above, the picture shows a tree view of the attributes of the page.
ATTENTION: Please note that running arbitrary JavaScript code from bookmarks can be a security risk. It's important to only run JavaScript code that you trust and understand and to be careful when copying and pasting code from untrusted sources. (Suggested by Chat GPT)
Points of Interest
Not a life-changing technique but, something always good to know (just in case).
History
- 1st April, 2023: Initial version
