SWiK
» tagged pages
» logout

sorted by: recent | see : popular
Content Tagged with Ajax + page

qUIpt: caching JS in window.name

Mario Heiderich has released qUIpt, a library that uses the window.name property to store away useful data, in this case JavaScript.

How does it work?

  • It checks for the contents of window.name while your page is being loaded.
  • If there’s nothing inside the window.name cache the JS files defined by you are fetched via XHR
  • The same happens if the users enters your site for the first time of his current browser session or if document.referrer is off-domain or empty
  • After that the contents of window.name are being evaluated
  • If the user requests the next page on your domain the JS files are directly taken from window.name - no more requests necessary

You can check out an example of it at work

Ajax: Ajaxian

Microsoft ASP.NET Ajax Road Map

Microsoft has come out with a road map for the Ajax side of ASP.NET, which has been simplified to be just: Framework and tools in one versioned package; Ajax components will be released separately on Codeplex.

There is a bold goal at the beginning of the document (why is the doc a PDF/.doc and not just HTML!!!):

Make ASP.NET Ajax the first-class choice for all Web 2.0 developers

They are going to be catching up with richer CSS selection and DOM manipulation:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $query(“textarea.rich”)
  3.   .addHandler(“focus”, function(e) {
  4.     Sys.Debug.trace(“focused into “ + (e.eventTarget.id || “?”));
  5.   })
  6.   .setStyle(“width”, function() {
  7.     return (document.body.clientWidth – 10) + “px”;
  8.   })
  9.   .create(Contoso.UI.RichTextBehavior, {
  10.     showToolbar: true,
  11.     fonts: [“Arial”, “Times”, “Courier”]
  12.   });
  13.  

We have got some animation going on:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $query(“.sprite”).animate([
  3.     new Sys.Animation.FadeIn(300),
  4.     {
  5.       “style.backgroundColor”: “#ff0000”,
  6.       “style.fontSize”: “2em”),
  7.       duration: 500
  8.     },
  9.     new Sys.Animation.FadeOut(300)
  10.   ])
  11. );
  12.  

What else?

  • Accessibility
  • Drag & Drop
  • Client-side Controls and Behavior
  • Interoperability: OpenAjax hub support
  • Tooling, tooling, tooling

Ajax: Ajaxian

Talking to .NET on the server with Jaxer

What does your CEO do? Paul Colton, CEO of Aptana, gets his fingers dirty. He just wrote a post about accessing COM objects from JavaScript with Jaxer.

This is possible as the JavaScript is running on the server, and this server is running on Windows. You can download the source code to check it all out.

PLAIN TEXT
HTML:
  1.  
  3.      <body>
  4.          <script runat="server-proxy">
  5.              function rotate(angle)
  6.              {
  7.                  var img = COMObject("ImageProcessor.ImageProcessing");
  8.  
  9.                  img.LoadImage(Jaxer.request.documentRoot + "/photo.jpg");
  10.                  img.RotateImage(angle);
  11.                  img.SaveImage(Jaxer.request.documentRoot + "/new.jpg");
  12.              }
  13.          </script>
  14.          <input id="angle"/>
  15.          <input type="button" value="Rotate"
  16.                         onclick="rotate(document.getElementById('angle').value);
  17.                                 document.getElementById('img').src =
  18.                                 document.getElementById('img').src + '?' + new Date()"/>
  19.          <br />
  20.          <img id='img' src="new.jpg"/>
  21.      </body>
  22. </html>
  23.  

Ajax: Ajaxian

Evil GIFs: Hiding Java in your image

What if you could encode a Jar file as an image and trick the browser to run it? This is what Ben Lorica reported from a black hat briefing webinar:

During a recent webinar to promote the upcoming Black Hat briefings in Las Vegas, a group of hackers announced the creation of a hybrid file that can potentially bypass a browser's same origin policy. They created a GIF file that also happens to be a JAR file ( a "GIFAR" file). Once uploaded onto a web site, and assuming the web server runs a JVM, it allows one to run a malicious java applet on someone else's web server.

