When you add a script tag with an src field pointing to a javascript file, the browser gets it and executes it.
What I am wondering is how does this process work. Does the file get fetched and then somehow eval()'ed? Is it a mystical process that happens outside of the scope we have access? Or can we monitor/interfere this?
To explain what I want to achieve:
I want to give access to third parties to customize their page on my site by linking to their own javascript files. I want to be able to centrally log any errors that prevent those external scripts from loading (i.e. their server is down, parsing errors, whatever). Is it possible?
Thanks!
Obviously there are other ways to solve this such as hosting their scripts on my server and giving them a way to update them, but I 'm interested in knowing if my current approach is possible.
You can look at specific implementation in Firefox & Chromium sources with some grep magic, for your specific scenario I'd asynchronously subload those by inserting script tags on the fly and listening to global errors/events (eg window.onerror) from there.
It loads the java script file while loading the page and stores that script in its cache. If you load page another time then it will get that js from the cache.
Related
I have a script I want to use in the Google Chrome console. But this script is going to reload the page. A bit like this :
setInterval(function(){location.reload();},3000);
The problem is, once it's reloaded, the script stops and the console is cleared. I tried the option "Preserve log on navigation" : it preserves the log, but the script doesn't restart after reloading.
How should I do ? Thanks :)
There is no way to actually do that. The only possible way I found is to develop a Chrome' extension and place your script on it. Your script will be excecuted every time the target page is loaded, so when you execute the location.refresh() method , the next time the page is loaded your script will be executed all again and so on. If you wish to persist some data between page loads, then you can use localStorage.
Find more information here https://developer.chrome.com/extensions/getstarted
How to inject scripts via extensions ?: https://developer.chrome.com/extensions/content_scriptsremember that the scope of the extensions is isolated from the rest of the page, so you cant directly access JS variables or functions declared in the page itself from an extension BUT you can interact with the DOM. Good luck
I am using a cool Chrome Extension called Resource Override, which allows you to inject a script on specific urls. So all you have to do is put your url (with * on each end), and create a JS file injected into the HEAD, and it will be ran every time. You start from scratch on every page though, so I'm not sure how you can persist data. Maybe in cookies?
Try creating a parent html document that has an iframe whose source is the original html page. Place the javascript in the parent html page and tell it to reload the iframe.
Here is my current setup:
I have a script on our Sharepoint.
Each user adds this in a bookmarklet to use it.
If I make an update, they have to go and set up the bookmark all over again.
What I want to do:
User adds script loader to bookmark toolbar
They click it, and it loads the script from our Sharepoint.
This way, if I need to make any changes, they don't have to do anything and changes will be reflected automatically.
My bookmarklets/scripts depend on jQuery to make ajax quests and just for general ease of use.
I am currently using this: http://benalman.com/projects/run-jquery-code-bookmarklet/
Is there a framework that I can use for this kind of thing? I know Visual Event uses a loader, but since it was compressed with Closure, I can't really tell what it's doing. I understand that since things are loaded asynchronously in Javascript, I would have to wrap all my code inside of jquery being loaded, which is fine.. I just need a way to do it.
all you need to do is move your bookmarklet code to an external js file, and then inject that file using a bookmarklet. That way, the bookmarklet injects the latest logic, and you don't have to ever re-bookmark again.
in that external script, you can paste the jQuery.js file's contents above your JS code to make sure it runs as expected.
modify the url to point to your script:
javascript:(function (){document.getElementsByTagName('head')[0].appendChild(document.createElement('script')).src='http://domain.com/scripts/external.js?'+Math.random();}());
if your intranet has decent caching setup, you can remove the "+Math.random()" part, but on an intranet, performance is rarely a problem for on-demand single-url asset loading, the the random url ensure everyone always gets the latest copy.
There are employees that will visit the external site to see a link to an internally hosted site. We only want the link to show if they have VPN'd into the network.
How, with JavaScript, can I test the availability of something that isn't online externally.
I have attempted to use a .JS file but it can get cached and seem available when it really isn't. Same with an image.
Maybe JSONP with MockJax to avoid cross-site scripting errors?
On the intranet site make a JS file that will either embed the links or change them from display: none to display: block (or whatever display). On the page itself simply create a reference to that script and append the current date time to the end to avoid caching from the server.
Test case (this assumes you have localhost set up, but you can change it to be whatever intranet location):
Go here and the text won't be displayed.
Set up a file called test.js under localhost with the contents
$(function(){
$('#test').show();
});
refresh the page and it will display the DIV's contents.
I have a web service that works through giving users javascript to embed in their code. Users can also place that code on other sites to make it work there. However I also need to allow users to create a blacklist of sites that the JS should not function on. For example, a competitor or an inappropriate site.
Is there a way to check where our JS files are being loaded from, and block loading or break functionality on a per account basis?
Edit: The javascript loads an iframe on the site, so another solution would be to somehow block certain domains from loading an iframe from our server, or serve different content to that iframe
Edit 2: We're also trying to avoid doing this from with the JS because it could be downloaded and modified to get pass the block
Inspecting the url of the page
Yes, the javascript file, when it starts executing, can inspect window.url and see if the url of the main document is ok.
To see where the script was loaded from
It can also go through the dom, looking for the script node which brought in the javascript file itself and see from where the JS was loaded.
However
Anyone can load the javascript into a text editor, then change it to eliminate the tests, then host the modified JS on their own server. Obfuscating or minimizing the JS can slow someone down but obscurity is not security.
One thing you could do is have the javascript load another javascript file. That you serve from the server at a given url. The trick here is that that url will not go to a file but to a server end point that will return a javascript file. The you have that endpoint check for the routes for that user and decide if it will return the javascript you want to work or an error javascript of some kind.
This blog shows how to do it in php.dynamic-javascript-with-php
I'm trying to build a sample bookmarklet to grab current webpage source code and pass it to a validator. Validator is not a an online website, but a folder with bunch of javascript and html files. I'm trying to open file:///C:/Users/Electrifyings/Desktop/Validator/Main.html file with the help of javascript bookmarklet code and put the source code in the textarea in the newly opened window, but it is not working for some reasons that I'm not aware of.
Here is the sample code with algorithm:
javascript:(function(){var t = document.body.innerHTML;window.open('file:///C:/Users/RandomHero/Desktop/test.html',_self);document.getElementById("validator_textarea")=t;})()
Here are the steps:
Grab current web page source code in a variable.
Open locally stored HTML web page in current or new window or new tab (either way is fine with me, but no luck)
Put the source code from the variable into the validator textarea of the newly opened HTML file.
I have tried above code with a lot of variations, but got stuck on the part where it opens the new window. Either it's not opening the new window at all or it is opening blank window without loading the file.
Would love to get some help with this issue, thanks a lot.
Oh and btw,
Windows 7 x64, Tried IE, Firefox and Chrome. All latest and stable builds. I guess it's not a browser side issues, but something related to javascript code not opening the URI with file:/// protocol. Let me know if any more details are needed. :)
You wouldn't want a webpage you visit to be able to open up file://c:/Program Files/Quicken/YourSensitiveTaxInfo right? Because then if you make a mistake and go to a "bad" website (either a sleazy one or a good one that's been compromised by hackers), evil people on the intarweb would suddenly have access to your private info. That would suck.
Browser makers know this, and for that reason they put VERY strict limits to prevent Javascript code from accessing files on a user's local computer. This is what is getting in the way of your plan.
Solutions?
build the whole validator in to the bookmarklet (not likely to work unless it's really small)
put your validator code up on the web somewhere
write a plug-in (because the user has to choose to install a plug-in, they get much more freedom than webpages ... even though for Firefox, Chrome, etc. plug-ins are basically just Javascript)
* * Edit * *
Extra bonus solution, if you don't limit yourself to a purely-client-side implementation:
Have your bookmarklet add a normal (HTML) form to the page.
Also add an iframe to the page (it's ok if you hide it with CSS styling)
Set the form's target attribute to point to the iframe. This will make it so that, when the user submits the form and the server replies back to that submission, the server's reply will go to the (hidden) iframe, instead of replacing the page as it normally would.
Add a file input to your form - you won't be able to access the file within that input using Javascript, but that's ok because your server will be doing the accessing, not your bookmarklet.
Write a server-side script which takes the form submissions, reads the file that came with it, and then parrots that file back as the response. In other words, you'll have a URL that you can POST to, and when it sees a file in the POST's contents, it will respond back with the contents of that file.
Now that you've got all that the user can pick their validator file using the file input, upload it to your server, your server will respond back with the file it just got, and that file will appear as the contents of the iframe.
And now that you finally have the file that you worked so hard to get (inside your iframe) you can do $('#thatIframe').html() and viola, you have access to your file. You can save the current page's source and then replace the whole page with that uploaded file (and then pass the saved page source back to the new validator page), or you can do whatever else you want with the contents of the uploaded validator file.
Of course, if the file doesn't vary from computer to computer, you can make all of that much simpler by just having a server that sends the validator file back; this could be a pure Apache server with no logic whatsoever, as all it would have to do is serve a static file.
Either way though, if you go with this approach and your new file upload script is not on the same server as your starting webpage, you will have a new security problem: cross-domain script limitations. However, these limitations are much less strict than local file access ones, so there are ways to work around them (JSONP, cross-site policy files, etc.). There are already tons of great Stack Overflow posts explaining these techniques, so I won't bother repeating them here.
Hope that helps.