Native PDF plugin does not support custom protocol

[lishid]

When using a custom protocol to render my-app://dummy.pdf:

• The PDF plugin can detect the PDF file (as seen from screenshot 2), which return a Content-Type: application/pdf along with an HTML response containing an <embed type='application/pdf'>.
• The PDF plugin seems unable to access the file data, thus rendering a blank PDF (as seen from bottom left of screenshot 3).
• my-app://dummy.pdf is valid seen from an XMLHttpRequest (as seen from right of screenshot 3)
• The same file using file:///dummy.pdf renders properly.

This is what the request looks like in developer console:

Top left: file:///dummy.pdf. Bottom left: my-app://dummy.pdf. Right: my-app://dummy.pdf as seen from an XMLHttpRequest.

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 an issue that matches the one I want to file, without success.

Issue Details

• Electron Version:
  • 9.1.2
• Operating System:
  • Windows 10 1909
• Last Known Working Electron version:
  • N/A

Expected Behavior

PDF renders with my-app://dummy.pdf

Actual Behavior

PDF plugin shows up, but is empty.

To Reproduce

• Clone electron-quick-start.
• Download a testing PDF file to the repo root: https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf

main.js

const {app, BrowserWindow, protocol} = require('electron')
const path = require('path')

protocol.registerSchemesAsPrivileged([
  {scheme: 'my-app', privileges: {standard: true, secure: true}},
]);

function createWindow () {
  protocol.registerFileProtocol('my-app', (req, callback) => {
    let url = req.url;
    url = decodeURIComponent(url.substr('my-app://'.length));
    url = path.resolve(url);
    callback({path: url});
  });

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      plugins: true,
    }
  })

  mainWindow.loadFile('index.html')

  mainWindow.webContents.openDevTools()
}

app.whenReady().then(() => {
  createWindow()
  
  app.on('activate', function () {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})

Add to index.html

    <style>
      body, html {
        width: 100%;
        height: 100%;
      }
      iframe {
        width: 100%;
        height: 50%;
      }
    </style>
    <iframe id="file" src="file:///dummy.pdf"></iframe>
    <iframe id="custom" src="my-app://dummy.pdf"></iframe>

For extra debugging, add to renderer.js

var request = new XMLHttpRequest();
request.open('GET', 'my-app://dummy.pdf', true);
request.onload = function(response) {
	console.log(request);
	console.log(request.response);
};
request.onerror = console.error;
request.send();

Additional Information

[lishid]

I'm guessing this might be due to plugin processes not implementing scheme configurations the same way renderers do.

[lishid]

This may be related to #24011

[pat-flew]

I ran into this issue and found that the PDF does render if CSP is disabled with bypassCSP: true in the scheme privileges. Not sure if there's a more granular way to address.

Perhaps related to the discussion at https://bugs.chromium.org/p/chromium/issues/detail?id=271452

[gscholer]

I am using beaker browser, it has a similar problem beakerbrowser/beaker#1687, do you know how to bypass the CSP to make PDF render? @pat-flew

[pat-flew]

@gscholer To test this, it would need to be added to the scheme privileges of the protocol being used. Where is best asked of someone over there, but it's probably https://github.com/beakerbrowser/beaker/blob/63dd71e3cd0ae151ec6160b5b02d10afe483614f/app/main.js#L75.

If it is the same issue, this is a clumsy solution as you likely don't want to completely disable CSP. The real resolution may need to come upstream from chromium but idk.

[gscholer]

@pat-flew Thank you, that worked. I have add basspassCSP: true to the registerSchemesAsPrivileged of hyper scheme, it is the file of main.build.js under the folder resources/app of the beaker-browser. now the PDF file can render.