Details were not provided, since the hackers claim that Sun is still working on a patch. For more on hybrid (image) files as attack vectors, go to minute 41:23 of the webinar.

Ajax: Ajaxian

ratproxy: Rat out those security issues in your Web app

Michal Zalewski, of Google, has released ratproxy, a tool to test your Web application against attacks such as XSS and XSRF:

Ratproxy is a semi-automated, largely passive web application security audit tool. It is meant to complement active crawlers and manual proxies more commonly used for this task, and is optimized specifically for an accurate and sensitive detection, and automatic annotation, of potential problems and security-relevant design patterns based on the observation of existing, user-initiated traffic in complex web 2.0 environments. The approach taken with ratproxy offers several important advantages over more traditional methods:

What about other solutions?

There are numerous alternative proxy tools meant to aid security auditors - most notably WebScarab, Paros, Burp, ProxMon, and Pantera. Stick with whatever suits your needs, as long as you get the data you need in the format you like.

That said, ratproxy is there for a reason. It is designed specifically to deliver concise reports that focus on prioritized issues of clear relevance to contemporary web 2.0 applications, and to do so in a hands-off, repeatable manner. It should not overwhelm you with raw HTTP traffic dumps, and it goes far beyond simply providing a framework to tamper with the application by hand.

Ratproxy implements a number of fairly advanced and unique checks based on our experience with these applications, as well as all the related browser quirks and content handling oddities. It features a sophisticated content-sniffing functionality capable of distinguishing between stylesheets and Javascript code snippets, supports SSL man-in-the-middle, on the fly Flash ActionScript? decompilation, and even offers an option to confirm high-likelihood flaw candidates with very lightweight, a built-in active testing module.

Last but not least, if you are undecided, the proxy may be easily chained with third-party security testing proxies of your choice.

Ajax: Ajaxian

IE8 showing how serious it is about security

The IE8 team has created a blitz on its blog with a slew of posts on security. There is a ton of great stuff here, and is well worth going into detail on each post:

IE8 and Trustworthy Browsing

At first they set the scene:

This blog post frames our approach in IE8 for delivering trustworthy browsing. The topic is complicated enough that some context and even history (before we go into any particular feature) is important, and so some readers may find this post a bit basic as it’s written for a wide audience. In previous posts here, we’ve written about IE8 for developers: the work in standards support, developer tools, script performance, and more. In future posts, we’ll write about IE8 for end-users (beyond the benefits of improved performance, activities, and Web Slices). This post starts a series about trustworthy browsing, a topic important for developers and end-users and everyone on the web. By setting the context and motivation with this post, the next posts that dive into the details of IE8 will build on this foundation.

Trustworthy refers to one of our overall goals: provide the most secure and most reliable browser that respects user choice and keeps users in control of their machine and their information. For reference, Microsoft’s framework for Trustworthy Computing in general spans four areas: security, privacy, reliability, and business practices.

IE8 Security Part III: SmartScreen® Filter

For Internet Explorer 8, we’ve built upon the success of the Phishing Filter feature (which blocks over a million phishing attacks weekly) to develop the SmartScreen® Filter, a replacement that improves upon the Phishing Filter in a number of important ways:

  • Improved user interface
  • Faster performance
  • New heuristics & enhanced telemetry
  • Anti-Malware support
  • Improved Group Policy support

IE8 Security Part IV: The XSS Filter

The XSS Filter operates as an IE8 component with visibility into all requests / responses flowing through the browser. When the filter discovers likely XSS in a cross-site request, it identifies and neuters the attack if it is replayed in the server’s response. Users are not presented with questions they are unable to answer – IE simply blocks the malicious script from executing.

With the new XSS Filter, IE8 Beta 2 users encountering a Type-1 XSS attack will see a notification.

IE8 Security Part V: Comprehensive Protection

As we were planning Internet Explorer 8, our security teams looked closely at the common attacks in the wild and the trends that suggest where attackers will be focusing their attention next. While we were building new Security features, we also worked hard to ensure that powerful new features (like Activities and Web Slices) minimize attack surface and don’t provide attackers with new targets. Out of our planning work, we classified threats into three major categories: Web Application Vulnerabilities, Browser & Add-on Vulnerabilities, and Social Engineering Threats. For each class of threat, we developed a set of layered mitigations to provide defense-in-depth protection against exploits.

