I am building a tool which uses (dynamically inserted) JavaScript to modify webpages. Any webpage.
The idea is to allow a user to use it to record a series of changes to an existing webpage like google.com, (for the sake of example suppose a change is to apply a 10 pixel solid black border to all <img> tags, this change can obviously be encoded as a short and sweet snippet of jQuery), and the tool generates a link (or identifier) that contains this metadata and the url representing the "starting point" if you will (in this case google.com).
Now the problem I've run into is the entire Same-Origin security policy, whose purpose is to expressly deny the exact kind of thing that it seems like I need to do.
What I need to do is essentially navigate to a particular site, and then execute javascript in the context of that site. Neither I (the author of the tool) nor the user with whom I share my script necessarily have control over the site, so in theory the security model if implemented properly should prevent this concept from working.
Because of this I cannot have a single clickable link that kicks off the process of running my code on some site. It totally makes sense too. It would make it trivial for an attacker site to send a disguised clickable link that will run code that acts as me on any site they want.
But, the way to get around it is to tell the recipient to do a single additional step. First they open the URL of the site just like normal, then they paste a bit of javascript:(function(){.....})(); into the URL/omni bar. That is (AFAICT) completely legitimate and should be permissible because the user understands that this script is being executed. Whether or not it should be allowed to run JS so easily at this point is more or less irrelevant, as it basically just works everywhere now.
This isn't too bad but I think the user experience suffers unnecessarily. For example it looks like a native app would be necessary to get any better than pasting the JS into the URL bar on an iOS device for example, but on a plugin-accepting full browser it seems like a plugin can achieve what I want.
Which is: a navigation to an arbitrary URL followed by code execution (this code originating from an authorized source) with one click.
But I'm not sure where to start. What API could provide me this ability? I am hoping I can get away with Greasemonkey-type scripting (as Greasemonkey compatible plugins are available for pretty much all the good browsers), but I can't tell if there is enough power available.
I am actually still a little unsure about security related problems with this. I used to have a huge paragraph here but it all boils down to "social engineering".
This kind of things are generally done with bookmarklets.
On your website featuring your script, create a link that has href="javascript:(function(){/* ... */})()". Then a user could simply drag and drop that link into his favourites (bookmark it). And use it as button in a favourites bar.
Your bookmarklet could contain directly your script, or a simple loader that injects a <script src=http://mywebsite.com/script.js"> tag into the document, this way you can update your script and "distribute" it directly to all users.
Security is always about knowledge. Or to put it the other way around: Not knowing something makes you feel insecure.
There is no secure way to do what you want which is my web browsers forbid it by default. There are workarounds (like pasting the URL as you explained above) but all of them are only secure as long as the user knows what she is doing.
That being the social implications. Now the technical solutions:
You try a bookmarklet
You can use a browser plugin like Greasemonkey
Both allow to run arbitrary JavaScript. The former needs explicit permission from the user each time, the later one does it automatically.
Of course, if you move the core of the functionality to a remote place, it would be hard for even knowledgeable users like me to understand and trust what is going on.
That is when the meat of the function isn't in the bookmarklet or the greasemonkey script and when you instead add a <script> tag with a remote URL. That would make it harder to make sure your script doesn't do something "odd". For example, you could return a different script when I try to download the JavaScript without using your bookmarklet.
Related
Is it possible to prevent a specific function in a specific script from executing inside a browser, possibly by redirecting calls of that function to a static/modified version of the script file with a predefined rule? (Similar to how we use an adblocker extension or userscript to customize the DOM, but this time to manipulate the scripts themselves.)
Consider this scenario, website.com utilizes client-side rendering heavily. When https://website.com/article.html is visited, the bundled big JS file https://website.com/entire-app.js will render the entire webpage, both contents and ads.
In the end, a function named isAdblockerFound() in https://website.com/entire-app.js will be called by antiAdBlockerMethod() in the same script file. It checks if ads on the page are indeed loaded and performs other adblocker detection procedures. If this function returns true, antiAdBlockerMethod() will then trash and replace all the rendered elements in the DOM with some big warning text.
In this situation, the script https://website.com/entire-app.js handles all the client-side page rendering, both ads and contents, so simply blocking it from loading will render the website unaccessible.
In order to only bypass/fool the isAdblockerFound(), the idea I came up with is to somehow replace the isAdblockerFound() function with a function which always returns false, before it is called. That is, to tell the browser to redirect calls of isAdblockerFound() to a customized isAdblockerFound() in a static/modified version of the script file, hosted locally or resides temporarily in the browser.
I understand that if we don't need a predefined rule, we can use the devtools to freeze the script with a breakpoint and execute anything between lines easily. But how can we do this automatically with a predefined rule? What extensions/tools are needed?
Google didn't give me anything useful (all the results are about routing in express etc).
EDIT: I understand that I can disable my adblocker anytime and that would be a trivial solution for this question. I also understand why ads exist on the web in the first place, and appreciate the valuable contents made possible by ads. Actually I have never had motive to apply this to any websites I visit, and I am not aware of any websites employing adblocker checking procedures exactly like website.com in my example. I asked this question because I was simply curious if it is possible to bypass this kind of checking.
I suppose, in a different context, one website could be malicious and a security engineer would need to perform an analysis. He might find fooling an environment checking procedure useful in that scenario.
Firefox provides the webextension API webRequest.filterResponseData() to inspect and rewrite the content of any network request, including javascript loads. This would allow you to parse the javascript and replace the method in question.
That only leaves the task of building a robust, streaming javascript matching and rewriting engine.
I want to write a PHP script which executes code on a foreign website just like using the JS-console on that webpage. I don't want the server to act like the client on that certain webpage.
To make it even more difficult, the JavaScript must be executed on a different frame (when executing the JavaScript manually I'd switch to the correct console by clicking on the specific Frame in the dropdown menu above the console (Chrome)).
If I try to do something nearly impossible here, please don't hesitate to tell me exactly that.
You should try to describe what your end goal is. You are probably going down the wrong path here. There is no way to add javascript to a page that you don't serve yourself.
If I understand what you mean (and more detail would really help here). You want to automate something that you can do manually on a browser yourself, by manually running javascript on a webpage (via the console). The only reason I can think you would want to do this is to trigger an Ajax request/API call or submit a form.
This is technically possible, but it would be better to look for an actual API that you can talk to directly; you could do this by inspecting the network tab of the developer tools, but if they don't have a public API you may have to do a fair amount to fake the request; and if anything changes on the server it could all stop working.
If they don't have an API that you can call, or if they have put measures in place. Then there is a good chance that you are trying to misuse a website; and they may well put further measures in place to stop you (this is why captchas exist).
If you can figure out the details of a request to send, then you could use CURL to make the request - this page may help: https://davidwalsh.name/curl-post
If you really still find that you need/want to actually run javascript on a remote page, then this is "browser automation", and while technically could be triggered from PHP - requires much more to make it possible. Selenium is primarily used to automate tests, but would allow you to do this: http://www.seleniumhq.org/ via JavascriptExecutor but I would recommend you do some futher searches for tutorials, as it's too large/broad to really cover here:
https://seleniumhq.github.io/selenium/docs/api/java/org/openqa/selenium/JavascriptExecutor.html
Ok so im learning javascript and I just wanted to know if its possible to make it do actions on external pages. For example if I wanted to say 'onload redirect to somesite.com/page1 then once on somesite.com/page1 fill in register form with these details'
is that possible?
You cannot do this.
This would represent, for lack of a better word, an enormous security hole.
The only way to make an external page "do stuff" is to write code that is on or explicitly included in that page itself. Period.
I have however, seen external pages get loaded INTO the current page as strings, and then have the javascript that loaded those pages modify that markup directly. But that is ugly.
On the first page you could modify some variables/values in a database. Then, in the second page you could check the values in your database, and do different "stuff" depending on those values.
You would need to set up a database and use some server-side scripting along with Javascript (server-side scripting is used to interact with your server/database). In your first page, the server-side script, like PHP, would fetch info from your Javascript. In your second page, your Javascript would fetch info from your server side script and then do stuff to that page.
This is a much safer way. If you are taking user input from things like HTML fields, you need to look into cleaning the input to prevent something called "cross-site scripting (XSS)".
You could do this IF you were rendering the other page in a frame of some sort.
There are multiple ways in which you can render an entire external page as a piece of your page. Many pages take precautions to block being rendered in a frame for just this very reason though (Not to mention copyright issues).
Once you're rendering the external page inside your page you should be able to reference components nested in your frame and do the sort of thing that you're describing.
There's no way to do this with JavaScript. The developers of all the major browsers work very, very hard to prevent this sort of thing. If this were possible, it would open up pretty massive security holes.
If you really want to use something like this for testing, you can look at browser automation software like Selenium. This allows you to automate various testing scenarios in your browser, but it does not affect other clients using your site.
I have implemented a requirement in my website where I can allow my end user to configure a link, to execute any javascript that he may require. Since, he can type in any javascript that he requires he also has the ability to open different web pages, create new pages via javascript, edit elements in the page via javascript and so on.
I have some security concerns over this functionality and would like to get some opinion from everyone. Is it possible that any malicious or unethical script could be added to the page that could bring about law and order problem or credibility issues? If so, is it possible to place in some code that would restrict the type of javascript that my user may add?
There's a thing called ADsafe which was developed for banner ads that is a strict subset of Javascript which is meant to prevent malicious code. I don't think you'd be able to do things like
open different web pages, create new pages via javascript, edit elements in the page via javascript and so on
though. I think you should re-think your needs, and try to determine if you can come up with a way to offer the ability for a user to choose from pre-determined code that you write, perhaps customizing it within certain bounds.
Then again, if you're absolutely sure that the javascript is only going to run for the user who entered it, there shouldn't be anything they can do that will screw it up for anyone else. If a user was determined he or she could simply inject their javascript in through other means, like a rewriting proxy or extension or simply the javascript console.
I have a page which displays a different website (say www.cnn.com) in an iframe.
All I want, is to make links inside the iframe open in the parent window, and not inside the frame.
I know that this is normally impossible for security reasons, which makes good sense to me. However, the page I'm working on is not going to be public, but only on my private computer, and if I have to switch off certain security features to make it work, it's OK.
Is there any way at all to do this?
I have been combing through the web all day for a solution. If I missed a post here or elsewhere, please point me to it.
I read that in Firefox (which I'm using), it's possible to get extended permissions in javascript if the script is "signed" (or a particular config entry is changed). However, I don't know how to exploit these extended permissions for my purpose...any hints?
I'd also consider different approaches, e.g. not using iframes at all. Whatever the method, I want to be able to embed several websites, which I have no control over, within one page. Links clicked in any of the embedded websites should open in the parent window. It's just supposed to be a handy tool for myself. I should say that I have basically no knowledge of javascript and am just learning by doing. If you can confidently say that what I want is not possible with any client-side methods, that would help as well. I guess it would be rather straighforward to do it e.g. with php but I don't want to setup a webserver if it's not necessary. Thanks for any tips!
This is a bit different solution than you asked for, but might be a better way to attack the problem as it might give you the ability you seek without compromising any normal web security.
I wonder if Greasemonkey (add-on for Firefox and other browsers) might be a useful solution for you as it allows you to run local javascript against other pages to modify them locally, somewhat regardless of normal security restrictions. So, you could run through all the links in a CNN page and modify them if that's what you needed to do.
To use it, you would install the greasemonkey add-on into Firefox, write a script that modifies CNN.com the way you want to, install that script into Greasemonkey, then target the script at just the web page CNN.com. I think it should work on that site whether it's in an iframe or not, but your script could likely detect whether it was in an iframe if you needed to.
It would appear the HTML5 seamless attribute would be what you are looking for. But it doesn't appear that anything supports it yet...
http://www.w3schools.com/html5/att_iframe_seamless.asp