Build a secure future for Ajax mashup

The current web browser design cannot easily and securely obtain content from multiple sources and display it on the page. Learn how developers can make full use of available tools to complete the task, and use these tools for the obtained Applications ProgramIt brings pressure on security and scalability. In addition, I learned several browser improvements to remedy this situation and how to participate in related discussions to make web development go beyond this obstacle and bring interoperability to a new level.

Mixed with Ajax

MashupIs a Web application that integrates content from multiple sources and delivers it to a single page for display. The server sends a request to each content source, parses the received information, and combines the result into a page and sends it to the browser, as shown in figure 1.

Figure 1. Mixed content from multiple sources

Asynchronous JavaScript + XML (Ajax) ApplicationAllows web pages to get content from the server and use JavaScriptCodeUpdate yourself asynchronously at the appropriate location, as shown in figure 2. In this way, you can interact with rich user interfaces (UIS) without reloading the entire page. The server sends an initial page to the browser, which calls back the server to obtain the updated content. Asynchronous JavaScript code calls frequently use XML to encode data. However, other data formats are more common, such as JavaScript Object Notation (JSON), HTML, and separated text.

Figure 2. Interactive Data Display using Ajax

Ajax mashupIs a Hybrid Web application. It uses Ajax technology to display rich UIS, which use content retrieved asynchronously from multiple sources to perform self-update at appropriate places. The server sends an initial page to the browser, which sends a call to retrieve the updated content. These calls can be sent directly from the browser to the third-party source or back to the initial server. The initial server serves as a proxy for third-party content.

Back to Top

Incompatible

When designing elements that contain the current browser environment, no one notices Ajax mashup. Browsers, Hypertext Transfer Protocol (HTTP), HTML, or specially designed to accommodate browsers (in a secure and robust way) XHTML, which asynchronously retrieves content from multiple sources, has no built-in components. Some features of the World Wide Web Consortium (W3C) HTTP specification that may be used in mashup (such as Document Object Model (DOM) Level 3 load and save Specification) are not fully implemented by most browsers, or is not implemented at all.

Dynamic HTML (DHTML) is not used with dynamically retrieved content at the beginning. The display and data elements of dynamic web pages are delivered together with the scripts for operating them. These scripts will show, hide, move, create, and destroy document objects to achieve dynamic results. However, once you need to obtain more data from the server, the original page will be replaced by a new page. Data Stream and page reloadSynchronization.

Therefore, developers who want to build a Hybrid Web application (now called mashup) must use the available technology to try to expand it to meet their needs. There are two ways for the browser to retrieve content without reloading the page: embedding the external transmission mechanism and executing the transfer task using the browser's local object.

External help

The early solution was Microsoft's remote scripting, which used a Java applet to exchange messages in XML format with server components. This method quickly became impractical due to vendor debate and the differences between Java Virtual Machine (JVM) and security models.

Microsoft buildsXMLHttpRequest(Xhr) object, which is expected to be used only by Microsoft Outlook Web Access (OWA. This object was initially used only by Windows Internet Explorer users and was not widely used until Mozilla and Safari adopted it many years later. It was initially an external Microsoft ActiveX object, and the current implementation is a local object in the browser. Although it is named xhr, The xhr object can transmit data in any format rather than only valid XML format.

Many developers use the XML communication feature of Macromedia Flash to build embedded components and communicate with the server.XmlsocketAndFlex.net. SocketThe object provides functions similar to xhr, but comes with additional communication control and XML parsing functions.

Internal work

Due to the problems and dependencies related to the external transmission mechanism, the Internet Development Group collaborated to discover and develop local Remote Call methods for several browsers.

• Use a hiddenIFRAMEElement to load external content:Then access through DOMIFRAMETo extract and load the content in the document. You can specify a URLQuerystringAny parameter in or dynamically create a form, which usesIFRAMESubmit to the service as the target. This method is compatible with existing and legacy browsers in a wide range.
• UseIMGElement to send content requests:The server uses the URLQuerystringAnd then return the encoded content in the cookie. This method is only applicable to the amount of data that can be easily communicated.QuerystringAnd Cookie.
• Dynamically create script elements in the DOM of the current page:After loading, immediately execute the Code provided by the server. Server URLQuerystring.

For more information about these tools and technologies, see references.

Back to Top

Break through boundaries

Most technologies that can be used for asynchronous Content Retrieval inherit the security of the JavaScript Security Model, which enables the script to interact only with elements of the same server that originated from the page to which the script belongs. This is what all browsers have implemented.Same-origin policy).

To retrieve content from a third party on a web page, the same-origin policy must be avoided. The common exceptions that are not restricted by the same-origin policy are:<SCRIPT>Tag technology to append the object to the DOM of the page.<SCRIPT>Element, causing it to load and run the elementSRCCode found at the URL specified by the property.

Use<SCRIPT>The prerequisite for running scripts from multiple sites is the high level of trust among all related sites, because all such scripts are run in the same execution and security context, therefore, you may obtain information about other sites and access to cookies.

Back to Top

Security or Scalability: Not both

