BOOK THIS SPACE FOR AD
ARTICLE ADIf you throw the errors and check the stacktrace, you would notice that it contains the file name where the error occurred, and if you are using eval in the console, then you would see the string debugger instead of the file name:
And for this I had used the example mentioned on the MDN doc for stack:
<!DOCTYPE HTML><meta charset="UTF-8">
<title>Stack Trace Example</title>
<body>
<script>
function trace() {
try {
throw new Error('myError');
}
catch(e) {
alert(e.stack);
}
}
function b() {
trace();
}
function a() {
b(3, 4, '\n\n', undefined, {});
}
a('first call, firstarg');
</script>
Again, I am just adding the example here for completeness sake.
By the way, why on earth are we discussing about this, when we were on the mission to demystify the sourceURL directive? Did you again got distracted!!
Nah, we are right on track my friend. Just wait for it… It will be clear in a moment, why we discussed about this :)
Since I already showed you that a stacktrace for an eval or any other sink like Function() for instance would not give you any file names but simply “debugger” string!
Now imagine that you are using eval or Function() inside your code and happen to get a bunch of errors, all from this same script.
How would you debug it? Line numbers right… Smart!
But have you even seen the pages generated on the web nowadays? Most, if not all pages have minified Javascript which is either added manually or nowadays due to the JS Frameworks popularity era, compiled JS (which is minified by a bundler) is returned to your browsers!
So line number would always be 1 my smart friends!
Now what? You would say that you still get the column number to locate it.
At this point, I would say, be frank and ask yourself, would you have the patience to go through that ugly code and see which function was there at the reported column number? If you say “yes”, then I have to say that you are forgetting an important thing — the code is also minified, you even if you get to the code snippet, you would be able to make head or tail out of that.
Feel free to experiment on that if you are still skeptic!
So then what would I do? you might be tempted to ask.
And the answer would be: to use sourceURL directive FTW!
With this directive, you can actually name the scripts created by the eval or Function() or any other JS execution sink/gadget for that matter!
And thus, your stacktraces would have much more information now, to be useful to you folks!
This would be done as follows:
eval(“… some code … //# sourceURL=some-random-name.js”)
If you wish to read more details, then I would highly suggest this post. It’s quite concise and to the point, and I learnt about the sourceURL directive from this post, so it’s a good read.
Now, some of you might have become impatient enough to close this tab and move on to some other topic… But hold on! Now we get to the real stuff — that is, why that payload works!
Since you already know what sourceURL directive does, let’s now get to the meat of that payload!
And I think some of you might already have understood what the payload does, based on the above information. If you still didn’t worry now, I’ve got you covered my friend!