Wednesday, November 22nd, 2006

DIY Widgets: XSS components to other sites

Category: Articles, JavaScript

Dr Nic Williams has written up a piece on how to embed your components on another site using a XSS approach instead of an iframe one.

The tutorial goes though:

The user will load up the webpage (e.g. Ajaxian mock page) that has a small <script src=”http://yoursite.com/magic_xss.js”></script> snippet in it [2]. When the page is loaded, the magic_xss.js file is loaded too. The user doesn’t know nor care.

When the magic_xss.js file is loaded it will do a couple of things:

  1. Install any stylesheets it needs
  2. Insert an empty, invisible HTML element into the page (e.g. <div id=”my_magic_xss” />).
  3. Read in any variables (e.g. Google Adsense requires the website owner to specify a number of variables, such as google_ad_format)
  4. Fetch any additional Javascript files or data. This is where even more dynamic magic can be performed. When requesting the additional data, you could pass back the current document’s URL or the current users’s IP address, and the webserver could return data that is relevant to that URL or IP address/geographic location. Clever, eh.
  5. Insert new HTML into the #my_magic_xss element based on the data that is returned from your own server. Your server – not the host website’s server.

Evan points out that: “Foreign-site iframe contents can’t be manipulated by the Javascript of the enclosing frame (at least, without special callbacks in the iframe itself). This gives Google a bit more control over the ad box, especially over the presentation, which will not be affected either by host site CSS or by Javascript attribute assignment.”

Posted by Dion Almaer at 9:04 am
14 Comments

++++-
4 rating from 15 votes

14 Comments »

Comments feed TrackBack URI

You need to convert <script -> &lt;script in the article to make all the text appear :)

Comment by Dr Nic — November 22, 2006

I’ve been doing it this way for years. Use the DOM to load Prototype/Script.aculo.us, CSS and my own DHTML magic.

Comment by Phill Kenoyer — November 22, 2006

yo… this guy discovers the web… we have been doing this ever since javascripts exists (nearly)… remember hit counters?

lame article for newbies…

Comment by Sad Developer — November 22, 2006

>>lame article for newbies…
Are you implying the article is lame because it is for newbies? Perhaps we should also get rid of schools, considering they’re for newbies too.

Comment by Richard Ingham — November 22, 2006

This statement on your site:
XSS rocks and Wikipedia is wrong
So, Wikipedia and Google differ in their thinking. I’m with Google. XSS rocks.
I do not believe this statement reflects an accurate understanding of cross site scripting as a security vulnerability. Cross site scripting is vulnerability introduced by web browsers because many sites these days allow users to input data and show that data on the website (the essense of a blog). However, if a malicious user inputs a xss script tag (as you just outlined in your article) that can be outputed by the html of the blog, and they can bring in their own JavaScript to read your cookies that might contain login information from the site you are blogging on and send it back to their own server. In practice, cross site scripting vulnerability generally refers to the vulnerability in many web applications of accepting user input data (such as the form) without doing any escaping or stripping of script tags before outputing (when you read my comments). Wikipedia is absolutely correct that this is a security vulnerability. If you have ever built an application that receives and displays user input (and wanted it to be secure), you would know that there is often some extra work that goes in to preventing these situations. However, you would be mistaken to believe that taking advantage of this cross site scripting is itself a security vulnerability. It is not inherently a security vulnerability to exploit a feature that is a security vulnerability. Google is absolutely correct in utilizing xss, and so are you.
BTW, I think that it is interesting that the browsers implementation of XmlHttpRequest prevents cross site access. It would seem there were correcting for their oversight in allowing cross site script tags.

Comment by Kris Zyp — November 22, 2006

And also, you did provide a nice, organized approach to doing xss, good job. Just thought people should understand what xss means as a vulnerability.

Comment by Kris Zyp — November 22, 2006

@Kris – I agree that XSS can cause issues. I was just being brash and trying to create an interesting introduction into a longish article.

@Phill – i think yuo can run into difficulties if the 3rd party site is also loading libraries. For example, $(…) is implemented by prototype + jQuery differently. Embedding your widget in an iframe makes this clean though.

@Sad Developer – I’m still working on an article “Introducing HTML” – stay tuned.

Comment by Dr Nic — November 23, 2006

@Richard Ingams + @Dr Nic: I feel sarcasm (fair enough, considering that my comment was sarcasm as well)… what I am just trying to say is where is the news?
Tutorials for basic scripting and HTML are fine, but don’t put this on Ajaxian. (as Schools are fine as long as you don’t put the solution to 1+1 on the front page of newspapers)…
:)

Comment by Sad Developer — November 23, 2006

@SD – I think JavaScript, and all the things you can do with it, are still new to many people. Especially with wave of people coming into the web development arena.

Comment by Dr Nic — November 23, 2006

Hi i want to know how get data to database and put in this line:
MyMagicXss.serverResponse([‘profiledata’]); i don’t know please help me
Thanks. I work with c#, if you have some example with it would be perfect

Comment by Renzo — December 4, 2006

Yeah, that is the sort of JavaScript syntax you’d need: you’re passing any normal JavaScript value into the response method.

Comment by Dr Nic — December 5, 2006

Hi Dr Nic thanks for reply my comment but my answer was How to get data to database from javascript and put this value in this line
profiledata = ?????? ‘Value of DataBase’
MyMagicXss.serverResponse([’profiledata’]);

In your example, the method requestContent contain this line:
script.src = CONTENT_URL where CONTENT_URL = “http://drnicwilliams.com/wp-content/uploads/2006/11/people_list.js”;

I could call to aspx page but how to return the data??

Comment by Renzo — December 5, 2006

Are you asking, “how do I generate the JavaScript based on database data?” That would be server-side specific. But you might generate the following:

var profiledata = [1,2,3,4];
MyMagicXss.serverResponse(profiledata);

Comment by Dr Nic — December 6, 2006

I just noticed “aspx” in your comment so I assume you’re looking for an ASP.NET example. Perhaps check out AJAX.NET library?

Comment by Dr Nic — December 6, 2006

Leave a comment

You must be logged in to post a comment.