Not allowing javascript function call from the address bar - javascript

I was working with a online game website. There are some event which call a javascript function and the function have some action with callback.
something like this,
<input type="button" onclick="changeSomething"/>
function changeSomething() {
/// some call back, which changes something
}
now anybody who knows this can call this changeSomething from the address bar of the browser, which I do not want.
Very unlikely that somebody will do it, but I want to allow it.
Is there anyway to prevent situation like this ?
Thanks.
P.S. I tried, but still not sure whether I explained it well enought. Please let me know if you are not getting something.

You will never be able to get 100% protected from any technique you try. It's a losing game.
Having said that one way to get closer to your goal is to remove the onclick attribute altogether, and bind your click handler (ie "changeSomething") via javascript:
html:
<input id="foo" type="button" />
js:
addEvent(document.getElementById("foo"), 'click', function() {
/// some call back, which changes something
})
The callback becomes anonymous then (eg there is no "changeSomething" function anymore). These evil users can't call it directly if they don't know its name!
There are still ways around this technique too, but we won't mention those lest we give the evil doers ideas :)
(BTW addEvent is just a sample library function for adding event handlers. I'm sure you have access to one. If not here you go.)

I dont think that there is anything you can do about this. The client can run whatever they want within their own browser. The only thing to do is validate everything on the server side. This is an important concept in all web programming. Client side code can be freely modified and should be treated as an additional check to speed things up rather than a security method.

You have to handle this on whatever back-end you've got accepting the request. Assuming you only give the user the option to doSomething() upon certain conditions, you probably have this information in the database (or whatever).
Don't worry about the JavaScript being called (no way around it), and do the same check you did on the front-end on the back-end. This way you can simply forget about securing your front-end, since you can't anyway... yet you still prevent malicious users from doSomethinging when they aren't supposed to.
Let me know if you need further clarification of what I mean, but I'll need more details about what your app architecture is like.

Any "solution" will be as efficient as disabling right-click in Web page... For the latter problem, I found at least a dozen of workarounds, including viewing the page in Opera!
If you disable this, one will workaround with Firebug, Greasemonkey, or even some proxy modifying HTML on the fly, not to mention using a local copy of the page, etc.

You can check the source of the click by passing an ID:
<input id="good' type="button" onclick="changeSomething(this.id)"/>
function changeSomething(myId) {
if(myId!='good') {
return;
}
//......code
}
Revised to:
<input id="good' type="button" onclick="changeSomething(this)"/>
function changeSomething(myId) {
if(myId.id!='good') {
return;
}
//......code
}

Related

Google Tag Manager and Single Page APP: How to read a DOM Element?

I want to create a variable on my GTM to store a DOM element. I've tried a custom javascript, for example:
function(){
return document.querySelector('.room__price-value').innerText;
}
But nothing, on GTM preview I see always NULL. I think the issue was the single page app.
And I can't involve the programmers.
Any suggestions?
Thanks
Make sure that when in preview, you check the value of your variable on every event on the left.
Make sure when you execute document.querySelector('.room__price-value').innerText; in your console, you actually get the result you're expecting.
Change the code until you get the result in the local console.
Make sure your timing is good, as Eike mentioned in the comment.
What you're doing there seems right. That's pretty much how you do DOM scrape in GTM when front-end devs aren't available. If the suggestions still don't work for you, give us more info on what you're doing, on how your DOM looks like, what your debugging showed and such. As much potentially useful context as you can.

Re-creating a websites javascript function to be used as a stand alone alternative in tampermonkey

I'm looking for a way to do something that may or may not be possible.
On the site http://hitbox.tv/ there is a javascript function I believe that turns text into images.
For example, using:
emotify.emoticons("",{
"emote": ["http://example.com/emote.png", "channel"],
});
in a tampermonkey script or entering it directly into the chrome console would allow all occurrences of "emote" in the chat to be turned into that image.
If I type "emotify" into the chrome console, I'm given:
function (e,f){return f=f||function(h,j,g){return j=(j+", "+g).replace(/"/g,""").replace(/</g,"<"),'<img src="'+h+'" title="'+j+'" alt="" class="smiley"/>'},e.replace(b,function(j,g,m){var k=0,h=m,l=c[m];if(!l){for(;k<d.length&&!d[k].regexp.test(m);)k++;h=d[k].name,l=c[h]}return l?g+f(l[0],l[1],h,m):j})}
and if I type in "emotify.emoticons" I am given:
function (){var k,m,h,o,l=Array.prototype.slice.call(arguments),n="string"==typeof l[0]?l.shift():"",f="boolean"==typeof l[0]?l.shift():!1,g=l[0],j=[];if(g){f&&(c={},d=[]);for(k in g)c[k]=g[k],c[k][0]=n+c[k][0];for(k in c){if(c[k].length>2){for(m=c[k].slice(2).concat(k),h=m.length;h--;)m[h]=m[h].replace(/(\W)/g,"\\$1");o=m.join("|"),d.push({name:k,regexp:new RegExp("^"+o+"$")})}else o=k.replace(/(\W)/g,"\\$1");j.push(o)}b=new RegExp("(^|\\s)("+j.join("|")+")(?=(?:$|\\s))","g")}return c}
So what I'm wondering is, is there a way to use this code in a tampermonkey script somehow so that in the future, if the code is removed from the website, I could still use the emotify.emoticons function to create standalone emotes?
I really hope this makes sense. If you need any more information, fell free to ask. Any help is greatly appreciated!
-Tom
I might be wrong, but my inclination is that no, you can't - because the full behavior for this code is probably actually executed server-side, not in the web browser.
The images would have to get passed to the server to get circulated to the other people in the chatbox anyway
The function you list just returns a function, which does some (somewhat cryptic!) string operations, and little else, indicating the heavy lifting is done elsewhere.
The reason why you can run it using tampermonkey currently is because the function is defined on hitbox.tv. Defining it in tampermonkey probably won't help, because if hitbox removed it, they would also remove everything that uses it, rendering it useless.
You can do more investigation if you feel like it; http://www.hitbox.tv/dist/hitbox-ui.min.js is the link to their (minified) javascript file that runs the website. Running it through http://jsbeautifier.org/ yields a ~55,000 line long file, however, so unless you know what other variable words to search for, it's going to be impractical to comb through by hand.

Appropriate method to execute JavaScript from user input?

I need to build a web application that allow user to input javascript code and the code is then dynamically executed and somehow show the result at the same page. The flow would be something like this:
In the webpage, there area a series of textarea, and under each of these textareas, there is a result div element (or whatever element span, p, doesn't matter). User will input javascript code inside the textareas. He should be able to enter whatever javascript code he want, but at the end he will call a custom function like
my_application_output(some_variables_computed_from_previous_code_execution)
and then something will be displayed on the result div. A simple example will be:
if he input the following text in the textarea:
var a = 0;
a++;
my_application_output(a);
and then execute the code, the result div element below the textarea will have a inner html content of "1"
I don't have much idea how to get started, like what technologies or system architecture should I go for. so would like to ask for some pointers here. I have thought about two options (not sure whether they are good enough)
Use JavaScript eval() function. so I just execute the code from the textarea directly on the client side.
Implement a backend service using an engine like V8. So I do a ajax call to backend with the code content, and then the codes are executed from backend, and result is returned. I then put the result in the result div accordingly.
Personally, I'd like to go for 1) because eval() seems to be a easier solution. However, I'm not sure whether there is any limitation about this function or whether it can achieve what I want to do. Otherwise, if I have to go for the second option. Anyone can propose an architecture for that?
Not only is option 1 easier, it is also the safer choice.
Why? Everyone who has Firebug installed in Firefox (or just has the Chrome Dev tools open) already has what you're asking for, though perhaps in not as noob-friendly a fashion. The code they write is sandboxed to the browser they're using and nothing more.
With option 2, you're going to execute arbitrary untrusted code on the server. Suppose they realize that you're using Node.js (the most likely choice here) and then run a fork-bomb on your server:
require('child_process').exec(':(){:|:&};:', function() { console.log('This will never run') });
Let alone something more nefarious.
Remember that REPL stands for Read-Eval-Print-Loop, and is what dynamic languages since Lisp have used to help programmers understand their languages. Eval is perfectly fine if the only person a newbie can hurt is themselves.

Supporting AJAX history button without going crazy

I used jQuery Address several times to support the back button in small asynchronous applications.
When all the AJAX requests do the same thing (that is, requesting a page asynchronously and replace an HTML element with the request) the implementation can be easy.
When the AJAX requests might do different things, let's say open an overlay in one case and change the content of the page entire page in another case, things become messy.
I ended up with some really crappy code for the fact that I had to go through a lot of if statements to analyze the hash value (#/somepage/someotherpage).
I always repeated to myself: there has to be a better way to do this.
Has anybody went through the same problem and can suggest a solution?
If not, check out my idea and tell me what you think.
My idea is to create an object which emulates the window.history object, but only for AJAX history, let's call it "ajaxhistory".
Each time a page is requested asynchronously something like this happens:
ajaxhistory[i] = {
url: 'here the url',
type: 'overlay'
otherusefulinfo: 'whatever'
}
i++
So, for example:
if(moving back or forward){
if(currenturl == ajaxhistory[i-1].url){
// i'm going back
// i'm able to know what type of action i should take thanks to
// ajaxhistory[i-1].type and ajaxhistory[i-1].otherusefulinfo
}
}
I like this idea because it would make my code much easier to read, mantain and change.
Suppose then I want to add new functionality... I can add a new type and I work with that, while normally I should edit a lot of crappy if statements.
What do you think? Would there be problems from a performance point of view?
Check out this work by Ben Alman
http://benalman.com/projects/jquery-bbq-plugin/
He has a plugin to help support back button.
Hope this is useful.
Bob
You can use html5 feature:
window.history.pushState({type: 'overlay'}, title, url), where first param is JS object.
You can access this object like that:
window.onpopstate = function(event) {
alert( event.state.overlay);
}
For more information, check https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history

inspect javascript calls for gmail's buttons

i'm working on a greasemonkey script for gmail in which it'd be very useful to know what function call is made when the "send" button is clicked. (i was unable to find this using firebug, but am relatively new to javascript debugging.) it seems that one should be able to detect this, i just don't know what tool(s) to use.
thanks very much for any help.
p.s. ultimately the goal here is to be able to extract a unique message i.d. for outgoing gmail messages, which i figured would be present in this javascript call -- so if there's an alternate way to do this, that would work just as well.
Gmail's Javascript code is obfuscated to avoid this type of inspection (and also to reduce code size). It is very unlikely you'll be able to make heads or tails of it even if you manage to get Firebug to breakpoint in the code properly.
I don't think that the message id would be in the message created (in fact all the headers would be absent). My guess is that they are entered on the server side by Google before dispatching the message.
All objects in JavaScript has got a toString() method. If you can find the button then you can find it's associated events. You can then toString() those events in the FireBug console--but as levik wrote; all of the code if obfuscated, so you might just end up toString()'ing gibberish.
Here's a little pseudo-code to get you started:
document.getElementById("...").onclick.toString()
Update
It seems like it's not possible to access events added with attachEvent() and addEventListener() if you have no control over the code you want to debug.
As a sidenote, one would assume that the unique id gets assigned in the server, not in the javascript...

Categories