Qt and the Web – Where Are We Today?

Total Page:16

File Type:pdf, Size:1020Kb

Qt and the Web – Where Are We Today? QT AND THE WEB Where are we today? Qt World Summit Berlin 2019 1 05.11.2019 About basysKom basysKom mbH About myse!" Is a Qt Service Partner since 2004 Development Lead @ basysKom Is located in Darmstadt and Nürnberg Is employing ~30 people Is part of t e UX Gr$ppe Provides services (consulting& training, coac ing and development' around Qt (oc$ses on tec nical)industrial applications of Qt %*+I and application development' 2 05.11.2019 $%trodu&t'o% The web 's %ow arou%d #0 years o!d Hyperte)t* HT+,* HTT-./0* web browser* web ser1er* .20 are om%'prese%t The web with 'ts 'mme%se su&cess3mass'" adopt'o% had a stro%4 '%flue%&e o% techno!o4y 6or a !ot o" use7cases web-techno!o4'es are the de"au!t # 05.11.2019 Is the web the Ho!y rai!? -roblems with web techno!o4'es Strongly fragmented ecosystem ,ots of c $rn (short/lived 0PIs, fashion/driven' 12ine is a special case ,imited use on (low/end' embedded hardware 4 System integration can be a mess 4 Performance issues 8 05.11.2019 It9s a web9s wor!d /o e1e% '% 2019 there are 4ood reaso%s to de1e!op %at'1e a((!'cat'o%s /t'!! a %at'1e "ramework has to pro1e 'tse!" &apable '% a ;web wor!d“ 5onsuming web services (Qt as a client' Providing web services (Qt as a server' 6endering web content wit Qt #etting Qt into t e browser 5 05.11.2019 QT AS A CLIENT = 05.11.2019 @se7>ases: Qt as a c!'ent Tas:A Th'%4s to &o%s'der Interface web/focused services Serialisation of API data 9ransport sec$rity Examples 0$t entication)a$t orization Upload)download of files Interacting 3it REST/ and/or :ebSoc;et/0PIs ? 05.11.2019 HTT-(s)-c!'ent QNetwor:A&&cessMa%a4er Dm!HttpReFuest 5== API JS/0PI t at can be used from Q+, Part of QtNet3or; +ostly analog to t e browser 0PI of t e same name 0 bit of an abstract name for a *ttpClient? ;-' 5an be used to pull data into a Q+,/only//foc$s Qt Q$ic; application 0PI can feel a bit dated w en coming from more modern async ronous environments 4 In Qt since 4@4 Both support //,3T,/ .1'a Cpe%//,0 B 05.11.2019 WebSo&:et7&!'ent WebSo&:ets GG bidirect'o%a! &o%%e&t'o% betwee% &!'e%t a%d ser1er 8nables t e server to p$sh events into t e client (browser' WebSo&:ets '% Qt Q:ebSoc;et provides a client Part of t e Q:ebSoc;ets module Provides a C== and Q+, API Supports T,S (3ss:/)' 9 05.11.2019 /erial'Hat'on/Deserial'Hat'o% I/CN D+, 9ypical format used on Web-0PIs 1ld/sc ool& but still around Supported t rough QJsonDocument and friends Part of Qt5ore Jar'ous opt'o%s '% Qt No JS1N-Sc ema support %t ere are add-ons t at wor; Q"+,StreamC6eaderD:riterE in Qt Core 3it QJsonDoc$ment t oug ' QDomDocument in Qt X+, Qt X+, Patterns for a validating parser 10 05.11.2019 Authent'&at'o%3AuthoriHat'o% >!'e%ts %eed to authe%t'cate themse!1es a4a'%st /upported '% Qt throu4h the (web) ser1'ces QNetworkAuthor'Hat'o% modu!e Ideally 3it out giving t e client t e username/password 10$t F, 2 Ideally 3it out giving t e client w olesales access Toke%7based authe%t'cat'o%3author'Hat'o% 11 05.11.2019 QT AS A SERVER 18 05.11.2019 @se7>ase: Qt as a ser1er Tas: Provide 6ES9 and/or WebSoc;et/0PIs wit Qt Examples Interfaces for test/automation *eadless Qt (Qt as a friendly)better C== to implement an embedded firm3are) Integration point for ot er applications (e.g. order import' Integration of legacy applications 15 05.11.2019 @se7>ase: Qt as a ser1er /o!ut'o%A QHtt(/er1erK /o!ut'o%A QWebSo&ket/er1er 0 Qt component t at as been missed by a lot of people Part of t e Qt WebSoc;et module 9 ere are q$ite a few Qt/ish *ttpServer projects on git ub, 0vailable since Qt J@4 none t at has critical mass is properly maintained 5=+ and Q+, bindings Now there 's a% ;oL&'a!< ta:e by The Qt Compa%y ttps:))code.qt.io)cgit)Gt/labs/Gt ttpserver.git) 5$rrently still a labs projectI #P, + commercial licensing 1= 05.11.2019 EENDERING WEB CONTENT WITH QT 1? 05.11.2019 @se7&ase: embedd'%4 web content Tas: /o!ut'o% 8Kisting web content needs to be rendered wit in a Q:ebEngine Qt application 4 8mbeddable bro3ser component based on 5 romium 8Kamples 4 QM, & 5== APIs 4 #eneric 3eb bro3ser 4 5ompleK API M enables compleK applications 4 :alled gardens 4 #ames Q:ebVie3 4 6eports 4 :raps a native bro3ser component on Android)i1S 4 1utput of aut oring tools t at produce 3eb content 4 (alls bac; to QWeb8ngine on ot er platforms 4 QM, only 4 Simple 0PI M ig level integration 1B 05.11.2019 @se7&ase: Web-HMI & Qt3>NN backend Tas: /o!ut'o% 0 miKed mode application w ere t e frontend is done Q:ebEngine to „ ostP t e HMI 3it web/tec nologies and t e bac;end 3it Qt)5== Q:ebC annel to enable access from browser/side JS to Deeper integration compared to a classic client)server Q1bjects scenario SeeB doc@Gt@io)Gt/J)G3ebc annel@ tml +otivation 4 Performance 4 ,egacy code %a;a@ Ovaluable business logicP' 19 05.11.2019 @se7&ases: embedded web browser Tas: :eb bro3ser for an embedded system ($ll/screen, no Window/+anager Not actually a „Qt applicationP, just taking advantage of t e pre-existing system integration wor; /o!ut'o%A Qt WebE%4'%e .a4a'%0 Ca1eats System/Integration can be tric;y ,arge component 6eGuires more powerful ardware %compared to Qt Q$ic;' 20 05.11.2019 GETTING QT INTO THE BRCWSEE 21 05.11.2019 @se7&ase: the browser as a remote d'splay Tas: /o!ut'o% O1A WebG, stream'%4 0n H+I/application t at is written in Qt should render 0 Qt QP0 t at is streaming webgl commands into a browser 4 myApp /platform 3ebgl 4 Device 3it out a display Qt Q$ic; only 4 6emote access to a device %3 ic as a display' #P, + Commercial licensing 6esol$tion independent ,atency is critical 1ne user at a time 8Kample: ttps:))333@Gt@io)bosc /built/3it /Gt 22 05.11.2019 @se7&ase: the browser as a remote d'splay /o!ut'o% O2A JN> NNC QP0 + :ebsoc;et/Proxy + NoNNC (JS/5lient' QWidget & Qt Q$ic; (3 en using t e sw/renderer' Is sending bitmaps 6esol$tion is fiKed! ,atency is critical 0lso one user at a time 2# 05.11.2019 @se7&ase: ru%%'%4 Qt i% the browser Tas: E)curs'o%A WebAssembly 0n application written in Qt needs to r$n inside Portable runtime %byte code, APIs) an unmodified web browser Implemented by all major browsers Not ing is to be installed Sec$rity wise t e r$ntime as t e same limitations as a reg$lar website E)am(!es *eadless devices In ouse soft3are distribution 28 05.11.2019 @se7&ase: ru%%'%4 Qt i% the browser /o!ut'o%A Qt "or WebAssembly Ee!at'1e!y !ar4e dow%!oads .P20+B "or a Qt Qu'&k a((!'&at'o%0 1Qcial platform wit Qt J@F3 333@Gt@io)Gt/examples-for/3ebassembly ,'%k t'me 's s!ow2 A((!'&at'o% %eeds to dea! w'th browser !'m'tat'o%s (ile access Net3or; access 25 05.11.2019 WEAP UP 2= 05.11.2019 Wrap u( 6our perspe&t'1es o% Qt a%d the web +ore? 5lient 0D,& S3agger& open0PI Server 9emplating& HT+, generation 6endering 5omplete :ebApplications in Qt> Qt in t e browser R >ome ta!k to us about your ;Qt a%d the web“ proQects Sou can find us at t e basysKom boot 2? 05.11.2019 QUE/TION/ 6ran: +eer:Rtter Development ,ead fran;@meer;oetter-basyskom@com 2B.
Recommended publications
  • Differential Fuzzing the Webassembly
    Master’s Programme in Security and Cloud Computing Differential Fuzzing the WebAssembly Master’s Thesis Gilang Mentari Hamidy MASTER’S THESIS Aalto University - EURECOM MASTER’STHESIS 2020 Differential Fuzzing the WebAssembly Fuzzing Différentiel le WebAssembly Gilang Mentari Hamidy This thesis is a public document and does not contain any confidential information. Cette thèse est un document public et ne contient aucun information confidentielle. Thesis submitted in partial fulfillment of the requirements for the degree of Master of Science in Technology. Antibes, 27 July 2020 Supervisor: Prof. Davide Balzarotti, EURECOM Co-Supervisor: Prof. Jan-Erik Ekberg, Aalto University Copyright © 2020 Gilang Mentari Hamidy Aalto University - School of Science EURECOM Master’s Programme in Security and Cloud Computing Abstract Author Gilang Mentari Hamidy Title Differential Fuzzing the WebAssembly School School of Science Degree programme Master of Science Major Security and Cloud Computing (SECCLO) Code SCI3084 Supervisor Prof. Davide Balzarotti, EURECOM Prof. Jan-Erik Ekberg, Aalto University Level Master’s thesis Date 27 July 2020 Pages 133 Language English Abstract WebAssembly, colloquially known as Wasm, is a specification for an intermediate representation that is suitable for the web environment, particularly in the client-side. It provides a machine abstraction and hardware-agnostic instruction sets, where a high-level programming language can target the compilation to the Wasm instead of specific hardware architecture. The JavaScript engine implements the Wasm specification and recompiles the Wasm instruction to the target machine instruction where the program is executed. Technically, Wasm is similar to a popular virtual machine bytecode, such as Java Virtual Machine (JVM) or Microsoft Intermediate Language (MSIL).
    [Show full text]
  • XML a New Web Site Architecture
    XML A New Web Site Architecture Jim Costello Derek Werthmuller Darshana Apte Center for Technology in Government University at Albany, SUNY 1535 Western Avenue Albany, NY 12203 Phone: (518) 442-3892 Fax: (518) 442-3886 E-mail: [email protected] http://www.ctg.albany.edu September 2002 © 2002 Center for Technology in Government The Center grants permission to reprint this document provided this cover page is included. Table of Contents XML: A New Web Site Architecture .......................................................................................................................... 1 A Better Way? ......................................................................................................................................................... 1 Defining the Problem.............................................................................................................................................. 1 Partial Solutions ...................................................................................................................................................... 2 Addressing the Root Problems .............................................................................................................................. 2 Figure 1. Sample XML file (all code simplified for example) ...................................................................... 4 Figure 2. Sample XSL File (all code simplified for example) ....................................................................... 6 Figure 3. Formatted Page Produced
    [Show full text]
  • Document Object Model
    Document Object Model DOM DOM is a programming interface that provides a way for the values and structure of an XML document to be accessed and manipulated. Tasks that can be performed with DOM . Navigate an XML document's structure, which is a tree stored in memory. Report the information found at the nodes of the XML tree. Add, delete, or modify elements in the XML document. DOM represents each node of the XML tree as an object with properties and behavior for processing the XML. The root of the tree is a Document object. Its children represent the entire XML document except the xml declaration. On the next page we consider a small XML document with comments, a processing instruction, a CDATA section, entity references, and a DOCTYPE declaration, in addition to its element tree. It is valid with respect to a DTD, named root.dtd. <!ELEMENT root (child*)> <!ELEMENT child (name)> <!ELEMENT name (#PCDATA)> <!ATTLIST child position NMTOKEN #REQUIRED> <!ENTITY last1 "Dover"> <!ENTITY last2 "Reckonwith"> Document Object Model Copyright 2005 by Ken Slonneger 1 Example: root.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE root SYSTEM "root.dtd"> <!-- root.xml --> <?DomParse usage="java DomParse root.xml"?> <root> <child position="first"> <name>Eileen &last1;</name> </child> <child position="second"> <name><![CDATA[<<<Amanda>>>]]> &last2;</name> </child> <!-- Could be more children later. --> </root> DOM imagines that this XML information has a document root with four children: 1. A DOCTYPE declaration. 2. A comment. 3. A processing instruction, whose target is DomParse. 4. The root element of the document. The second comment is a child of the root element.
    [Show full text]
  • Extensible Markup Language (XML) and Its Role in Supporting the Global Justice XML Data Model
    Extensible Markup Language (XML) and Its Role in Supporting the Global Justice XML Data Model Extensible Markup Language, or "XML," is a computer programming language designed to transmit both data and the meaning of the data. XML accomplishes this by being a markup language, a mechanism that identifies different structures within a document. Structured information contains both content (such as words, pictures, or video) and an indication of what role content plays, or its meaning. XML identifies different structures by assigning data "tags" to define both the name of a data element and the format of the data within that element. Elements are combined to form objects. An XML specification defines a standard way to add markup language to documents, identifying the embedded structures in a consistent way. By applying a consistent identification structure, data can be shared between different systems, up and down the levels of agencies, across the nation, and around the world, with the ease of using the Internet. In other words, XML lays the technological foundation that supports interoperability. XML also allows structured relationships to be defined. The ability to represent objects and their relationships is key to creating a fully beneficial justice information sharing tool. A simple example can be used to illustrate this point: A "person" object may contain elements like physical descriptors (e.g., eye and hair color, height, weight), biometric data (e.g., DNA, fingerprints), and social descriptors (e.g., marital status, occupation). A "vehicle" object would also contain many elements (such as description, registration, and/or lien-holder). The relationship between these two objects—person and vehicle— presents an interesting challenge that XML can address.
    [Show full text]
  • Seamless Offloading of Web App Computations from Mobile Device to Edge Clouds Via HTML5 Web Worker Migration
    Seamless Offloading of Web App Computations From Mobile Device to Edge Clouds via HTML5 Web Worker Migration Hyuk Jin Jeong Seoul National University SoCC 2019 Virtual Machine & Optimization Laboratory Department of Electrical and Computer Engineering Seoul National University Computation Offloading Mobile clients have limited hardware resources Require computation offloading to servers E.g., cloud gaming or cloud ML services for mobile Traditional cloud servers are located far from clients Suffer from high latency 60~70 ms (RTT from our lab to the closest Google Cloud DC) Latency<50 ms is preferred for time-critical games Cloud data center End device [Kjetil Raaen, NIK 2014] 2 Virtual Machine & Optimization Laboratory Edge Cloud Edge servers are located at the edge of the network Provide ultra low (~a few ms) latency Central Clouds Mobile WiFi APs Small cells Edge Device Cloud Clouds What if a user moves? 3 Virtual Machine & Optimization Laboratory A Major Issue: User Mobility How to seamlessly provide a service when a user moves to a different server? Resume the service at the new server What if execution state (e.g., game data) remains on the previous server? This is a challenging problem Edge computing community has struggled to solve it • VM Handoff [Ha et al. SEC’ 17], Container Migration [Lele Ma et al. SEC’ 17], Serverless Edge Computing [Claudio Cicconetti et al. PerCom’ 19] We propose a new approach for web apps based on app migration techniques 4 Virtual Machine & Optimization Laboratory Outline Motivation Proposed system WebAssembly
    [Show full text]
  • An XML Model of CSS3 As an XƎL ATEX-TEXML-HTML5 Stylesheet
    An XML model of CSS3 as an XƎLATEX-TEXML-HTML5 stylesheet language S. Sankar, S. Mahalakshmi and L. Ganesh TNQ Books and Journals Chennai Abstract HTML5[1] and CSS3[2] are popular languages of choice for Web development. However, HTML and CSS are prone to errors and difficult to port, so we propose an XML version of CSS that can be used as a standard for creating stylesheets and tem- plates across different platforms and pagination systems. XƎLATEX[3] and TEXML[4] are some examples of XML that are close in spirit to TEX that can benefit from such an approach. Modern TEX systems like XƎTEX and LuaTEX[5] use simplified fontspec macros to create stylesheets and templates. We use XSLT to create mappings from this XML-stylesheet language to fontspec-based TEX templates and also to CSS3. We also provide user-friendly interfaces for the creation of such an XML stylesheet. Style pattern comparison with Open Office and CSS Now a days, most of the modern applications have implemented an XML package format that includes an XML implementation of stylesheet: InDesign has its own IDML[6] (InDesign Markup Language) XML package format and MS Word has its own OOXML[7] format, which is another ISO standard format. As they say ironically, the nice thing about standards is that there are plenty of them to choose from. However, instead of creating one more non-standard format, we will be looking to see how we can operate closely with current standards. Below is a sample code derived from OpenOffice document format: <style:style style:name=”Heading_20_1” style:display-name=”Heading
    [Show full text]
  • An Introduction to AJAX
    An Introduction to AJAX By : I. Moamin Abughazaleh Page 2 /25 How HTTP works? Classical HTTP Process 1. The visitor requests a page Page 3 /25 2. The server send the entire HTML, CSS and Javascript code at once to the client 3. So, the communication is synchronious Page 4 /25 What is Javascript programming actually? What is Javascript programming? It is programming the browsers. So, we are limited to the objects that the Page 5 /25 browser presents us An Alternative for Managing requests - AJAX AJAX stands for Asynchronous JavaScript And XML. AJAX is based on XMLHttpRequest object of Page 6 /25 Javascript - so the browser and XMLHttpRequest is a standard http://www.w3.org/TR/XMLHttpRequest/ It was introduced with IE-5.0 as an ActiveX object (1999) Later all the major browsers added XMLHttpRequest into their object bases. AJAX = Asynchronous JavaScript and XML It is a technique for creating better, faster, and more interactive web applications With XMLHttpRequest object JavaScript can trade data with a web server, without reloading Page 7 /25 the page AJAX uses “asynchronous data transfer” => allowing web pages to request small bits of information from the server instead of whole pages We can create desktop application like web applications using AJAX, this paradigm is also called “WEB 2.0” programming AJAX - Based on Web Standards AJAX is based on the following web standards: XHTML and CSS Presentation DOM Dynamic display of and interaction with data XML and XSLT Tranfering data back and forth Page 8 /25 XMLHttpRequest Asynchronous transfer of data Javascript Bring these technologies together AJAX applications are browser and platform independent The XMLHttpRequest object is supported in Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 / Firefox, Opera 8+, and Netscape 7.
    [Show full text]
  • Webassembly a New World of Native Exploits on the Web Agenda
    WebAssembly A New World Of Native Exploits On The Web Agenda • Introduction • The WebAssembly Platform • Emscripten • Possible Exploit Scenarios • Conclusion Wasm: What is it good for? ● Archive.org web emulators ● Image/processing ● Video Games ● 3D Modeling ● Cryptography Libraries ● Desktop Application Ports Wasm: Crazy Incoming ● Browsix, jslinux ● Runtime.js (Node), Nebulet ● Cervus ● eWASM Java Applet Joke Slide ● Sandboxed ● Virtual Machine, runs its own instruction set ● Runs in your browser ● Write once, run anywhere ● In the future, will be embedded in other targets What Is WebAssembly? ● A relatively small set of low-level instructions ○ Instructions are executed by browsers ● Native code can be compiled into WebAssembly ○ Allows web developers to take their native C/C++ code to the browser ■ Or Rust, or Go, or anything else that can compile to Wasm ○ Improved Performance Over JavaScript ● Already widely supported in the latest versions of all major browsers ○ Not limited to running in browsers, Wasm could be anywhere Wasm: A Stack Machine Text Format Example Linear Memory Model Subtitle Function Pointers Wasm in the Browser ● Wasm doesn’t have access to memory, DOM, etc. ● Wasm functions can be exported to be callable from JS ● JS functions can be imported into Wasm ● Wasm’s linear memory is a JS resizable ArrayBuffer ● Memory can be shared across instances of Wasm ● Tables are accessible via JS, or can be shared to other instances of Wasm Demo: Wasm in a nutshell Emscripten ● Emscripten is an SDK that compiles C/C++ into .wasm binaries ● LLVM/Clang derivative ● Includes built-in C libraries, etc. ● Also produces JS and HTML code to allow easy integration into a site.
    [Show full text]
  • Superoptimization of Webassembly Bytecode
    Superoptimization of WebAssembly Bytecode Javier Cabrera Arteaga Shrinish Donde Jian Gu Orestis Floros [email protected] [email protected] [email protected] [email protected] Lucas Satabin Benoit Baudry Martin Monperrus [email protected] [email protected] [email protected] ABSTRACT 2 BACKGROUND Motivated by the fast adoption of WebAssembly, we propose the 2.1 WebAssembly first functional pipeline to support the superoptimization of Web- WebAssembly is a binary instruction format for a stack-based vir- Assembly bytecode. Our pipeline works over LLVM and Souper. tual machine [17]. As described in the WebAssembly Core Specifica- We evaluate our superoptimization pipeline with 12 programs from tion [7], WebAssembly is a portable, low-level code format designed the Rosetta code project. Our pipeline improves the code section for efficient execution and compact representation. WebAssembly size of 8 out of 12 programs. We discuss the challenges faced in has been first announced publicly in 2015. Since 2017, it has been superoptimization of WebAssembly with two case studies. implemented by four major web browsers (Chrome, Edge, Firefox, and Safari). A paper by Haas et al. [11] formalizes the language and 1 INTRODUCTION its type system, and explains the design rationale. The main goal of WebAssembly is to enable high performance After HTML, CSS, and JavaScript, WebAssembly (WASM) has be- applications on the web. WebAssembly can run as a standalone VM come the fourth standard language for web development [7]. This or in other environments such as Arduino [10]. It is independent new language has been designed to be fast, platform-independent, of any specific hardware or languages and can be compiled for and experiments have shown that WebAssembly can have an over- modern architectures or devices, from a wide variety of high-level head as low as 10% compared to native code [11].
    [Show full text]
  • HTML5 Websocket Protocol and Its Application to Distributed Computing
    CRANFIELD UNIVERSITY Gabriel L. Muller HTML5 WebSocket protocol and its application to distributed computing SCHOOL OF ENGINEERING Computational Software Techniques in Engineering MSc arXiv:1409.3367v1 [cs.DC] 11 Sep 2014 Academic Year: 2013 - 2014 Supervisor: Mark Stillwell September 2014 CRANFIELD UNIVERSITY SCHOOL OF ENGINEERING Computational Software Techniques in Engineering MSc Academic Year: 2013 - 2014 Gabriel L. Muller HTML5 WebSocket protocol and its application to distributed computing Supervisor: Mark Stillwell September 2014 This thesis is submitted in partial fulfilment of the requirements for the degree of Master of Science © Cranfield University, 2014. All rights reserved. No part of this publication may be reproduced without the written permission of the copyright owner. Declaration of Authorship I, Gabriel L. Muller, declare that this thesis titled, HTML5 WebSocket protocol and its application to distributed computing and the work presented in it are my own. I confirm that: This work was done wholly or mainly while in candidature for a research degree at this University. Where any part of this thesis has previously been submitted for a degree or any other qualification at this University or any other institution, this has been clearly stated. Where I have consulted the published work of others, this is always clearly attributed. Where I have quoted from the work of others, the source is always given. With the exception of such quotations, this thesis is entirely my own work. I have acknowledged all main sources of help. Where the thesis is based on work done by myself jointly with others, I have made clear exactly what was done by others and what I have contributed myself.
    [Show full text]
  • Progressive Imagery with Scalable Vector Graphics -..:: VCG Rostock
    Progressive imagery with scalable vector graphics Georg Fuchsa, Heidrun Schumanna, and Ren´eRosenbaumb aUniversity of Rostock, Institute for Computer Science, 18051 Rostock, Germany; bUC Davis, Institute of Data Analysis & Visualization, Davis, CA 95616 U.S.A. ABSTRACT Vector graphics can be scaled without loss of quality, making them suitable for mobile image communication where a given graphics must be typically represented in high quality for a wide range of screen resolutions. One problem is that file size increases rapidly as content becomes more detailed, which can reduce response times and efficiency in mobile settings. Analog issues for large raster imagery have been overcome using progressive refinement schemes. Similar ideas have already been applied to vector graphics, but an implementation that is compliant to a major and widely adopted standard is still missing. In this publication we show how to provide progressive refinement schemes based on the extendable Scalable Vector Graphics (SVG) standard. We propose two strategies: decomposition of the original SVG and incremental transmission using (1) several linked files and (2) element-wise streaming of a single file. The publication discusses how both strategies are employed in mobile image communication scenarios where the user can interactively define RoIs for prioritized image communication, and reports initial results we obtained from a prototypically implemented client/server setup. Keywords: Progression, Progressive refinement, Scalable Vector Graphics, SVG, Mobile image communication 1. INTRODUCTION Vector graphics use graphic primitives such as points, lines, curves, and polygons to represent image contents. As those primitives are defined by means of geometric coordinates that are independent of actual pixel resolutions, vector graphics can be scaled without loss of quality.
    [Show full text]
  • SVG Exploiting Browsers Without Image Parsing Bugs
    SVG Exploiting Browsers without Image Parsing Bugs Rennie deGraaf iSEC Partners 07 August 2014 Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 1 / 55 Outline 1 A brief introduction to SVG What is SVG? Using SVG with HTML SVG features 2 Attacking SVG Attack surface Security model Security model violations 3 Content Security Policy A brief introduction CSP Violations 4 Conclusion Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 2 / 55 A brief introduction to SVG What is SVG? What is SVG? Scalable Vector Graphics XML-based W3C (http://www.w3.org/TR/SVG/) Development started in 1999 Current version is 1.1, published in 2011 Version 2.0 is in development First browser with native support was Konqueror in 2004; IE was the last major browser to add native SVG support (in 2011) Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 3 / 55 A brief introduction to SVG What is SVG? A simple example Source code <? xml v e r s i o n = ” 1 . 0 ” encoding = ”UTF-8” standalone = ” no ” ? > <svg xmlns = ” h t t p : // www. w3 . org / 2 0 0 0 / svg ” width = ” 68 ” h e i g h t = ” 68 ” viewBox = ”-34 -34 68 68 ” v e r s i o n = ” 1 . 1 ” > < c i r c l e cx = ” 0 ” cy = ” 0 ” r = ” 24 ” f i l l = ”#c8c8c8 ” / > < / svg > Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 4 / 55 A brief introduction to SVG What is SVG? A simple example As rendered Rennie deGraaf (iSEC Partners) SVG Security BH USA 2014 5 / 55 A brief introduction to SVG What is SVG? A simple example I am not an artist.
    [Show full text]