►
From YouTube: Webpackage is Probably One of the Greatest Opportunities to Make the Web... - Vladimir de Turckheim
Description
Webpackage is Probably One of the Greatest Opportunities to Make the Web More Secure and Reliable - Vladimir de Turckheim, Datadog
Webpackage (not Webpack!) as a specification has been discussed for a few years. It evolved a lot but the end goal is still the same: providing packaging for web resources.
What does that mean? Does Webpackage have an impact on web security (spoiler alert! yes)? How can you leverage it today and for what benefits?
Watch this talk to answer these questions and much more.
A
A
I
know
this
title
is
too
long,
and
I
know
this
talk
is
not
about
webpack,
so
javascript
tool,
it's
about
web
package,
an
upcoming
specification
on
how
to
build
and
distribute
websites,
let's
deep
dive,
but
before
we
go
into
web
packages.
I
have
two
things
to
do.
First
of
all,
introduce
myself
I'm
vladimir
turkem,
I
joined
datadog
as
a
senior
software
engineer
earlier
this
year
with
the
acquisition
of
screen,
which
was
a
startup.
A
I've
been
working
at
for
five
years
screen
is
a
cyber
security,
absec
oriented
company
and
now
at
datadog,
I'm
technical
lead
of
the
absec
tracer
division,
I'm
also
an
core
collaborator
and
an
ogs
security
working
group.
Member
also,
you
can
reach
out
to
me
at
poldifet
on
twitter.
That's
probably
the
easiest
way
to
contact
me
and
my
dms
are
open.
A
Okay,
quick
disclaimer!
I
don't
work
on
the
web
package
specification
when
neither
for
any
organism
whenever
for
datadog.
The
content
of
this
talk
is
about
my
own
opinions
about
web
packages.
In
terms
of
security
and
I'm
not
involved
with
web
package
and
I'm
not
involved
with
web
package
in
the
scope
of
the
organization,
I
am
a
member
of
whether
this
is
no
js
or
datadog.
So
all
of
that
is
very
personal
and
I
am
the
sole
responsible
for
the
content
of
this
talk.
A
What
is
web
package,
and
still
it's
not
about
webpack
web
package-
is
actually
a
set
of
three
specs
that
define
how
to
bundle
a
web
application
in
a
single
file,
how
to
distribute
it
with
a
signature
and
how
to
load
it
with
a
signature
check.
So
basically,
it's
about
building
a
website
in
a
single
file,
signing
it
and
loading
it
in
a
browser
web
bundle.
A
Well,
it's
basically
a
single
bundle,
a
single
file
and
we'll
see
that
in
the
live
demo
which
can
contain
anything,
you
want
as
assets
in
a
web
application,
whether
that's
html
pages,
javascript
files,
images,
css
or
anything
else.
All
of
that
in
a
single
standardized
distributed
distributable
file,
you
can
distribute
a
full
web
application
with
that.
Okay,
let's
go
for
the
demo
and,
let's
hope
everything
goes
all
right.
So
on
my
screen,
you
should
be
able
to
see
a
terminal
I
haven't
cleared
out
properly.
A
We've
got
a
small
tic-tac-toe
application
that
basically
enables
you
to
play
tic-tac-toe
and
lose
against
yourself.
This
is
a
really
cool
app
and
I
found
it
directly
on
github
by
googling
vania
js
tic-tac-toe.
So
here
is
the
original
repo
I
took
it
from
so
the
question
is:
can
we
bundle
this
application
and
redistribute
it?
Hopefully?
Yes,
so
I
will
use
a
command
named
jane
bundle
and
I
will
provide
as
a
first
argument
directory
which
contains
the
source
of
our
web
application.
A
Then
I
will
say
that
I
want,
as
an
output,
site.web
bundle
and
I
need
to
provide
urls
based
urls
and
primary
urls
will
still
be
used
to
identify
the
resources.
So
here
I
say
that
my
base
url
is
localhost
port
3000,
so
I
bundle
it
and
here
it
tells
me
a
lot
of
things
that
it
has
bundled
it,
and
you
can
see
that
it
has
generated
urls
for
each
of
the
entries,
game.js
and
index.html
style.css.
A
So,
let's
open
that
with
our
explorer
and
open
a
new
window
here
and
drag
and
drop
the
website
to
chrome,
okay,
so,
as
you
can
see,
we've
got
the
wall
website
working
without
actually
loading
it
from
the
local
host.
I
don't
have
any
local
server
outside
of
the
one
from
my
ide,
and
this
has
been
loaded
only
through
the
web
bundle.
A
A
A
No
okay,
definitely
not
what
I
wanted
to
do.
So,
let's
keep
it
this
way.
Sorry
about
this
miss
you
have
first
version.
This
is
temporary
where
the
spec
is
under
building,
but
then
you've
got
details
about
manifest,
telling
the
base
url
and
then
for
multiple
urls
you've
got
a
url,
the
statue
code
and
the
actual
headers
to
use
when
serving
the
content.
A
This
means
that
we
can
actually
set
the
distribution
header
within
the
web.
Bundle.
There's
a
comment
for
that
and
when
your
website
will
be
loaded
in
the
browser,
these
headers
will
be
added
automatically
when
loaded
in
the
browser.
So
here
we've
got
our
main
entry
point
with
our
index
page
or
html
code.
A
A
So
if
you
ask
for
index
dot
html,
it
will
actually
answer
with
a
301
http
code
and
redirect
to
slash
that's
actually
really
cool.
You
can
even
have
complex
flows
like
redirections
within
a
web
bundle
and
the
last
phase.
We
have
is
the
style
file
so
to
get
there.
I
used
actually
the
tools
available
in
the
web
package.
Github
repo.
A
Which
are
called
gen
bundle
and
dump
pendle.
You
can
use
also
sign
bundle
to
sign
the
bundle
if
you've
got
an
https
certificate
available
to
sign
it.
That's
the
up-to-date
way
of
building
web
bundles.
Now
it's
a
go
command,
so
you
have
to
install
it
using
goget
and
you
have
to
install
go
on
your
machine.
A
There's
also
a
javascript
implementation
on
npm
named
wbn,
but
I
haven't
tested
it,
so
I
can't
recommend
it
right
now:
that's
you
to
test
it
okay,
so
we
have
seen
the
demo
and
that's
really
cool,
because
this
blender
you
can
distribute
offline.
If
you
want
to
give
this
bundle
to
someone
else
from
your
mobile
phone.
Well,
that's
as
easy
as
sharing
a
whatsapp
message
or
any
other
message.
Library
message:
service
provider,
you
use
the
headers
used
to
serve
the
apps
are
part
of
the
deliverable.
A
A
A
A
A
A
You
can
say:
hey
images
can
only
be
served
by
this
hostname
self
or
by
this
url.
This
domain,
like
imagehosting.com
or
you
can
say
that
javascript
code
cannot
be
loaded
unless
they
are
sent
from
your
current
domain
and
that's
actually
really
powerful,
because
it
prevents
people
from
saying
from
exploiting
some
kind
of
xss.
A
Also,
that's
what
you
use
to
enforce
trusted
types
trusted
types
are
not
well
known
yet,
but
they
are
one
of
the
most
excited,
exciting
evolution
of
the
frontend
web
security
in
term
of
xss
protection.
The
tldr
for
trustees
type
is
that
there
won't
be
any
eval
injections
that
can't
be
prevented
in
the
front
end
anymore.
A
That's
the
content
for
a
whole,
totally
different
talk,
and
I
encourage
you
to
check
a
talk
that
mike
samuels
gave
at
this
conference
two
years
ago.
It's
actually
really
really
really
exciting
a
bit
complex
to
handle,
but
so
exciting
and
both
of
them
origin,
integra,
origin,
definitions
in
csp,
interested
types
in
csp
are
actually
hard
to
handle
because
in
a
world
where
security
is
defined
by
headers.
Well,
these
headers
have
impact
on
what
assets
the
browser
can
load.
So,
if
you
say
hey,
I
allow
this
cdn
to
serve
javascript
code.
A
Well,
this
is
burnt.
This
is
set
by
the
cdn
level
by
the
person
that
handles
the
apache
or
the
nginx.
That
serves
your
website,
not
the
developer.
The
website
developers
know
where
to
load
the
assets
from
the
website.
Hoster
doesn't
so.
There
is
always
a
gap
here
by
bundling
that
into
the
web.
Bundle
by
having
that
part
of
the
deliverable.
A
Another
example
of
security,
header
x,
fram
options
enable
you
to
prevent
your
website
from
being
loaded
in
a
frame
and
avoid
click
jacking.
Once
again,
usually
security
editors
are
set
by
the
people
distributing
the
web
content,
cd
and
sysadmins,
and
not
by
developers.
In
that
case,
developers
can
have
the
control
about
the
security.
Headers
configuration
also
no
need
to
configure
all
cdns,
because
festival
is
a
way
to
configure
cloudflare
as
a
way
to
configure.
A
Then
you
can
have
things
to
signed
exchange,
a
way
to
provide
integrity
check
not
only
for
script
links.
You
can
have
real
resource
integrity
checks
for
the
wall,
application
and
that's
great,
if
you
don't
trust
your
cdns
or
the
delivery
chain,
like
the
isps
well,
you
are
sure
they
can't
tamper
with
the
web
content
anymore,
there's
also
opportunities
for
node.js
on
the
server
side.
A
A
A
The
other
thing
I
really
like
and
that's
an
opportunity
for
the
node.js
side
is
that.
Well,
we
have
a
real
concept
of
package
because,
right
now
we
don't
have
a
concept
of
packaging
node.js.
We
have
a
table
with
a
package.json
file,
but
how
do
you
define
the
package?
Is
it
something
that
relies
on
the
package.json?
A
A
A
I
everyone
is
asking
about
os
access
policies,
cisco
policies
and
there's
a
pr
for
that,
and
probably
I
mean
I
might
be
outdated,
but
you
can
do
stronger
things
by
relying
on
operating
system
features
for
that,
but
we
could
still
membrane
and
prevent
packages
from
accessing
certain
parts
of
the
code
by
package,
but
that
might
be
terrible
in
term
of
path,
because
I
will
still
need
a
bit
of
stack,
trace,
exploration,
introspection
and
I
haven't
tested
anything
so
don't
get
too
excited.
Even
dino
does
not
provide
this
feature.
A
A
I
am.
I
have
a
confession:
I
am
ambivalent.
Regarding
the
signature
part,
it
brings
cool
goodies,
but
it
can
break
ad
blockers.
But
signature
is
optional.
Probably
it's
okay!
Then
we
could
distribute
code
around
the
world
in
a
better
way.
With
web
package,
we
can
standardize
web
application
delivery.
A
It's
a
vendor
neutral
package
concept,
meaning
that
you
are
not
tied
to
the
configuration
of
a
single
cdn,
and
all
of
that
is
still
under
active
discussion.
So
if
you
have
strong
opinions,
now
is
the
right
time
to
probably
spam
some
people
who
should
not
be
named
in
this
talk,
because
I
don't
want
them
to
be
mad
at
me
thanks
so
much
for
your
attention.
Let's
keep
in
touch
once
again.