We surveyed various archival systems to compare and contrast different techniques used to implement an archival replay banner. We found that inline plain HTML injection is the most common approach, but prone to style conflicts. Iframe-based banners are also very common and while they do not have style conflicts, they suffer from screen real estate wastage and limited design choices. Custom Elements-based banners are promising, but due to being a new web standard, these are not yet widely deployed

Alam, Sawood

Kelly, Mat

Nelson, Michael L.

Weigle, Michele C.

English

Old Dominion University

Old Dominion University ODU Digital Commons Computer Science Faculty Publications Computer Science 2018 A Survey of Archival Replay Banners Sawood Alam Old Dominion University Mat Kelly Old Dominion University Michele C. Weigle Old Dominion University Michael L. Nelson Old Dominion University Follow this and additional works at: https://digitalcommons.odu.edu/computerscience_fac_pubs  Part of the Cataloging and Metadata Commons, and the Databases and Information Systems Commons Original Publication Citation Alam, S., Kelly, M., Weigle, M. C., & Nelson, M. L. (2018, June 6, 2018). A survey of archival replay banners [Conference Paper]. Web Archiving and Digital Libraries Workshop, Fort Worth, Texas. http://hdl.handle.net/10919/97988 This Conference Paper is brought to you for free and open access by the Computer Science at ODU Digital Commons. It has been accepted for inclusion in Computer Science Faculty Publications by an authorized administrator of ODU Digital Commons. For more information, please contact digitalcommons@odu.edu. A Survey of Archival Replay BannersSawood Alam, Mat Kelly, Michele C. Weigle, and Michael L. NelsonOld Dominion UniversityDepartment of Computer ScienceNorfolk, Virginia, USA{salam,mkelly,mweigle,mln}@cs.odu.eduABSTRACTWe surveyed various archival systems to compare and contrastdifferent techniques used to implement an archival replay banner.We found that inline plain HTML injection is the most commonapproach, but prone to style conflicts. Iframe-based banners arealso very common and while they do not have style conflicts, theysuffer from screen real estate wastage and limited design choices.Custom Elements-based banners are promising, but due to being anew web standard, these are not yet widely deployed.1 INTRODUCTIONWeb archival replay systems express that a user is interacting witha memento (an archived representation of a resource at a URI-M)by adding an archival banner. Archival banners provide metadataabout both the memento and the original resource as well as serveto distinguish a memento from its corresponding original resource.These banners may also contain various controls and toolbars tointeract with the archive and the memento.There are many ways to include an archival banner, both fromthe code and the user interface (UI) perspectives. An archival ban-ner can be part of a standalone native archival application (e.g.,WAIL [5]), a browser toolbar (e.g., now defunct MementoFox), ordirectly included in the markup of the served memento. It is thelatter that is the focus of this survey, i.e., the banners that share theviewport and rendering environment with the memento (injectedby the server or a client-side script/extension). Banner injection ina memento is generally obtrusive (it makes the page look differentfrom the original) and may consume additional screen real estate.We illustrate this in Figure 1(a) by archiving example.com in threedifferent archives successively, resulting in cascading banners. Notincluding a banner, on the contrary, loses metadata and provenanceinformation.2 BANNER COMPARISONTable 1 compares three primary techniques to serve an archivalbanner markup with a memento used in archival replay bannersof various archival systems. Below are their brief descriptions andhow are they used in various archival systems.Table 1: Comparison of different archival banner typesFeatures Plain HTML IFrame Custom ElementsImplementation Simple Difficult IntermediateMarkup rewriting Messy None CleanCompatible browsers All All ModernIsolation level None Document StylePositioning Anywhere Edges AnywhereElement overlap Likely Unlikely LikelyDraggable & floatable Possible No PossibleURI-M visibility Clear Hidden ClearOrigin isolation Limited Possible Limited2.1 Inline Plain HTML BannersInline plain HTML is the simplest and most commonly used methodof adding an archival banner in which necessary markup and styleare injected directly in the archived HTML. While simple, it posessome issues such as vulnerability to attacks [4], conflicts with thestyle of the memento (as illustrated in Figure 1(b)), or hiding im-portant elements of the page (e.g., the header of the site).Many services such as the Internet Archive, Archive-It, andUK Web Archive (Figure 1(b)) use this method. OpenWayback, acommonly used archival replay system, supports it. The Archive.isbanner, highlighted as number 3 in the Figure 1(a), is different fromthe above mentioned archives. It flattens the rendered mementomarkup, removes all the JavaScript, and injects it into a page thatis surrounded by the banner markup. Oldweb.today uses a similartechnique, but it utilizes server-side rendering that is emulatedon a canvas element using Virtual Network Computing (VNC).Mink [10] is a Chrome extension that injects banner markup ina page on-demand (as illustrated in Figure 1(c)). It uses ShadowDOM [8] to isolate the style of the banner from the page.2.2 Frame/Iframe BannersUsing frame or iframe HTML elements is another common tech-nique to provide archival banners. Iframe banners provide fulldocument isolation, both origin and style, hence do not conflictwith the position or style of the other elements of the memento.However, their positioning is not flexible enough to place them atany arbitrary location in the viewport. Since these banners mustbe placed clear of the memento without any overlay possibilities,often less screen real estate is available to render mementos.This can be implemented by 1) serving both the banner andmemento documents in separate frames/iframes of a parent page,or 2) making the banner document as the outer page and servingthe memento inside an iframe. For example, WebCite (highlightedas number 2 in the Figure 1(a)) uses the first approach while manyarchives, such as the PortugueseWeb Archive and National Recordsof Scotland, use the latter. PyWB, a popular web archival replaysystem, uses the latter approach by default (highlighted as number4 in the Figure 1(a)), but allows using plain inline HTML banners.2.3 Custom Elements BannersCustom Elements [7] is a recent web standard. It allows developersto define their own custom HTML element in JavaScript using thesame capabilities that native elements have. Implementation detailsof the banner can be hidden, allowing a minimal and clean markupinjection. By using the Shadow DOM the style is scoped to thebanner, hence, there are no conflicts with other elements of thememento. This method allows both flexible design and placementchoices like inline markup banners and style isolation like iframes.(a) Three Cascading Archival Banners in a Memento(b) Page Style Leaks into the Banner(c) Mink Banner: Injected On-demand by the Chrome ExtensionFigure 1: Various Inline-and Iframe-based Archival BannersThis approach is used by a banner introduced in Reconstructive[1], which is used by the IPWB [9] replay system. ReconstructiveBanner [3] is an unobtrusive, interactive, responsive, and extensiblemulti-state archival banner. It requires minimal real estate in theFloating Action Bar (FAB) state (as illustrated in Figure 2(a)) and al-lows drag-and-drop repositioning in the viewport while hiding itselfwhen not needed. In the on-demand Expanded state (as illustrated inFigure 2(b)) it provides an extensible set of interactive visualizationsand provenance information that are customizable by the archive.To prevent from any live-leaks (or zombies [6]) it utilizes Service-Worker for client-side reconstruction [2] of composite mementos.3 CONCLUSIONS AND FUTUREWORKWe surveyed various archival systems and described different tech-niques used to implement an archival replay banner. Inline plainHTML injection is the most common approach used by many sys-tems, but prone to style conflicts. Iframe-based banners are also usedby many archival systems and while having style isolation, theysuffer from screen real estate wastage and limited design choices.A more promising approach is Custom Elements-based banners, asused in the Reconstructive and IPWB.(a) Draggable Floating Action Bar (FAB): Brief Information and Quick Actions(b) Expanded: Metadata, Provenance, and Interactive VisualizationsFigure 2: Reconstructive Banner Modes4 ACKNOWLEDGEMENTSThis work is supported in part by NSF grant III 1526700.REFERENCES[1] Sawood Alam. 2018. Introducing Reconstructive - An Archival Re-play ServiceWorker Module. http://ws-dl.blogspot.com/2018/01/2018-01-08-introducing-reconstructive.html. (2018).[2] Sawood Alam, Mat Kelly, Michele C. Weigle, and Michael L. Nelson. 2017. Client-side Reconstruction of Composite Mementos Using ServiceWorker. In Proceedingsof JCDL. 237–240.[3] Sawood Alam, Mat Kelly, Michele C. Weigle, and Michael L. Nelson. 2018. Un-obtrusive and Extensible Archival Replay Banners Using Custom Elements. InProceedings of JCDL.[4] John A. Berlin. 2018. To Relive The Web: A Framework For The TransformationAnd Archival Replay Of Web Pages. Master’s thesis. Old Dominion University,Department of Computer Science.[5] John A. Berlin, Mat Kelly, Michael L. Nelson, and Michele C. Weigle. 2017. WAIL:Collection-Based Personal Web Archiving. In Proceedings of JCDL. 340–341.[6] Justin F. Brunelle. 2012. Zombies in the Archives. (2012). http://ws-dl.blogspot.com/2012/10/2012-10-10-zombies-in-archives.html[7] Domenic Denicola. 2016. Custom Elements. https://www.w3.org/TR/custom-elements/. (2016).[8] Hayato Ito. 2017. Shadow DOM. https://www.w3.org/TR/shadow-dom/. (2017).[9] Mat Kelly, Sawood Alam, Michael L. Nelson, and Michele C. Weigle. 2016. Inter-Planetary Wayback: Peer-To-Peer Permanence of Web Archives. In Proceedingsof TPDL. 411–416.[10] Mat Kelly, Michael L. Nelson, and Michele C. Weigle. 2014. Mink: Integrating theLive and Archived Web Viewing Experience Using Web Browsers and Memento.In Proceedings of JCDL. 469–470.3 1 Linked rrom 93.l86.104.2Ql;pl<_ ~ masa.asn.au/masa'Mki• Sil!!ll..ll2! = :;. ll!IR ~ ~ 2 Showing WebCite for URL: http://www.example.com/ [Permalink to this cache] Ca ch ed: ~ -291634:07 1. Original page 2. WebCite banner 3. Archive.is banner Example Domain 4. PyWB banner C i Secure https www.webarchtve.org.ukrWayback/ar h ang'"dr * 0 I~ " ; ••~ "": 0o l ---.. '" lim ? • l017i l0lh •I .JJ,..... aa.aJ m3•----- I [. 1.'11.:.1 -~-:.:..-=-- . ~ ~-----------------------...... ---.· ..n.,.,.,...u • I ( The banner is affected by the Right-to-Left direction of the memento I .,.,_,,._..,.. • ~ ~,..JL;..ul • example.com 30245 mementos ovolloble. On-demand banner using browser add-on Archive Page To .. Ust mementos by. Dnlldown Example , ... , 05.32.16 2 601 4 05 32;16 3 ,., 2 05:32:16 6 101h 9 I os:32:16 13 121h 2 23-21:03 This domain is esta 18 17"' 2 23:21:03 You may use this d 6 22nd s 23 21:03 or 17 251h 5 23:21:03 permission. 31 23:21:03 34 36 More information ... 18 ~ Example Domain f- C i Secure https://lpwb.ws-dl.cs.odu.edu/memento/2O1711152O5638/example.com/ * Example Domain This doma in is established to be used for illustrative examples in documents. You may use this domain in examples without prior coordination or asking for permission. I hnp://example.com/ I X More information ... ~ 14 Captured 2 months ago .i ~ ~ ~ C i Secure I https://lpwb.ws-d l.cs.odu.edu/memento/20171115205638/... * Captured 2 months ago Total 29,831 mementos in 17 years from 9 archives ■ 2004 2005 2006 2081 2009 2010 2811 2812 2813 2914 2815 2816 2817 carbon Date: The first record was found over 17 years ago (details) Composition of 33 resources from 4 archives over 3 years ··-· ,,.,......, ·--- ... l»at9.(IO -Composition Fixity (details) Root Verified Verified 18 Failed 5 Unconfirmed 10 · --..... 1•1 __ ,._._wc ...... l "'ll' l :i) ■ -t'W<'<-111~ 1111) Memento Damage: 0.128 (detal ls) Images 0.094 Stylesheets 0.021 Multimedia 0.000 JavaScript 0.000 !Frames 0.000 Text 0.013 Collected by Archive Team under ArchiveBot collection Original Request Headers Original Response Headers Hos t : www . example . com ... Cache-Control : max-age=604880 Accept : t ext/html, application/xhtr Connection: c l ose Accept- Encoding: gzi p, de f late Con t ent- Lengt h : 1270 ~~~=P~ : ~~~~u!~~~ .. ~~-~~,e~~~~~~~ ·- . ... ~~~~~n.t.=~YP?~ ~:~t~~~~l ... ~ . .- .- ........... 

A Survey of Archival Replay Banners

https://digitalcommons.odu.edu/cgi/viewcontent.cgi?article=1296&context=computerscience_fac_pubs

A Survey of Archival Replay Banners

Abstract

Similar works

Full text

Available Versions

Old Dominion University