escaping the sandbox denver html5 2013-05-13

Escaping the SandboxEscaping the Sandbox

Michael MalakMichael Malak

technicaltidbit.comtechnicaltidbit.com

Cross-platformCross-platform

• Java (WORA)Java (WORA)• FlashFlash• SilverlightSilverlight

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 22

HTML5 for Desktop apps?HTML5 for Desktop apps?

• CanvasCanvas• WebGLWebGL• AudioAudio• VideoVideo• Local storageLocal storage• Session storageSession storage

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 33

The HTML 3.2 solutionThe HTML 3.2 solution

<input type="file" name="file1" size="40"><input type="file" name="file1" size="40">

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 44

Qt: Heavyweight Cross-PlatformQt: Heavyweight Cross-Platform

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 55

Mac

Linux

Windows

QtWebKitQtWebKit

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 66

Tiny subset of Qt (drop-down menus)

Single component: A full HTML5 QtWebKit

DemoDemo

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 77

Step by StepStep by Step1.1. Download and install Visual Studio 2010 C++Download and install Visual Studio 2010 C++

1.1. ““All-in-one”All-in-one”2.2. SP1SP1

2.2. Download and install Qt 4.8.4Download and install Qt 4.8.41.1. BuildBuild

3.3. Download and install Qt Creator 5.0Download and install Qt Creator 5.04.4. In Qt Creator 5.0:In Qt Creator 5.0:

1.1. Add Qt 4.8.4 as additional versionAdd Qt 4.8.4 as additional version2.2. Create new projectCreate new project

1.1. GUIGUI2.2. Utilizing Qt 4.8.4Utilizing Qt 4.8.43.3. Subclassing QWidgetSubclassing QWidget

3.3. Add “webkit” to project fileAdd “webkit” to project file4.4. Add boilerplate for drop-down menusAdd boilerplate for drop-down menus

1.1. mainwindow.hmainwindow.h2.2. mainwindow.cppmainwindow.cpp

5.5. Add HTML filesAdd HTML files1.1. Optional: Download your favorite Javascript frameworks & toolkits (e.g. YUI)Optional: Download your favorite Javascript frameworks & toolkits (e.g. YUI)

6.6. Set Debug directorySet Debug directory7.7. Add menu handler codeAdd menu handler code

1.1. mainwindow.hmainwindow.h2.2. mainwindow.cppmainwindow.cpp

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 88

1.1: Visual Studio 2010 C++1.1: Visual Studio 2010 C++

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 99

“All-in-One ISO”

1.1: Select Visual C++ 2010 Express1.1: Select Visual C++ 2010 Express

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1010

1.2: Install Visual Studio 2010 SP11.2: Install Visual Studio 2010 SP1

• Google “download vs2010 sp1 iso”Google “download vs2010 sp1 iso”• InstallInstall• Run Windows UpdatesRun Windows Updates

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1111

2.: Download Qt 4.8.42.: Download Qt 4.8.4

• Qt libraries 4.8.4 for Windows (VS 2010)Qt libraries 4.8.4 for Windows (VS 2010)

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1212

2.1: Build Qt 4.8.42.1: Build Qt 4.8.4

1.1. Start -> All Programs ->Start -> All Programs ->Microsoft Visual Studio 2010 Express -> Microsoft Visual Studio 2010 Express -> Visual Studio Command Prompt (2010)Visual Studio Command Prompt (2010)

2.2. cd \qt\4.8.4cd \qt\4.8.43.3. configureconfigure4.4. nmake (takes 3 hours)nmake (takes 3 hours)

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1313

3.: Install Qt Creator 5.03.: Install Qt Creator 5.0

• Qt 5.0.2 for Windows 32-bit (VS 2010)Qt 5.0.2 for Windows 32-bit (VS 2010)

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1414

4.1: Add Qt 4.8.4 as additional 4.1: Add Qt 4.8.4 as additional versionversion

• From the Qt Creator 5.0 drop-down menu:From the Qt Creator 5.0 drop-down menu:Tools->Options->Build & Run->Qt Versions->AddTools->Options->Build & Run->Qt Versions->Add

• C:\Qt\4.8.4\qmake\qmake.exeC:\Qt\4.8.4\qmake\qmake.exe

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1515

4.2.1: Create new GUI project4.2.1: Create new GUI project

• From the Qt Creator 5.0 drop-down menu:From the Qt Creator 5.0 drop-down menu:File->New File or Project->Applications->Qt Gui ApplicationFile->New File or Project->Applications->Qt Gui Application

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1616

4.2.2: Utilizing Qt 4.8.44.2.2: Utilizing Qt 4.8.4

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1717

Uncheck Qt 5.0.2Uncheck Qt 5.0.2

4.2.3: Subclass QWidget4.2.3: Subclass QWidget

• Base class: QwidgetBase class: Qwidget• Class name: MainWindowClass name: MainWindow

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1818

4.3: Add “webkit” to project file4.3: Add “webkit” to project file

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 1919

4.4.1: Add drop-down menus: 4.4.1: Add drop-down menus: mainwindow.hmainwindow.h

#ifndef MAINWINDOW_H#ifndef MAINWINDOW_H

#define MAINWINDOW_H#define MAINWINDOW_H

#include <QWidget>#include <QWidget>

#include <QVBoxLayout>#include <QVBoxLayout>

#include <QMenuBar>#include <QMenuBar>

