isecon 2006 online content editing - an evaluation and comparative study dynamic page builder an...

ISECON 2006ISECON 2006

Online Content Editing - An Evaluation and

Comparative Study

Dynamic Page BuilderDynamic Page BuilderAn Evaluation and Comparison.An Evaluation and Comparison.

Samuel Sambasivam Samuel Sambasivam David C. MillsDavid C. Mills


Project GoalsProject Goals

The main goal was to provide a solution for The main goal was to provide a solution for cross browser compatibilitycross browser compatibility

To compare and analyse the Dynamic Page To compare and analyse the Dynamic Page Builder product against the technology available Builder product against the technology available todaytoday

To remove HTML Components if possibleTo remove HTML Components if possible To investigate the use of XMLTo investigate the use of XML To provide a demonstrable software exampleTo provide a demonstrable software example


DescriptionDescription

Investigate alternative software solutions in Investigate alternative software solutions in order to provide a browser based HTML page order to provide a browser based HTML page editor comparable to the Dynamic Page Builder editor comparable to the Dynamic Page Builder Product.Product.

Review the existing product and compare it Review the existing product and compare it against current solutions in an attempt to provide against current solutions in an attempt to provide a cross browser solutiona cross browser solution

FOR MORE INFO...

Current Product only functions within Internet Explorer 5.5Current Product only functions within Internet Explorer 5.5®® and and above, it can be seen at above, it can be seen at Page Builder Demo PagePage Builder Demo Page


Analysis and DesignAnalysis and Design

Object Oriented approach preferredObject Oriented approach preferred Microsoft .Net favoured due to its flexibilityMicrosoft .Net favoured due to its flexibility ASP .Net in particularASP .Net in particular

Relational DatabaseRelational Database Again Microsoft SQL Server 2000Again Microsoft SQL Server 2000 SQL Server has support for XMLSQL Server has support for XML

Other Languages usedOther Languages used XML, HTML, JavaScript, SQLXML, HTML, JavaScript, SQL


Design OverviewDesign OverviewThe original project used Microsoft active server pages, Microsoft HTML The original project used Microsoft active server pages, Microsoft HTML

Components, JavaScript and SQL server.Components, JavaScript and SQL server.

The main challenge was to identify a way in which a product could be The main challenge was to identify a way in which a product could be developed that would compare with the original software. The design of the developed that would compare with the original software. The design of the new software product was restricted by one constraint and that was simply new software product was restricted by one constraint and that was simply that the user should not need to download any additional software to their that the user should not need to download any additional software to their machine. Other than that which can be achieved through the download of a machine. Other than that which can be achieved through the download of a standard web page no plug in software should be used.standard web page no plug in software should be used.

The design of the new software has taken the restriction into account and The design of the new software has taken the restriction into account and provides a solution to meet this goal. It is based on the Microsoft .Net provides a solution to meet this goal. It is based on the Microsoft .Net Architecture and utilises Active Server Pages .Net (Visual Basic), Extensible Architecture and utilises Active Server Pages .Net (Visual Basic), Extensible mark-up language, SQL, and JavaScript. The editor interface that can be mark-up language, SQL, and JavaScript. The editor interface that can be seen* is a User Control that I developed specifically to address the issue of seen* is a User Control that I developed specifically to address the issue of browser compatibility.browser compatibility.

* * Please refer to related documents at the end of this presentation (New Demonstration).Please refer to related documents at the end of this presentation (New Demonstration).


Design Overview Cont.Design Overview Cont.This control utilises XML in order to read configuration data, Visual This control utilises XML in order to read configuration data, Visual

Basic on the middle tier in order to render the presentation layer and Basic on the middle tier in order to render the presentation layer and JavaScript as part of the presentation layer in order to invoke to JavaScript as part of the presentation layer in order to invoke to appropriate browser functionality.appropriate browser functionality.