Ajax: Ajaxian

Shrinking frameworks; Dojo in 6k

Dojo is a framework that you can bend for your needs. You have very fine grained control on what you want in your base dojo.js, how other components are loaded, and a final custom JavaScript file.

Brad Neuberg showed a project, SearchTools, that added local search via Gears, and had a custom Dojo that wasn't Dojo in a very small package.

Alex Russell has taken this further and explained how he got Dojo to 6k by implementing a stub loader, so many of the functions were lazy loading stubs instead of full method bodies.

His use case was mobile, or small embedded devices in general:

On an iPhone with a clean cache the stubbed-out dojo.js cut in half the time required to load and evaluate. Sure, it’ll take more time on the network when parts of the toolkit are actually used (say, in response to a click event), but for mobile device scenarios, it’s going to be hard to beat the flexibility and speed of the stub loader when pulling Dojo into a page.

The post really wasn't about Dojo per se, but John Resig parsed the sentence: "Even so-called “lightweight” libraries like jQuery" and in one part of a three part post hit back:

The way it's worded you would assume that you were paying a large, up-front, cost to using jQuery when, in fact, there is very little overhead. jQuery has been shown to be the fastest loading JavaScript library for non-cached code and considerably fast for cached code.

If we ignore the frameworks and think of the meta-point it is a lot more interesting.

Ajax: Ajaxian

JavaScript Plugins; The beauty of loosely coupled code

James Coglan wrote a piece on There is no such thing as a JavaScript plugin that uses jQuery as a use case for how simple it is to have a plugin contract.

When you think about plugins in many environments, you have strict contracts through interfaces that you have to implement. With jQuery, you can just add on to the jQuery prototype, normally seen through the alias $.fn.

James shows the simple example of:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. $.fn.makeThemRed = function() {
  3.   this.css({color: 'red'});
  4.   return this;
  5. };
  6.  
  7. $('p').makeThemRed();
  8.  

I read this as the power of the simplicity, but John Resig, again in his three parter saw it a little different, I think by thinking too much about the title :)

I will contend that such a thing as plugins exist and are logically distinct from "random JavaScript code that manipulates other JavaScript code" as long as the following points are met:

  1. There have to be explicit points upon which a plugin can attach. James notes the most common one in jQuery (jQuery.fn) but we have tons more - events, animations, selectors - all over the board for developers to snap in to.
  2. Even more importantly: Those points have to be documented or, at the very least, be under some sort of agreement that they will be treated like a normal piece of the user-facing API. In jQuery we treat all plugin extension points as "user-facing API" and only ever change them in major releases (if at all) and always provide an alternative for authors to use.
  3. Finally, there has to be some sort of repository for navigating these plugins. This is a huge differentiator. Simply referring to "code in the wild" as plugins doesn't really cut it if there's no commitment to hosting them and keeping their documentation and examples alive.

Ajax: Ajaxian

OpenLaszlo 4.1: DHTML ready for primetime

OpenLaszlo is a fascinating project, and got even more interesting when they went meta, and allowed you to general Ajax applications as well as SWF ones. The 4.1 release is a big one, as it brings full parity to the Ajax side of the house:

OpenLaszlo 4.1 is a major release bringing full support for both the DHTML/Ajax and the SWF/Flash platforms. It also includes over 800 bug fixes and a significantly improved documentation suite.

OpenLaszlo 4.1 has been fully-qualified across the following browser/platform combinations: Safari3/OSX, Firefox2/OSX, Internet Explorer 7/WinXP, Firefox 2/WinXP, and Firefox 2/Linux. We have tested the full suite of demos, samplers, and example applications with the requirement that, when possible, DHTML applications behave the same as their SWF counterparts.

OpenLaszlo 4.1 is now the recommended release for all developers on all platforms, and current users of OL 3.x and 4.0 should investigate upgrading to this new release.

Preliminary support for SWF9 is included in this release but has not been enabled in the developer console.

