[Bug]: Can't embed remote or local PDFs in iframes or webviews; crash when using custom protocol; can't print; crash when printing to PDF; demo provided.

[george-thomas-hill]

Preflight Checklist

• I have read the Contributing Guidelines for this project.
• I agree to follow the Code of Conduct that this project adheres to.
• I have searched the issue tracker for a bug report that matches the one I want to file, without success.

Electron Version

18.1.0

What operating system are you using?

Ubuntu

Operating System Version

Ubuntu 18.04 LTS

What arch are you using?

x64

Last Known Working Electron version

Unknown

Expected Behavior

I expect to be able to embed remote or local PDFs in iframes and webviews.

I also expect to be able to load and display local media files via custom protocols.

I expect to be able to print the contents of a BrowserWindow using webContents.print().

I expect to be able to print to PDF using webContents.printToPDF().

Actual Behavior

Using a fresh installation of Ubuntu 18.04 LTS, I used electron-forge to create a React-based Electron app.

This demo app is online here:

https://github.com/george-thomas-hill/electron-pdf-demo

An iframe showing a remote PNG file loads correctly.

An iframe attemping to load a local PNG file gives a white empty iframe in the browser and an error in the browser console when run in development mode; however, when run as a packaged application it displays correctly.

An iframe attempting to load a remote PDF gives a gray empty iframe in the browser and no error in the browser console.

An iframe attempting to load a local PDF gives a white empty iframe in the browser and an error in the browser console when run in development mode; however, when run as a packaged application, it gives a gray empty iframe.

An iframe attempting to load a remote PDF with sandbox on gives a white empty iframe in the browser and no error in the browser console.

An iframe attempting to load a local PDF with sandbox on gives a white empty iframe in the browser and an error in the browser console.

A webview showing a remote PNG file loads correctly.

A webview showing a local PNG file loads correctly.

A webview attempting to load a remote PDF gives a gray empty webview and no error in the browser console but an error in the system terminal.

A webview attempting to load a local PDF gives a gray empty webview and no error in the browser console nor any error in the system terminal.

An iframe attempting to load a local PNG via a custom protocol causes a crash.

An iframe attempting to load a local PDF via a custom protocol causes a crash.

A webview showing a local PNG via a custom protocol works correctly.

A webview attempting to load a local PDF via a custom protocol gives a gray empty webview and no error.

I attempted to print my BrowserWindow in order to capture a convenient record of my demo application's output.

However, webContents.print() didn't work, and webContents.printToPDF() caused a crash.

Details are in the demo application's main.js file.

For best results, please consider downloading and running the demo application hosted at the GitHub address given above.

However, I am including screenshots here:

Testcase Gist URL

No response

Additional Information

No response

[george-thomas-hill]

The following are existing issues that are likely related:

#33094

#28407

#32915

#33519

And here are related pull requests:

#33560

#33664

[vladimiry]

Also referencing #27121 (this hits me).

[george-thomas-hill]

Update:

I'm still finding (in Electron 21.2.0) that loading a PDF in an iFrame fails to display the PDF, and loading a PDF in a webview crashes Electron.

Here's an Electron Fiddle gist that demonstrates this:

https://gist.github.com/george-thomas-hill/c3179e6eddeb1a2715201a20dbf95015

[github-actions]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

[george-thomas-hill]

Bump.

I'm still finding (in Electron 22.0.2) that loading a PDF in an iFrame fails to display the PDF, and loading a PDF in a webview crashes Electron.

Here's an Electron Fiddle gist that demonstrates this:

https://gist.github.com/george-thomas-hill/c3179e6eddeb1a2715201a20dbf95015

[george-thomas-hill]

Update:

I'm still finding (in Electron 24.0.0) that loading a PDF in an iFrame fails to display the PDF, and loading a PDF in a webview crashes Electron.

Here's an Electron Fiddle gist that demonstrates this:

https://gist.github.com/george-thomas-hill/c3179e6eddeb1a2715201a20dbf95015

