How did they hide the JavaScript on this page? - javascript

I encountered a webpage that shows a popup, however, the only related JavaScript code I found on that page is the code below. What exactly does this code do and how does it hide the actual implementation (showing the popup)?
<script language="javascript" type="text/javascript">
var script = document.createElement("script");
script.src = "/in.php?referer=" + escape(document.referrer);
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
</script>

This code only inject a <script> tag.
When you look in the Chrome dev tools, you'll see the file referenced here in the sources tab.
This javascript file will have this name: "/in.php?referer=" (and document.referrer as value to the query string).
There's really nothing hidden, it's just that this way the javascript file is loaded asynchronously and won't block further script from loading/executing. This technique is often used by third party in order to leave the smallest footprint possible (google maps, twitter, facebook SDK, youtube, etc, etc).

Related

Injecting Google recaptcha's JS file in a chrome extension's content.js

New to chrome extensions and have the following issue:
I am trying to display recaptcha in my content script. As you know, it needs to include this <script src="https://www.google.com/recaptcha/api.js" async defer></script> tag, and since content scripts run in an isolated environment, I cannot just add it via
const script = document.createElement('script');
script.src = 'https://...';
// ...and so on
This accepted answer, however, illustrates a great way of script injection into a content script, but only for local files. So is there any way to include a script from a CDN?
Try doing it this way:
var apiScript = document.createElement('script');
apiScript.setAttribute('src','insert source here');
document.head.appendChild(apiScript);

Is there a way to enable/disable specific JS script execution for specific websites?

If I have JS script on several different websites, is it possible to enable or disable script execution for specific sites? If this isn't possible, other suggestions for implementation are welcome.
Here's the application:
I have a script tag with my JS source link that site owners can put on their website to enable interaction with my service. However, I would like to be able to enable/disable the service for specific sites so as not to deploy it until they are ready.
note: The script tag also includes site verification information so it gets put on their site before they are ready to deploy. This saves the step of putting in a site verification tag and then going back and putting in the script.
You would want them to put your .ashx handler on your website, then make that return the javascript.
Follow tutorial for ashx page if you are unsure how to http://www.brainbell.com/tutorials/ASP/Generic_Handlers_(ASHX_Files).html
in the processrequest() function:
Check to see if they have it enabled you can use the querystring to see which website it is https://msdn.microsoft.com/en-us/library/system.web.httprequest.querystring(v=vs.110).aspx in the code below there is ?yourwebsitedomain=customersdomain so you would query for "yourwebsitedomain" and you would get "customersdomain"
If they do then Get the bytes of your file using Encoding.UTF8.GetBytes(File.ReadAllText(filename))
and write the results to the output
context.Response.OutputStream.Write(FileBytes, 0, FileBytes.Length);
context.Response.OutputStream.Flush();
Your Customers Website:
<script>
(function() {
var c = document.createElement('script');
c.type = 'text/javascript'; c.async = true;
c.src = "http://yourdomane/yourhandler.ashx?yourwebsitedomain=customersdomain";
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(c,s);
})();
</script>
Hope this helps.

Open new page in the same broswer window without affecting the browser history

The question is for IE7 only, because location.replace(strURL) seems to work file in all other major browsers.
I try to execute some analytics js and then redirect the users to the location of a resource (usually doc or pdf) they want to download.
The user opens a page containing the js code.
After the download is tracked the broswer should load the resurouce url using the following code by REPLACING the current page entry in the history with the resource url:
if (IE) {
window.open(strURL,"_self", true); //doesn't work
//window.open(strURL,"_self",undefined, true); //doesn't work
return;
}
This code creates entry in the history for the redirecting page.
I have tried using iframe on the same page but IE will pop up a security warning if the file is a *.doc
Any ideas?
I'm not sure if there is a way to avoid this in IE7 or not. Perhaps a different approach is possible. Inject the analytics js into the current page before redirecting, thereby avoiding the need to load another page altogether. In this approach, you would create a new script tag and inject it into the head element. The script will execute when it loads, do your analytics and then trigger the redirect for download as the last step (for instance).
function redirectWithAnalytics() {
var s = document.createElement('script');
s.src = 'path/to/analytics.js';
s.type = 'text/javascript';
document.getElementsByTagName('HEAD')[0].appendChild(s);
}