At the same time, the team announced 500,000 downloads. Congrats!

Ajax: Ajaxian

eval(’foo=a’, obj.fn); How you will be private in Firefox 3.1

Ajax: Ajaxian

Starfield Sim Picasa Gallery with Prototype

Asad Sheth has been playing with a Starfield Sim Picasa Gallery using Prototype. He said:

I think it's an interesting way to think about temporally organized data (I could see RSS feeds navigated through some similar mechanism, with the z-axis being time and the x- and y-axes being some kind of similarity measure), and further display that graphical presentation is not the sole domain of Flash.

PhOdyssey

Ajax: Ajaxian

Loom: Annotation based Java framework

Ignacio Coloma has announced Loom 1.0 RC 1. Loom is an annotation-based java web framework that includes a ton of new features in this release. After some selective process, these are the bits that could be of most interest for Ajax developers:

  • Generates HTML 5 markup (with data-* fields), including CSS classes
    with the property type.
  • Based on prototype
  • An ever-growing list of (progressive-enhancement) web components,
    including: multiple file upload, tabs, menus...
  • Dead-simple javascript validation library with i18n support.
  • ...which mimics the process at the server, in case javascript is disabled.

Just give it a try at the demo. Try introducing invalid input, and check the sources by clicking the "View source" link at the top right of the page. Everything in the demo should work with javascript disabled, including multiple file upload.

The framework also includes a libraries repository which pulls debug/optimized javascript from the google CDN:

PLAIN TEXT
HTML:
  1.  
  2. <l :script resource="prototype"/>
  3. <l :script resource="scriptaculous">
  4.  <l :param name="load" value="builder,effects"/>
  5. </l>
  6.  

This snippet of code would translate into this, if development is disabled:

PLAIN TEXT
HTML:
  1.  
  2. <script type="text/javascript"
  3. src="//ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js">
  4. </script>
  5. <script type="text/javascript"
  6. src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects">
  7. </script>
  8.  

Or this if not:

PLAIN TEXT
HTML:
  1.  
  2. <script src="/js/prototype-1.6.0/prototype-1.6.0.2-shrinkvars.js"
  3. type="text/javascript"></script>
  4. <script type="text/javascript"
  5. src="//ajax.googleapis.com/ajax/libs/scriptaculous/1.8.1/scriptaculous.js?load=builder,effects">
  6. </script>
  7.  

More details about the framework are at the reference guide. Ignacio would be grateful for any feedback!

Ajax: Ajaxian

State of Ajax for June 2008: Apple flexes Open Web muscles

June was a great month for the Open Web. First, Apple delivered a one-two punch with showing Mobile Me, powered by the native Web and SproutCore, and showing SquirrelFish as JavaScript starts to get a loooot faster on browsers. Firefox had a party as millions of people downloaded Firefox 3 final release, and immediately talked about 3.1 coming soon. The flywheel is moving. Opera 9.5 is also there, and IE 8 beta 2 is coming in August.

Velocity, the performance conference, also showed the interest in making the Web faster, as many tools were announced to help out us devs. We also saw a lot of cool uses of Canvas/SVG, as developers delve low level and see that they actually work very well.

So, we sit at the crux of two paths. On the one hand, browsers are getting faster and faster and adding great new technology for us (including small things like CSS variables. finally!). On the other hand, we are creating more compelling user experiences (e.g. 280 Slides, Mobile Me). These forces work with each other. As we do cooler apps that push the boundaries, the browsers have to come back with better performance and tools to match. Expectations are changing, and we need to match them.

Here is the full roundup:

Browsers

Standards

Performance

JavaScript

ExtJS

Dojo

YUI

MooTools

jQuery

Gears, AIR, and more

Design: CSS, SVG, Canvas

Showcases

Utilties

Ajax: Ajaxian

SEO and RIA get closer together with Flash indexing news

Google and Adobe have been working on improving the indexing of Flash applications. In the past we could simply look at the SWF files and try to grab strings out of them, but there was zero context.

To go further Google uses the SWF Searchable work from Adobe to be more of a 'human' actor on the application.

