Web topic 26 browser compatibilty and security

Web Authoring

Topic 26 – Browser Compatibility & Security

Objectives

1. Describe the necessity of performing a browser compatibility test. 2. Follow procedures to ensure the browser

compatibility of websites.

Students should able to:

Browser Compatibility

If you’ve tried using different Web browsers to surf online, you’ve probably noticed that the same sites look a little different depending on which browser you’re using.

Browser testing is necessary because different web browsers render HTML and CSS code differently.


Browser compatibility is the ability of the Web browser to properly interpret the hypertext markup language (HTML) that renders Web pages.

That is because page display varies according to browser compatibility.

Browser CompatibilityMost sites are designed to look correct in Microsoft’s Internet Explorer, because it is believed to be the most ubiquitous browser. However, if you are a Web designer, your task is to code a site for maximum browser compatibility so that the pages look correct in other popular browsers such as FireFox, Safari, Google Chrome, etc.

Browser CompatibilityBrowser compatibility creates potential headaches for webmasters. As newer popular scripting languages create flashy Web pages, older browsers may not understand the new code. For security reasons, many people disable scripting languages in their Web browsers, reducing browser compatibility.

Browser CompatibilityAside from the difference in browsers, another factor that plays into browser compatibility is whether the surfer is using a standard PC and Windows, Linux, or a Mac computer. The same browser will render the pages a little differently from each of these platforms.

Browser CompatibilityWhy browser testing is important?

A web browser is a program that renders HTML, CSS and Javascript files according to a set of rules built into the application. Although web browser manufacturers use the recommended guidelines of the World Wide Web Consortium’s specifications for HTML and CSS, they can interpret these rules as required for their own purposes.

Browser CompatibilityAre web pages required to look the same in all browsers?In the case of technical considerations, you must determine whether you could achieve your goal of making a web page look the same. For example, the earliest browsers, such as Internet Explorer 3 or Netscape 3, do not support cascading style sheets.

Browser CompatibilityAre web pages required to look the same in all browsers?In the case of time/budget considerations, you might find technical solutions to make your pages look the same, but if it takes you more time than you have allotted to identify and fix the problem you should determine whether the solution is worth it.

Browser CompatibilityAttempting to make web pages look the same in multiple browsers is not as important due to several reasons:

- People browse the web in different ways.- Monitor resolution. A website on a 17-inch monitor never looks the same as on a 27-inch monitor.


- Mobile devices, which represent a growing proportion of web browsers.

- Text resizing. Users can override the page layout by increasing or decreasing text size.

- Client expectations, as clients are quite often less technically oriented than the web designer.


The level of browser use partially accounts for your decision to support it. The choice of which browsers to support becomes more difficult with more recent browsers.

Choose the level browser of browser support you want


Locating an accurate number of the web browsers currently in use today is difficult. Individual websites can gather accurate information on their user’s browser version. Visit to some of the sites listed below for an accurate estimate.

Browser Statistics

www.w3schools.com/browsers/browsers_stats.asp

www.statowl.com

http://www.w3schools.com/browsers/browsers_stats.asp

http://www.statowl.com/


The first step in testing your page design is to view it in the desired browser.

However, this is not always easy, for various reasons.

Tools to identify browser problems

Browser Compatibility • You might not have access to the browser, which is a common problem when testing for cross-browser compatibility. Cross-browser refers to the ability for a website to support all the web browsers.

Browser Compatibility• Different windows operating system might not allow multiple versions of Internet Explorer to be installed on the same system.

A common solution is to have access to a separate computer. Many web designers invest in an inexpensive computer mainly used for testing.

Browser CompatibilityHowever, this option may not be practical for several reasons: • Inefficiency. There might be a time lag involved in continuously changing computers. • The debugging process involves making many small changes. It could become tedious to change computers after every change.


If a Windows computer is your primary device and you need to test your designs on a Mac, you will need a separate computer.

Virtualization solutions for Windows

You could have Windows 7 with a modern browser as your primary system, and a virtual machine that runs Windows XP with Internet Explorer 6.


Windows virtual PC is Microsoft’s native virtualization tool that allows you to install one or more virtual machines on your system.

Windows Virtual PC

You need sufficient system resources, such as hard-drive space and memory, to make this a viable option.


An alternative is to use a browser testing application or service whose only job is to test web pages. Although the details differ, the basic concept is the same: to provide “snapshots” of your web pages in different browsers.

Browser compatibility applications


Dreamweaver CS5 has a new feature that will help you track down the most common bugs – and give you the fix for them as well. It is called Check Browser Compatibility and it is accessed through the Check Page icon in the Standard toolbar.

Dreamweaver CS5


BrowserLab lets you preview your page in a number of different browsers and platforms, so you are not limited to Mac or PC. The basic steps are to enter the URL of the page you would like to preview to generate a screenshot of the page. You can then compare the screenshots if you define multiple browsers.

Adobe BrowserLab


SuperPreview is a Windows platform that only uses the browsers installed on a local system, but it also has a network feature similar to BrowserLab to let you view your page using Safari on OS X.

Microsoft SuperPreview

SuperPreview will not solve the layout issues, but it helps you to easily identify them.

Web Application Security

Some of the vulnerabilities you'll be looking for is: By far the most popular: cross-site scripting (XSS). XSS results from malicious scripts being injected into a Web site.

Common vulnerabilities

Web Application SecurityCommon vulnerabilitiesSQL injection is the second most popular vulnerability, primarily because of the growing dependence Web sites have on databases.

Web Application SecurityCommon vulnerabilities

SQL injection is actually quite simple: By finding a Web site that connects to a database, malicious hackers execute an SQL query in a place that the developer never intended for the purpose of bypassing authentication or manipulating data.

Web Application SecurityWebScarab

WebScarab is first and foremost a proxy used to analyze browser requests and server replies. In addition to serving as a tool for packet analysis, you can use it to "fuzz" sites, looking for some of the same exploits as mentioned.

Technology

Web topic 26 browser compatibilty and security