#include <QtWebKit/QWebView>#include <QtWebKit/QWebView>

class MainWindow : public QWidgetclass MainWindow : public QWidget

{{

Q_OBJECTQ_OBJECT

public:public:

MainWindow(QWidget *parent = 0);MainWindow(QWidget *parent = 0);

~MainWindow();~MainWindow();

private:private:

QVBoxLayout m_layout;QVBoxLayout m_layout;

QMenuBar m_menuBar;QMenuBar m_menuBar;

QWebView m_webView;QWebView m_webView;

};};

#endif // MAINWINDOW_H#endif // MAINWINDOW_H

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2020

4.4.2: Add drop-down menus: 4.4.2: Add drop-down menus: mainwindow.cppmainwindow.cpp

#include <QtWebKit/QWebFrame>#include <QtWebKit/QWebFrame>

#include "mainwindow.h"#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent)MainWindow::MainWindow(QWidget *parent)

: QWidget(parent): QWidget(parent)

{{

m_layout.setMenuBar(&m_menuBar);m_layout.setMenuBar(&m_menuBar);

m_layout.addWidget(&m_webView);m_layout.addWidget(&m_webView);

setLayout(&m_layout);setLayout(&m_layout);

QMenu* menuFile = m_menuBar.addMenu("&File");QMenu* menuFile = m_menuBar.addMenu("&File");

m_webView.load(QUrl("test.html"));m_webView.load(QUrl("test.html"));

}}

MainWindow::~MainWindow()MainWindow::~MainWindow()

{{

}}

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2121

4.5: Add HTML files4.5: Add HTML files

• Right-click project tree root -> Add New -> Right-click project tree root -> Add New -> General -> Text File General -> Text File

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2222

4.5: Add HTML files4.5: Add HTML files

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2323

<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"/> <script src="yui/build/yui/yui-min.js"></script> <script src="test.js"></script></head><body>Denver HTML5 Meetup Qt Demo<div id="example" style="width:600px;height:400px" class="yui3-skin-sam"></div></body></html>

function loaddata(msg) { YUI().use('charts', function (Y) { var chart = new Y.Chart({ dataProvider: eval(msg), render: "#example" }); });}

test.html

test.js

4.5.1: Download Toolkits4.5.1: Download Toolkits

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2424

4.6: Set Debug Directory4.6: Set Debug Directory

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2525

4.7.1: Menu handler 4.7.1: Menu handler (mainwindow.h)(mainwindow.h)

#ifndef MAINWINDOW_H#ifndef MAINWINDOW_H

#define MAINWINDOW_H#define MAINWINDOW_H

#include <QWidget>#include <QWidget>

#include <QVBoxLayout>#include <QVBoxLayout>

#include <QMenuBar>#include <QMenuBar>

#include <QtWebKit/QWebView>#include <QtWebKit/QWebView>

class MainWindow : public QWidgetclass MainWindow : public QWidget

{{

Q_OBJECTQ_OBJECT

public:public:

MainWindow(QWidget *parent = 0);MainWindow(QWidget *parent = 0);

~MainWindow();~MainWindow();

private:private:

QVBoxLayout m_layout;QVBoxLayout m_layout;

QMenuBar m_menuBar;QMenuBar m_menuBar;

QWebView m_webView;QWebView m_webView;

private slots:private slots:

void openfile();void openfile();

};};

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2626

4.7.2 Menu handler 4.7.2 Menu handler (mainwindow.cpp)(mainwindow.cpp)

#include <QFile>#include <QFile>

#include <QFileDialog>#include <QFileDialog>

#include <QTextStream>#include <QTextStream>

#include <QtWebKit/QWebFrame>#include <QtWebKit/QWebFrame>

#include "mainwindow.h"#include "mainwindow.h"

MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {MainWindow::MainWindow(QWidget *parent) : QWidget(parent) {

m_layout.setMenuBar(&m_menuBar);m_layout.setMenuBar(&m_menuBar);

m_layout.addWidget(&m_webView);m_layout.addWidget(&m_webView);

setLayout(&m_layout);setLayout(&m_layout);

QMenu* menuFile = m_menuBar.addMenu("&File");QMenu* menuFile = m_menuBar.addMenu("&File");

connect(menuFile->addAction("&Open"), SIGNAL(triggered()), this, SLOT(openfile()));connect(menuFile->addAction("&Open"), SIGNAL(triggered()), this, SLOT(openfile()));

m_webView.load(QUrl("test.html"));m_webView.load(QUrl("test.html"));

}}

MainWindow::~MainWindow() {}MainWindow::~MainWindow() {}

void MainWindow::openfile() {void MainWindow::openfile() {

QFile file(QFileDialog(this).getOpenFileName());QFile file(QFileDialog(this).getOpenFileName());

if (file.open(QIODevice::ReadOnly | QIODevice::Text))if (file.open(QIODevice::ReadOnly | QIODevice::Text))

m_webView.page()->mainFrame()->evaluateJavaScript("loaddata('" +m_webView.page()->mainFrame()->evaluateJavaScript("loaddata('" +

QTextStream(&file).readAll().replace("\n"," ") + "');");QTextStream(&file).readAll().replace("\n"," ") + "');");

}}

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2727

Denver HTML5 May 14, 2013Denver HTML5 May 14, 2013 technicaltidbit.comtechnicaltidbit.com 2828

technicaltidbit.comtechnicaltidbit.com