This is what it doesn't do:

  1. Googlebot does not execute some types of JavaScript. So if your web page loads a Flash file via JavaScript, Google may not be aware of that Flash file, in which case it will not be indexed.
  2. We currently do not attach content from external resources that are loaded by your Flash files. If your Flash file loads an HTML file, an XML file, another SWF file, etc., Google will separately index that resource, but it will not yet be considered to be part of the content in your Flash file.
  3. While we are able to index Flash in almost all of the languages found on the web, currently there are difficulties with Flash content written in bidirectional languages. Until this is fixed, we will be unable to index Hebrew language or Arabic language content from Flash files.

This is good news for all rich applications. One of the common worries when it comes to richer application development is "what do search engines see" and we sometimes see people go back to the simpler world just to make that happier. With the search engines stepping up themselves, we can go back to writing applications that make sense for our human users, and hope that the computers catch up. Of course, we always have to do so in a practical way.

Ajax: Ajaxian

TCPSocket: Sockets in the browser

Michael Carter of Orbited has written about how he now likes to call Comet sockets in the browser, and has an implementation available that looks like this:

PLAIN TEXT
JAVASCRIPT:
  1.  
  2. var conn = new TCPSocket(hostname, port)
  3.  
  4. conn.onopen = function() { alert('connection opened!') }
  5. conn.onread = function(data) { alert('RECEIVE: ' + data) }
  6. conn.onclose = function(data) { alert('connection closed!') }
  7.  
  8. conn.send('Hello World');
  9.  

The above code code is all you need to know. It will open a TCP connection to hostname:port, and will send the data “Hello World”. Any data the server sends back will be alerted with the onread handler.

The exact mechanism behind this innovation is pretty straightforward: Orbited is a router and firewall for incoming TCPSocket connections from the browser. It uses Comet techniques to establish bi-directional communication with the browser, then forwards all data over a raw TCP socket to the end point. Configuration allows access control enforcement so that the TCPSocket can only be connected to pre-approved end-points, so that the Orbited server isn’t an open relay.

While this presents a paradigm shift in the way developers are tackling real-time, web-based applications today, it’s actually a return to the original method of writing network applications. Instead of writing applications based on web frameworks and throwing a Comet server in the mix, you can simply use the client-server architecture where the browser is the client, and the server is an arbitrary TCP server.

Ajax: Ajaxian

Infinite Web 2.0 Image with GWT

Didier Girard pinged us about Farbtube:

This Web 2.0 / GWT example allows to draw on an infinite canvas and to see others changes immediately. It works like Google Maps: Use the "Move" cursor to walk around the canvas

Time for graffiti.

Ajax: Ajaxian

MooWheel and MooCirclePack for visualizations

MooWheel, the JavaScript connections visualization library, has been updated to version 0.2.

Updates include:

  • New data format
  • Text can now be hovered over, in addition to the dot
  • Images can be added for each item

You can see the popular Twitter example
(thanks to Augsto Becciu, creator of TweetWheel).

Also, MooCirclePack has just been released:

MooCirclePack is another stunning visualization library that brings circle packing to JavaScript. It is great for data that can be represented by size (eg: an alternative to a bar graph), or data that can be represented amorphously.

There is a non-Ajax demo, and an Ajax one.

MooCirclePack

Ajax: Ajaxian

JavaScript Protocol Fuzzer

Gareth Heyes has written a JavaScript protocol fuzzer which has the goal of "producing every variation of javascript execution from links."

If you check out the demo you see all of the options available to fuzz:

Number of characters - This inserts between 1 and 10 characters in the chosen position

Character position - The string position of the characters chosen. E.g. if you choose “0″ then the “j” will be replaced or appended.

Replace character - Simply replaces the character rather than add characters to the position.

Url encode - Urlencodes the vector before outputting the link.

HTML hex entity encode - Instead of output the character, it uses the HTML hex entity instead.

HTML dec entity encode - Instead of output the character, it uses the HTML decimal entity instead.

Semi-colons - Adds a semi-colon if HTML entities are used.

Random zero fill - Adds a bunch of random zeros if entities are used.

