Upgrade to Pro — share decks privately, control downloads, hide ads and more …

webbundle_study

Jxck
December 12, 2019

 webbundle_study

format/spec discussion about WebBundles
at #webbundle_study https://web-study.connpass.com/event/155002/

Jxck

December 12, 2019
Tweet

More Decks by Jxck

Other Decks in Technology

Transcript

  1. #webbundle_study
    #webbundle_study 2019/12/12 Jxck

    View Slide

  2. WebPackaging Spec
    ● SXG (was Signing)
    ● WebBundles (was Bundling)
    ● Loading
    2

    View Slide

  3. draft-yasskin-wpack-bundled-exchanges-02
    3

    View Slide

  4. Web Bundles Spec
    4
    ● Yes: How parser work
    ● No: How encoder produce bundle

    View Slide

  5. 5
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    All you need is CBOR encoder/decoder

    View Slide

  6. 6
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [* any ],
    length: bytes .size 8
    ]
    magic number via emoji in UTF8
    webbundle file start with cbor array header(length 6) + magic
    so first 10 byte is below
    [0x86, 0x48, 0xF0, 0x9F, 0x8C, 0x90, 0xF0, 0x9F, 0x93, 0xA6]
    (if array length changes with adding more element to cbor array in the future.
    first 10 byte will change, before you reach to version number.)

    View Slide

  7. 7
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [* any ],
    length: bytes .size 8
    ]
    cbor version
    "1" is in this spec, chrome uses "b1" for beta.

    View Slide

  8. 8
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [* any ],
    length: bytes .size 8
    ]
    URL for this content.
    if parse errors, this will use as fallback url.

    View Slide

  9. 9
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [* any ],
    length: bytes .size 8
    ]
    index for section, enables direct access to section.
    ["index", 100, // 0- 99
    "responses", 200, // 100-199
    "manifest", 300, // 200-299
    "signatures", 400, // 300-399
    "critical", 500] // 400-499

    View Slide

  10. 10
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Index Section
    index for response section. URL => [variation, offset, length]
    {
    "http://example.com/index.html": [["ja"], 1, 100], // for Accept-Encoding: ja
    "http://example.com/index.html": [["en"], 101, 100], // for Accept-Encoding: en
    "http://example.com/style.css": [[ ], 201, 100],
    "http://example.com/script.js": [[ ], 301, 100],
    "http://example.com/favicon.ico": [[ ], 401, 100],
    }
    variation: based on Content-Language, Content-Encoding(?),

    View Slide

  11. 11
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Responses Section
    [
    [
    HTTP Header (Cbor Map)
    HTTP Body (Cbor Byte string)
    ],
    [
    HTTP Header (Cbor Map)
    HTTP Body (Cbor Byte string)
    ]
    ...
    ]

    View Slide

  12. 12
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Manifest Section
    manifest = manifest-url

    View Slide

  13. 13
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Signature Section
    signatures = [
    authorities: [*authority],
    vouched-subsets: [*{
    authority: index-in-authorities,
    sig: bstr,
    signed: bstr ; Expected to hold a signed-subset item.
    }],
    ]
    // Reject all signatures by an RSA public key.

    View Slide

  14. 14
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Critical Section
    > The "critical" section lists sections of the bundle that the client needs to understand
    in order to load the bundle correctly
    ???

    View Slide

  15. 15
    Top Level Structure
    ; CBOR Array
    webbundle = [
    magic: h'', ; UTF-8
    version: bytes .size 4,
    primary-url: whatwg-url,
    section-lengths:bytes.cbor
    [*(section-name:tstr,length:uint)],
    sections: [*(index|manifest|signatures|critical|responses)],
    length: bytes .size 8
    ]
    Length
    length of webbundle
    in self extracting executables (like ASAR in Electron), pointer in tail works fine.
    because of concatnating
    $ cat runtime webpackage > extracting_bin
    $ cat extracting_bin other_webpackage
    https://github.com/WICG/webpackage/issues/20

    View Slide

  16. overview
    ● format via cbor
    ● has index for direct access
    ● can contain
    ○ index
    ○ response
    ○ signature
    ○ manifest (url)
    ○ etc
    16

    View Slide

  17. Serve Webbundle
    ● Via HTTP
    ○ Content-Type: application/webbundle
    ○ X-Content-Type-Options: nosniff
    ● Vai other
    ○ USB
    ○ AirDrop
    ○ WebShare
    ○ etc
    17

    View Slide

  18. how it works
    18

    View Slide

  19. 19
    Q: 1 Magic String & File detection
    webbundle = [
    magic
    version // 1
    primary-url
    section-lengths
    sections
    length
    ]
    head = read_first_10_byte(path)
    if (head == [86 48 F0 9F 8C 90 F0 9F 93 A6]) {
    // this is web bundle
    switch (parse_cbor(path)['version']) {
    // version switch
    }
    } else {
    // this is not web bundle
    }

    View Slide

  20. 20
    Q: 1 Magic String & File detection
    webbundle = [
    magic
    version // 2
    primary-url
    section-lengths
    sections
    extension // new
    length
    ]
    head = read_first_10_byte(path)
    if (head == [86 48 F0 9F 8C 90 F0 9F 93 A6]) {
    // this is web bundle
    switch (parse_cbor(path)['version']) {
    // version switch
    }
    } else if (head == [87 48 F0 9F 8C 90 F0 9F 93 A6]
    // this is also new web bundle
    switch (parse_cbor(path)['version']) {
    // version switch
    }
    } else {
    // this is not web bundle
    }

    View Slide

  21. 21
    Q: 1 Magic String & File detection
    // current
    webbundle = [
    magic
    version
    primary-url
    section-lengths
    sections
    length
    ]
    // seems better ?
    webbundle = [
    magic
    body = [
    version
    primary-url
    section-lengths
    sections
    ]
    length
    ]
    // first 10 byte always starts in any version
    // “83 48 F0 9F 8C 90 F0 9F 93 A6”
    https://github.com/WICG/webpackage/issues/528

    View Slide

  22. 22
    Q: 2 Length at end
    // current
    webbundle = [
    magic
    version
    primary-url
    section-lengths
    sections
    length
    ]
    move length at last really works?
    https://github.com/WICG/webpackage/issues/20#issuecomment-564370002

    View Slide

  23. 23
    Related
    ● Web Bundles
    ○ https://wicg.github.io/webpackage/draft-yasskin-wpack-bundled-exchan
    ges.html

    View Slide

  24. Jack

    View Slide