ElectronTokenBackendContribution may add a whitelist config that does not need to carry tokens.

[zhaomenghuan]

I try to write a BackendApplicationContribution to use express.static to host my static resources，when I use the Electron WebView tag to load the page of my resources, the html file of the entrance is accessed normally, and the inline JS and CSS files cannot be accessed and show a 403 error.

I tried to inject cookies into the Electron WebView tag and tried to intercept resource requests to add headers, but none of them worked.

I tried the following code, because the execution timing problem does not take effect：

configure(app: express.Application): void {
  app.use('/devtools', (req, res, next) => {
    const tokenValue = process.env[ElectronSecurityToken]?.toString() as string;
    req.headers.cookie = `${ElectronSecurityToken}=${tokenValue}`;
    next();
  }, express.static(path.join(DevToolsFrontend, 'devtools')));
}

So I think it is necessary to provide the configuration of ElectronTokenBackendContribution to allow certain requests not to be verified, but to be verified by the extension itself.

[akosyakov]

cc @marechal-p

[paul-marechal]

@zhaomenghuan I would recommend rebinding the ElectronTokenValidator class to override the allowRequest(req) function to add your custom logic for now.

[zhaomenghuan]

@zhaomenghuan I would recommend rebinding the ElectronTokenValidator class to override the allowRequest(req) function to add your custom logic for now.

It sounds like a good way, but currently the ElectronTokenBackendContribution class directly refers to the ElectronTokenValidator class. There is no way to solve the custom ElectronTokenValidator class. If I understand it wrong, can you give me an example?

import { ElectronTokenValidator } from './electron-token-validator';

/**
 * This component contributes an Express middleware that will refuse all
 * requests that do not include a specific token.
 */
@injectable()
export class ElectronTokenBackendContribution implements BackendApplicationContribution {

    @inject(ElectronTokenValidator)
    protected readonly tokenValidator: ElectronTokenValidator;

    configure(app: express.Application): void {
        app.use(this.expressMiddleware.bind(this));
    }

    /**
     * Only allow token-bearers.
     */
    protected expressMiddleware(req: express.Request, res: express.Response, next: express.NextFunction): void {
        if (this.tokenValidator.allowRequest(req)) {
            next();
        } else {
            console.error(`refused an http request: ${req.connection.remoteAddress}`);
            res.sendStatus(403);
        }
    }

}

[paul-marechal]

We use the ElectronTokenValidator class reference as an inversify identifier, to which we currently have the same class bound to. Nothing prevents you from doing something like:

// your-module.ts
// ...
rebind(ElectronTokenValidator).to(class extends ElectronTokenValidator {
    allowRequest() { return true; }
}).inSingletonScope();

[paul-marechal]

The whole point of using inversify is to be able to rebind components like this when something doesn't work for you :)

[zhaomenghuan]

I finally solved my problem through this method, thank you very much for the guidance, let me learn a new method.

[paul-marechal]

I should look into why the tokens aren't set in the webviews though. @zhaomenghuan can you share the bit of code that instantiates and mounts the webview?

[zhaomenghuan]

Sorry, my project is based on chrome-devtools-frontend fork. Because it is not convenient for the internal project of the company to directly give the code, I will organize a test project at night.