Currently, the workspace that is widely used to enable Ajax mashup may incur some costs. When the browser design restrictions are extended, other aspects of the overall operation of the application will be affected. This practice usually results in reduced application security or scalability.

Secure, but scalable?

When restricted by the same-source policy of the browser, the server that hosts the application must obtain and send the third-party content to the client. In addition to providing common server functions, the server also plays the role of a third-party service client.

Using the server as the proxy for each client transaction means that a large number of users may cause excessive server load. Applications using this technology need to be designed as server-side scalable and use multiple equivalent servers to process request loads.

Scalable, but secure?

Use<SCRIPT>Mark the same-source policy to allow the client to retrieve content from a third party. This removes the scalability bottleneck of the server because each additional Client is responsible for its own content collection tasks.

<SCRIPT>The scalability advantage of the tag is obtained at the cost of avoiding the same-origin policy security model, which may cause easy Attacks:

• Cross-Site cookie access is possible:The scripts of one site can access the cookies of another site.
• You cannot check the security of the retrieved code before running it:Run the code immediately after it is loaded.

Back to Top

Possible solutions

Obviously, the tools currently provided by the browser for mashup cannot build applications with both scalability and security. Developers must find a solution that is effective both in the current and long term.

Here and now

A recently developed Content Retrieval TechnologySRCURLFragment identifier(# The part after the symbol in the URL) uses the page script and the hiddenIFRAMECommunication. Scripts and embeddedIFRAMEYou can set each other's fragment identifiers, although they come from different origins. Scripts maintain a consistent communication protocol driven by a javascript timer that regularly activates routines to check for changes in the fragment identifier.

Because scripts must understand each other's addresses and must collaborate with each other to achieve consistent agreement compliance, ensure trust. Cookie is not exposed because any server interaction is performed locally on each component and the communication is separated from the script.

Although it is still not perfect (for example, it depends on exceptions other than the design behavior, and it is better to use event activation to respond to changes for query changes ), however, this solution is closer to providing local, secure, and Cross-Domain Communication in the browser than any other solution.

Note:James Burke is a developer of AOL developer network. He created the fragment identifier technology and built it into the latest dojo toolkit JavaScript library.

Long-term

Browser manufacturers and development groups are currently discussing several possible ways to modify browser environment elements so that they can be built with Ajax mashup. Web hypertext Application Technology Working Group (whatwg) is used inCross document messagingIn section 1.0 of the Web applications 7.3 working draft mechanism, a suggestion is provided. The Opera browser has implemented this feature. It specifies the method for collaborative communication between DOM objects in different domains. This method allows the Message Receiver to select the message to be responded Based on the message origin.

Ian Hickson previously worked in opera and now works in Google. He proposedXMLHttpRequestCross-Site extension of objects. His proposal includes several modifications to the method of sending requests (including Header control restrictions and access control mechanisms.

Douglas crockford works for Yahoo! He is one of the world's most sophisticated JavaScript language experts. You can use Yahoo! Developer Network has found many examples of advanced javascript technology andArticle. Another scheme proposed by crockford is JSON, a widely used data exchange format in Ajax applications, mainly because it is easy to be parsed by JavaScript and not as redundant as XML. Crockford has written two proposals to build mashup-sensitive elements into a browser.

Brilliant proposal

There are several brilliant proposals to help you deal with this dilemma:

• JsonrequestProposal:A browser implements a new object in a way similar to the existingXMLHTTPObject, made the following changes:
  • JsonrequestThe same-origin policy will be exempted.
  • The minimum setting of the HTTP header is used to reduce the overall size of the request.
  • Do not transmit cookies to avoid cross-site cookies.
  • JsonrequestOnly valid JSON text is accepted, and the original executable code is not sent for execution.
  • After a communication failure, introduce random latency before trying again to block some attack classes.
  • Each request returns a sequence identifier, making it easier for an asynchronous response to be associated with its original request.
  • The specific support for Bidirectional connections enables the server to Start Communication asynchronously through an open communication channel.
• <Module>Mark proposal:The new HTML Tag separates pages into a set of modules that are unaffected but can communicate securely with each other:
  • The<Module>Tags allow access to third-party resources without the same-origin policy.
  • Cooperative communication between pages and modules can only be performed through specific interfaces. Modules cannot communicate with each other-they can only communicate with pages. The page makes communication between modules more convenient.
  • Communication is limited to valid JSON text. In contrast, communication with JavaScript objects may cause Security Leakage due to the included code.
  • Some restrictions are put forward to ensure that modules and pages do not interfere with each other's display, so as to avoid security problems.
• Content restriction header:Gervase Markham proposed a content restriction header specification that allows the author to express all intentions-determine the way the content interacts with other sites. Consistent implementation submits content restriction headers that contain policy strings.
• W3C access control list (ACL) system:W3C ACL system can be used as an ACL-Based System Model to manage access to HTTP resources in Ajax mashup.
• Cross-browser.xml:The Flash Object looks for the cross-browser.xml file on the server before attempting to access its specific URL. This file specifies the site that can host the application that accesses the services provided on the server. Many Web service providers have implemented this file.

For more information about these proposals, see references.