The core of editable content is provided by an API (Application The core of editable content is provided by an API (Application Program Interface) call to the either Microsoft Internet ExplorerProgram Interface) call to the either Microsoft Internet Explorer®® or or any of the Mozillaany of the Mozilla®® family of browsers. This is achieved by detecting family of browsers. This is achieved by detecting the users browser when they call the editor page (this is displayed the users browser when they call the editor page (this is displayed along with their IP address on http://dynamicpagebuilder.co.uk once along with their IP address on http://dynamicpagebuilder.co.uk once the they have logged in). the they have logged in).

The browser information is passed to the control and a text writer is The browser information is passed to the control and a text writer is utilised within the control in order to render the appropriate utilised within the control in order to render the appropriate JavaScript (either Internet ExplorerJavaScript (either Internet Explorer®® compatible or Mozilla compatible or Mozilla®® compatible).compatible).


Design Overview Cont.Design Overview Cont.The flow of the editor code is relatively simple there is one container The flow of the editor code is relatively simple there is one container

page that has the editor control embedded within it. When the page page that has the editor control embedded within it. When the page is called it instantiates the editor control that performs the tasks is called it instantiates the editor control that performs the tasks detailed in the previous slide.detailed in the previous slide.

Once the JavaScript has been rendered to the presentation layer the Once the JavaScript has been rendered to the presentation layer the actual editor is invoked, this is a case of including the ‘designMode actual editor is invoked, this is a case of including the ‘designMode = on’ property in a standard iFrame. From this point the editor = on’ property in a standard iFrame. From this point the editor functionality is provided by a call to execCommand.functionality is provided by a call to execCommand.

ExecCommand takes three parameters CommandName, ExecCommand takes three parameters CommandName, UserInterface, and Value. This is true for both browser types UserInterface, and Value. This is true for both browser types however Internet Explorerhowever Internet Explorer® ® supports the UserInterface parameter far supports the UserInterface parameter far more gracefully than Mozillamore gracefully than Mozilla®®..


Design Overview Cont.Design Overview Cont.The MozillaThe Mozilla®® Browser’s simply expect the UserInterface to be set to Browser’s simply expect the UserInterface to be set to

false otherwise it will return an error.false otherwise it will return an error.

There are some moves towards including the MicrosoftThere are some moves towards including the Microsoft®® only only contenteditable attribute within the next version of the W3C Dom*. contenteditable attribute within the next version of the W3C Dom*. This would be of great benefit as it allows a greater level of This would be of great benefit as it allows a greater level of granularity, and individual elements within a page can be set to granularity, and individual elements within a page can be set to editable (not just an iFrame, Div or Span).editable (not just an iFrame, Div or Span).

The code you will see in the demonstrations on the supporting web site The code you will see in the demonstrations on the supporting web site under project test has the contenteditable attribute included as part under project test has the contenteditable attribute included as part of a test that proves Mozillaof a test that proves Mozilla®® browsers will simply ignore it. browsers will simply ignore it.

FOR MORE INFO...

The various versions of the W3C DOM can be found here and the The various versions of the W3C DOM can be found here and the Microsoft version can be found here.Microsoft version can be found here.


Security DesignSecurity DesignThis turned out to be the most complex part of the project, the original This turned out to be the most complex part of the project, the original

utilised the most rudimentary security which had to be addressed on utilised the most rudimentary security which had to be addressed on order to cater for session management and access to the site and order to cater for session management and access to the site and editor in general.editor in general.

To address security I have implemented a detailed session To address security I have implemented a detailed session management component, this not only caters for the length of a management component, this not only caters for the length of a users session, but also how they are authenticated on the web site users session, but also how they are authenticated on the web site and most importantly whether they are able to access any of the and most importantly whether they are able to access any of the individual pages within the site.individual pages within the site.

The component sits in the middle tier (in the main .Net assembly) which The component sits in the middle tier (in the main .Net assembly) which is where traditional COM components would have been, one is where traditional COM components would have been, one of .Nets most powerful features is the fact that all of the traditional of .Nets most powerful features is the fact that all of the traditional COM components are rolled up into one assembly dll.COM components are rolled up into one assembly dll.


Security Design Cont.Security Design Cont.The user will be asked to Sign in when they visit the site, unless a cookie is The user will be asked to Sign in when they visit the site, unless a cookie is

found on their machine in the initial page load checks. Once they provide a found on their machine in the initial page load checks. Once they provide a user name and password the following things happen.user name and password the following things happen.

First the default.aspx page of the site will make a call to the database and First the default.aspx page of the site will make a call to the database and check the details against the user information stored these two sets of data check the details against the user information stored these two sets of data are compared.are compared.

If the username is incorrect the user will simply be informed that their sign in If the username is incorrect the user will simply be informed that their sign in attempt has failed, no more detail is provided.attempt has failed, no more detail is provided.

If the username is correct but the password is wrong the user is informed that If the username is correct but the password is wrong the user is informed that their sign in attempt has failed. The user table on the database is also their sign in attempt has failed. The user table on the database is also updated with a counter, this provides a limit to the number of times sign in updated with a counter, this provides a limit to the number of times sign in can be attempted to three (it can easily be amended to more or less can be attempted to three (it can easily be amended to more or less attempts by modification of one parameter).attempts by modification of one parameter).

If the user has attempted to log on unsuccessfully more than three times they If the user has attempted to log on unsuccessfully more than three times they will be locked out and informed that they must request their sign in to be will be locked out and informed that they must request their sign in to be reset. The diagram on the next slide shows the user experience.reset. The diagram on the next slide shows the user experience.


Security Design Cont.Security Design Cont.

User experience / Logical flow

Enter site at thewelcome page.

Default.aspx

Attempt to Sign In viawelcome page.

Default.aspx

Sign In control removedand welcome message

displayed.

Default.aspx

Error message displayedreturned to Sign In.

Default.aspx

Sign InSuccessfulYes / No

No

Yes

At this stage the menucontrol has been replaceddependant on the user’s

status. The user will now beable to navigate to pagesthey are allowed to view.(See Page Access String)

If the user fails to enter thecorrect password with a validuser name more than threetimes they are locked out

from the system.

Default in useYes / No

Sign In control replacedwith change passwordcontrol user asked to

change password

No

Yes

When the default page is firstentered the following checks

are performed, Is the useralready logged in? If so do

they have access to view thispage?


Security Design Cont.Security Design Cont.In a little more detail the diagram on the next slide shows how the program In a little more detail the diagram on the next slide shows how the program

flows and the interaction between the front end and the database.flows and the interaction between the front end and the database.

When an initial login attempt is made the only database call that is made is a When an initial login attempt is made the only database call that is made is a single call to retrieve the users details, this is provided through a stored single call to retrieve the users details, this is provided through a stored procedure as I have chosen not to embed any SQL within the application procedure as I have chosen not to embed any SQL within the application code in order to maintain the correct level of code separation.code in order to maintain the correct level of code separation.

The stored procedure usr_sp_login_check is called and contains a simple The stored procedure usr_sp_login_check is called and contains a simple search for the username where it is like the username supplied from the search for the username where it is like the username supplied from the sign in screen. If the user information is found then the next stage of the sign in screen. If the user information is found then the next stage of the process is invoked and the users details are returned in order to match the process is invoked and the users details are returned in order to match the password stored on the user table with the password provided through the password stored on the user table with the password provided through the user interface.user interface.

The next slide provides a look at the flow that takes place when a sign in The next slide provides a look at the flow that takes place when a sign in attempt is made.attempt is made.


Security Design Cont.Security Design Cont.Under the hood

Sign In attempt.Username and

password set Post page(second pass into page.)

tbl_user

First time into page, alldefaults are set Sign In

control and standardmenus are displayed.

usr_sp_login_checkis called using these

as parameters.

Stored procedurereturns 1,2,3,4 or 909

to the page.

Key to return values1 - login failed password does not match username2 - Default password is in use user must change their password3 - This is an internal user and the password matched return allrelevant details.4 - This is an external user and the password matched returnall relevant results.909 - The password has been entered incorrectly more than 3times for a valid user the user is locked out.

SuccessfulSign In

No

Page displayswelcome message

and createsSession entry’s

Create Cookieencrypt session IDand write encryptedsession ID to cookie.

Page calls Session Managercomponent which returns anencrypted GUID created bythe data base. See SessionManager diagram for more

detailed information.

Add predefinedsession details to

the sessionmanager database.

tbl_ssn_sessionDataWelcome

message isdisplayed to user.

Any Page that is now called will access the session management database in order to establish whether theuser can view it. All predefined session variables will be made available to the code behind.

The first time the page isloaded Session Manager iscalled in order to establish ifa cookie is present on the

client machine.


Security Design Cont.Security Design Cont.Once the user has provided a matching username and password with the data Once the user has provided a matching username and password with the data

stored in the user table the process continues. As you will have seen in the stored in the user table the process continues. As you will have seen in the diagram on the previous slide once a login is successful the default.aspx diagram on the previous slide once a login is successful the default.aspx page will write a cookie to the users machine this contains an encrypted page will write a cookie to the users machine this contains an encrypted GUID that is created by the Session Manager component. This is the only GUID that is created by the Session Manager component. This is the only information the cookie contains.information the cookie contains.

The GUID is generated by the ssn_sp_insertSession Stored procedure and The GUID is generated by the ssn_sp_insertSession Stored procedure and passed back to the component which then encrypts it and passes it back to passed back to the component which then encrypts it and passes it back to the presentation layer in order to store the data on the users machine. This the presentation layer in order to store the data on the users machine. This then allows the default.aspx page to invoke several calls to the component then allows the default.aspx page to invoke several calls to the component that add the data fields retrieved from the user table in the database to the that add the data fields retrieved from the user table in the database to the session table. These fields are then available for use throughout the session table. These fields are then available for use throughout the application.application.

Update Session performs two main tasks it inserts / updates units of session Update Session performs two main tasks it inserts / updates units of session data and secondly it updates the timestamp used to measure how long the data and secondly it updates the timestamp used to measure how long the users session has been running for. This timestamp is compared against users session has been running for. This timestamp is compared against the session time out parameter that is passed into the component from the the session time out parameter that is passed into the component from the deafult.aspx page. (This could be passed from any page and therefore deafult.aspx page. (This could be passed from any page and therefore allows for various session time outs dependant on the page being viewed.)allows for various session time outs dependant on the page being viewed.)


Security Design Cont.Security Design Cont.The diagram below shows that relationship between the three Session The diagram below shows that relationship between the three Session

management tables and the component.management tables and the component.

Session Manager Component

tbl_sessionDatatbl_session tbl_sessionStore

Session ManagerComponent

Exposed methods of Session ManagerCreateSessionEncryptValueStoreSessionUpdateSessionCheckUserAccessGetSessionValueGetSessionValuesGetSessionVariablesSignOff

The other important methods of the component are encryptvalue and The other important methods of the component are encryptvalue and GetSessionVariables. These are explained on the next slide.GetSessionVariables. These are explained on the next slide.


Security Design Cont.Security Design Cont.EncryptValue calls a private function within session manager ‘EncryptString’ EncryptValue calls a private function within session manager ‘EncryptString’

this in turn encrypts the value. It uses a simple convert to ASCII value, add this in turn encrypts the value. It uses a simple convert to ASCII value, add an arbitrary number and then perform XOR translation. The reason that an arbitrary number and then perform XOR translation. The reason that EncryptValue calls EncryptString is that DecryptValue also calls EncryptValue calls EncryptString is that DecryptValue also calls EncryptString in order to convert the encrypted value back again.EncryptString in order to convert the encrypted value back again.

Whilst the session manager component is capable of storing and retrieving one Whilst the session manager component is capable of storing and retrieving one or many values, I decided to produce a Class that would contain all relevant or many values, I decided to produce a Class that would contain all relevant details for a given user session (Session Variables) the details for a given user session (Session Variables) the GetSessionVariables method of the component populates this class from GetSessionVariables method of the component populates this class from the user table and passes an instance of it to the front end in order for it to the user table and passes an instance of it to the front end in order for it to be stored in the session data.be stored in the session data.

I have provided the entire ASP .Net project in a separate compressed file for I have provided the entire ASP .Net project in a separate compressed file for inspection should you wish to view the above component it can be found in inspection should you wish to view the above component it can be found in the component folder within the sessionmanager.vb file.the component folder within the sessionmanager.vb file.

FOR MORE INFO...

The ZIP file that contains the files mentioned can be downloaded The ZIP file that contains the files mentioned can be downloaded herehere


Learning OutcomeLearning Outcome I have successfully identified a way in which a cross browser I have successfully identified a way in which a cross browser

solution can be provided.solution can be provided. I have developed a deeper understanding of online editing and the I have developed a deeper understanding of online editing and the

fact that it is solely dependant on vendor functionality provided as fact that it is solely dependant on vendor functionality provided as part of the browser DOMpart of the browser DOM

I have identified Web Services and XML as a source for further I have identified Web Services and XML as a source for further investigationinvestigation

Most importantly I have identified that there is actually no need to Most importantly I have identified that there is actually no need to store HTML/XHTML in the database but simply open and close the store HTML/XHTML in the database but simply open and close the documents via ftp.documents via ftp.

It is noteworthy that W3C have included open and save functionality It is noteworthy that W3C have included open and save functionality within DOM level 3 and this is also an area for further investigation.within DOM level 3 and this is also an area for further investigation.

I also proved that it is not necessary to use HTML components in I also proved that it is not necessary to use HTML components in order to expose editable content within the web browser thus order to expose editable content within the web browser thus making it possible to provide an editor that functions in many making it possible to provide an editor that functions in many browsers not just Internet Explorerbrowsers not just Internet Explorer®®..


ConclusionConclusion

It is possible to provide an online content editor that It is possible to provide an online content editor that functions with the major browsers, without the need to functions with the major browsers, without the need to use software plug ins or PHP (compiled code).use software plug ins or PHP (compiled code).

While this academic project has been able to prove that While this academic project has been able to prove that a cross browser non PHP / Plug in editor is possible, it a cross browser non PHP / Plug in editor is possible, it must be noted that due to the dominance of Internet must be noted that due to the dominance of Internet ExplorerExplorer® ® it is perhaps not commercially viable.it is perhaps not commercially viable.

There are a number of excellent alternatives and among There are a number of excellent alternatives and among the best are those that the best are those that utiliseutilise PHP as a base. Most of PHP as a base. Most of these products allow for the simple inclusion of the code these products allow for the simple inclusion of the code in the CGI bin.in the CGI bin.


Related DocumentsRelated Documents

Main Dissertation DocumentMain Dissertation Document Can be found hereCan be found here

Original Project PlanOriginal Project Plan Can be found hereCan be found here

Original Dynamic Page Builder DemoOriginal Dynamic Page Builder Demo Can be found hereCan be found here

New Demonstration (Cross Browser)New Demonstration (Cross Browser) Can be found hereCan be found here