Start from - Is the starting character to begin the fuzz. E.g “0″ is null

He has also found interesting results in various browsers such as: jav�ascript: working, meaning that this would work:

PLAIN TEXT
HTML:
  1.  
  2. <a href="jav&#56325ascript:al&#56325ert(1)">test</a>
  3.  

Ajax: Ajaxian

JSON Diff Released

Tom Robinson has built a useful utility, JSON Diff, which gives you a graphical look at the difference.

JSONDiff

Changed portions are displayed in yellow. Additions are displayed in green. Deletions are displayed in red.

The visualization is live itself, so you can move around the nodes using the triangles.

Ajax: Ajaxian

ShiftZoom: Zoomify your oversize images

ShiftZoom

ShiftZoom 1.0 is the latest tool from Christian Effenberger that allows you to add zoom and pan functionality to oversized images on your webpages. It uses unobtrusive javascript to keep your code clean. Requires no plugin/extension or any other external resource!

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, IE 6+ and Safari. Works also on older browsers supporting images & createElement & getElementById, else it'll degrade and your visitors won't notice a thing.

It is as simple to use as:

PLAIN TEXT
HTML:
  1.  
  2. <div><img onLoad="shiftzoom.add(this);" width="400" height="200" .../></div>
  3.  

Ajax: Ajaxian

CSS Variables are …. here!

We talked about how CSS variables are next a few months back, and now they are here!

WebKit now has an experimental implementation of CSS variables:

You can test this feature using a WebKit nightly

Test cases

Once again, via Dylan Schiemann.

Ajax: Ajaxian

dragtable: drag-and-drop reorderable columns for an HTML table

Dan Vanderkam has announced a new component dragtable:

Over the past several years, Stuart Langridge’s sorttable Javascript library has found widespread use. It’s easy to see why. Just add class=sortable to a table tag and its column headers automatically support click to sort. Pretty slick.

But sometimes sorting just isn’t enough. What if you want to focus on just one or two of the columns in a table? In a client-side application you could drag the columns you care about next to each other. Why not in a web application?

Enter dragtable. Like sorttable, it teaches HTML tables a new trick through a simple class attribute.

Once you have the JavaScript in place, you can simply add a class="draggable", and you can even work with both via class="draggable sortable"

Take a peak at a test bed, and the open source project.

Ajax: Ajaxian

The fight for cross domain XMLHttpRequest

There is a thread going on secure cross domain requests. Microsoft came out with a paper saying that the W3C standard isn't secure, and pushing the Microsoft XDR spec:

A few proposals and implementations exist like XDomainRequest in IE8, JSONRequest and the W3C’s Web Applications Working Group’s Cross Site XMLHttpRequest (CS-XHR) draft specification, which combines an Access control framework with XMLHttpRequest or other features. While XDomainRequest is focused on enabling anonymous access of third party public data, Cross Site XMLHttpRequest has added functionality and consequently enables a broader set of scenarios that may appeal to the developer who may choose to use cross domain authentication and access control among other features. As can be expected with securing a large cross section of cross domain scenarios, a number of concerns have been identified with the CS-XHR draft by the web development community, the IE team members and members of the Web Apps Working Group. For a list of our recent feedback on security on CS-XHR and our take on important security principles in cross domain, please read our Security Whitepaper on Cross Domain. The paper also covers best practices and guidance for developers who will choose to build on the current draft if it’s supported by a future browser.

The community quickly jumped on this in the comments, and beyond.

Anne van Kesteren said:

After half a year of waiting Microsoft finally posted their feedback on Access Control for Cross-Site Requests and specifically the way XMLHttpRequest Level 2 works with that. Microsoft blogged about this event. I suggest people read this rebuttal from Jonas on the paper Microsoft published. To be clear, while the specifications are not entirely finalized nobody has so far put forward a viable attack scenario that does not already apply when these technologies are not supported by user agents.

(Related: Working group fun and “Concerns” raised about W3C Access Control spec have been little more than FUD.)

As linked from Anne, Jonas posted nice feedback:

I'll start with a mini FAQ to avoid repeating myself bel