Asyncronus javascript rendering widgets

I'm creating a javascript widget so third partys (web designers) can post a link on their website and it will render the widget on their site. Currently, I'm doing this with just a script link tag:
<div class="some_random_div_in_html_body">
<script type='text/javascript' src='http://remotehost.com/link/to/widget.js'></script>
</div>
However, this has the side-effect of slowing down a thrid party's website render times of the page if my site is under a load. Therefore, I'd like the third party website to request the widget link from my site asyncronously and then render it on their site when the widget link loads completely. The Google Analytics javascript snippet seems to have a nice bit of asyncronous code that does a nice async request to model off of, but I'm wondering if I can modify it so that it will render content on the third party's site.
Using the example below, I want the content of http://mysite.com/link/to/widget.js to render something in the "message" id field.
<HTML>
<HEAD><TITLE>Third Party Site</TITLE><STYLE>#message { background-color: #eee; } </STYLE></HEAD>
<BODY>
<div id="message">asdf</div>
<script type="text/javascript">
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = 'http://mysite.com/link/to/widget.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
</script>
</BODY>
</HTML>
I don't know if what I'm trying to do constitutes Cross Site Scripting (still a bit vague on that concept) but am wondering if what I'm trying to do is possible. Or if anyone has any other approaches to creating javascript widgets effectively, I'd appreciate any advice.
Thanks for reading this.
Joe
Great article comparing all the different methods :-
http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
Sorry to say that crossdomain xhr is blocked by all browsers. The google analytics google.load() function actually adds script tags to the head element, not use xhr. And the "async" attribute is part of HTML5 and only implemented in Firefox 3.6.
You could use an event listener to dynamically load the script when the document is loaded and add append the widget to a predetermined element(ie. with an id).

How javascript gets someother website data?

Well i am a bit confused..
I saw a service known as Zopim.. What they do is they provide you with a small piece of code:
such as
<!-- Start of Zopim Live Chat Script -->
<script type="text/javascript">
document.write(unescape("%3Cscript src=\'" + document.location.protocol +
"//zopim.com/?zopim\' type=\'text/javascript\'%3E%3C/script%3E"));
</script>
<!-- End of Zopim Live Chat Script -->
you just need to place it in the footer and ur done..
Can any body let me know how this works and from where i can learn this..
+
how can they even set the CSS with this and also the looks?
Awaiting for your replies...
Thanks
That code is creating a reference to a Javascript script hosted on their server. That reference on your page allows that script to access all the elements on your page (including their styles) through the DOM (Document Object Model) and to change them. All of this takes place in the user's browser.
Edit: Here's an example. Say I have a script on my site at http://www.mysite.com/myscript.js that does this:
document.body.style.backgroundColor = "#00FFFF"
Then you put this on your page:
<script type="text/Javascript">
document.write("<script src='" + document.location.protocol + "://www.mysite.com/myscript.js'></script>");
</script>
Then when a user loads your page, and the user's browser gets to that code, it will write out a script tag that references my script. It will then process that script tag, which basically downloads my script (to the user's browser) and runs it on your page (which is already on the user's browser). My script, in turn, changes the background color of the document (your page, running on the user's browser), because it acts like it was part of your page all along.
By the way, the reason you're using document.write instead of just linking directly to my script is so that if your page uses SSL, so will the link, so the user won't get any annoying messages that my script isn't secure.
This code creates a <script> tag that loads a script from http(s)://zopim.com/?zopim.
The generated <script> tag is a regular Javascript script that can do whatever it wants to.

Categories