Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WebTorrent: Support rendering images, PDFs, more media formats, and text-like files #3053

Merged
merged 1 commit into from
Jul 31, 2019

Conversation

feross
Copy link
Contributor

@feross feross commented Jul 31, 2019

Fixes: brave/brave-browser#5326

Previously, images and PDFs would not render at all. Other formats would render in a very tiny iframe which was unusable. Unsupported formats would render as gibberish text.

Now, we properly support images, centered, with a black background behind them, just like for audio and video.

For PDFs, we use the native built-in PDF viewer and render at 100% width and height.

For text-like files, we render them in a full-screen iframe with the default white page background.

For audio, we now support FLAC, M4B, M4P, and OGA formats. The browser still has to support the specific codec used within the file, but we'll render an tag and at least attempt to play it.

Submitter Checklist:

Test Plan:

  1. Visit this URL: https://ia800301.us.archive.org/14/items/art_of_war_librivox/art_of_war_librivox_archive.torrent
  2. Start the torrent download
  3. Click on file 1 "ArtOfWar-64kb_librivox.m4b" and confirm that the audio file plays.
  4. Click on file 2 "Art_War_1107.jpg" and confirm that an image shows up.
  5. Click on file 3 "Art_War_1107.pdf" and confirm that the PDF viewer loads with a PDF inside.
  6. Click on file 11 "art_of_war_01-02_sun_tzu.ogg" and confirm that the audio file plays.
  7. Click on file 12 "art_of_war_01-02_sun_tzu.png" and confirm that the image shows up.

Reviewer Checklist:

  • New files have MPL-2.0 license header.
  • Request a security/privacy review as needed.
  • Adequate test coverage exists to prevent regressions
  • Verify test plan is specified in PR before merging to source

After-merge Checklist:

  • The associated issue milestone is set to the smallest version that the
    changes has landed on.
  • All relevant documentation has been updated.

@feross feross added security feature/webtorrent Label for webtorrent related issues labels Jul 31, 2019
@feross feross added this to the 0.70.x - Nightly milestone Jul 31, 2019
@feross feross self-assigned this Jul 31, 2019
…ext-like files

Fixes: brave/brave-browser#5326

Previously, images and PDFs would not render at all. Other formats would render in a very tiny iframe which was unusable. Unsupported formats would render as gibberish text.

Now, we properly support images, centered, with a black background behind them, just like for audio and video.

For PDFs, we use the native built-in PDF viewer and render at 100% width and height.

For text-like files, we render them in a full-screen iframe with the default white page background.

For audio, we now support FLAC, M4B, M4P, and OGA formats. The browser still has to support the specific codec used within the file, but we'll render an <audio> tag and at least attempt to play it.
@@ -30,7 +30,7 @@ export const createServer = (torrent: WebTorrent.Torrent, cb: (serverURL: string
origin: window.location.origin,
// Use hostname option to mitigate DNS rebinding
// Ref: https://github.com/brave/browser-laptop/issues/12616
hostname: 'localhost'
hostname: '127.0.0.1'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Now that the hostname option is being enforced properly, we need to change this to 127.0.0.1 so it matches the way that we refer to the files in the download links and <video>, <audio>, <iframe>, etc. src= urls.


const SUPPORTED_PDF_EXTENSIONS = [
'pdf'
]
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PDFs are no longer displayed in an iframe, so we break them into their own type.

)
} else if (fileIsType(file, 'pdf')) {
content = (
<object id='object' type='application/pdf' data={fileURL} />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PDFs use the <object> tag so that we can use the browser's built-in PDF viewer.

)
} else {
content = (
<div>Unsupported file type</div>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We no longer attempt to render files not explicitly included in the list above. This prevents non-ascii files from rendering as text and showing up as gibberish.

@@ -20,6 +20,6 @@
"listen": "*:*"
}
},
"content_security_policy": "default-src 'self'; connect-src 'self' http: https:; font-src 'self' data:; script-src 'self'; media-src 'self' http://127.0.0.1:*; form-action 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; frame-src 'self' http://127.0.0.1:*;",
"content_security_policy": "default-src 'self'; connect-src 'self' http: https:; font-src 'self' data:; script-src 'self'; media-src 'self' http://127.0.0.1:*; form-action 'none'; style-src 'self' 'unsafe-inline'; img-src 'self' data: http://127.0.0.1:*; object-src 'self' http://127.0.0.1:*; frame-src 'self' http://127.0.0.1:*;",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Two changes here:

  • Images need to load from http://127.0.0.1:*
  • We allow use of the object tag , loading from 'self' and http://127.0.0.1:*

@diracdeltas
Copy link
Member

defer to @yrliou for review but these changes look reasonable security-wise

@feross
Copy link
Contributor Author

feross commented Jul 31, 2019

Thanks for the review, @diracdeltas!

Copy link
Member

@yrliou yrliou left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@yrliou yrliou merged commit 9b41325 into master Jul 31, 2019
@yrliou yrliou deleted the webtorrent-render branch July 31, 2019 03:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature/webtorrent Label for webtorrent related issues security
Projects
None yet
Development

Successfully merging this pull request may close these issues.

WebTorrent: Certain file types do not render correctly
3 participants