[thomasdao]

@george-thomas-hill I have the same issue with embedding PDF file from custom protocol. To work around this issue, I need to register the custom protocol as privileged and set standard to true, and the PDF file can be loaded successfully.

protocol.registerSchemesAsPrivileged([{scheme: 'customprotocol', privileges: {standard: true}}])

Note that per documentation, you need to call this before app ready event.

[george-thomas-hill]

@thomasdao Thank you for the tip! That worked for me!

[dhanson358]

Any idea if there is a way to make that fix also work for normal embedded PDFs? In this case I am loading one via https, so it's not a custom local protocol.

[thomasdao]

@dhanson358 I believe PDF file can be embedded from https normally.

[dhanson358]

@thomasdao I get the same behavior (grayed out box) when trying to access PDFs over https via a normal web application.

[george-thomas-hill]

@thomasdao Thank you for the tip that you gave a few weeks back.

It worked for me for a while.

However, right now, I find that I can use a webview and a custom protocol to display a PDF only in development mode.

When I build my app (using electron-builder) and go to display the PDF, I get a grayed-out box.

Are you having the same problem?

Or can anyone on this chain suggest a way to display PDFs in production mode?

I would be so very grateful for help with this problem.

@codebytere @nornagon @MarshallOfSound Please forgive me for name-dropping the three of you, but I see that you are frequent contributors to Electron, and I'm hoping that one of you can help address this problem.

I have tried many variations of the following code:

                    <webview
                        webpreferences={
                            "sandbox=yes, " +
                            "javascript=no, " +
                            "plugins=true"
                        }
                        src={useSrc}
                        ref={itemRef}
                        className="ff-fileViewer-itself"
                        plugins={"true"}
                    >
                    </webview>

That code works in development mode to display a PDF, but in my packaged app I get a gray box.

The only possible clue that I have is that, when it does work, I get the following warning in my console:

Warning: disabling flag --expose_wasm due to conflicting flags

However, that warning does not appear when I run my packaged app and try to display a PDF.

Thank you, everyone, for your time.

[george-thomas-hill]

I got local PDFs to load in production mode.

Here's a gist demonstrating one way to do it:

https://gist.github.com/george-thomas-hill/e46f4b875b091c8c9b42df29a8cd1805

I haven't tried printing.

Thank you, everyone, anyhow.

[vladimiry]

https://gist.github.com/george-thomas-hill/e46f4b875b091c8c9b42df29a8cd1805

There is no webview nor custom protocol in this gist, so the original issue might still be there.

[electron-issue-triage]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. If you have any new additional information—in particular, if this is still reproducible in the latest version of Electron or in the beta—please include it with your comment!

[electron-issue-triage]

This issue has been closed due to inactivity, and will not be monitored. If this is a bug and you can reproduce this issue on a supported version of Electron please open a new issue and include instructions for reproducing the issue.

[sascha-schieferdecker]

This bug still exists, can confirm it works in development mode if PDF ist served by HTTP via vite. If I package the app using a custom protocol the PDF is not displayed. CSP bypass does not help either.

[sascha-schieferdecker]

I found a workaround by creating a blob via axios, fetch doesn't work, complains about unsupported protocol "app://". I'm using vue3 with SFC, so here is my example:

 <script>
   import axios from 'axios';
   import { ref, onMounted } from 'vue'
   const api = axios.create({
      withCredentials: true,
   });

    const iframeurl = ref<string>('')
    
    onMounted(async () => {
      const { data: pdf } = await api.get('/manual/en.pdf', {responseType: 'blob'})
      iframeurl.value = URL.createObjectURL( new File([pdf], '/manual/en.pdf', {type: 'application/pdf', lastModified: Date.now()}))
    })
  </script>
  ....
  <template>
    <iframe :src="iframeurl" style="display:inline-flex; width:100%; height:880px" v-if="iframeurl"></iframe>
  </template>
`

Works in dev and packaged app.