Google Git
Sign in
gerrit / gerrit-fe-dev-helper / 1a133456602942f1d0b24d62765cbed6012240f9
commit1a133456602942f1d0b24d62765cbed6012240f9[log] [tgz]
authorAntoine Musso <hashar@free.fr>Thu Mar 23 11:57:14 2023 +0100
committerAntoine Musso <hashar@free.fr>Thu Mar 23 11:57:14 2023 +0100
tree9fc8e8de116fd1533af13db4724b687c2265d597
parentaffce278661cc224f253d39d1baaf222a6fce6eb [diff]
Fix CORS preflight interception

With Chromium 111 I have noticed the built-in rule to add
`Access-Control-Allow-Origin=*` to response headers was ineffective
which can easily be worked around by emitting it from web server serving
the plugins.

The plugin I wrote fetches from a foreign resource which triggers a
preflight request. Since the browser extension always inject
`Cache-Control` the preflight request is emitted with:

    Allow-Control-Request-Headers: cache-control

The browser then expect the response to contain:

    Allow-Control-Response-Headers: cache-control

That again can be fixed via the web server until one interact with a
server they have no control on (eg a production service).

What I found out is the `addReqHeader` and `addRespHeader` functions are
not effective for preflight requests. The rules are handled listener
methods added via:
- chrome.webRequest.onBeforeRequest.addListener
- chrome.webRequest.onHeadersReceived.addListener

The WebRequest API does not intercept preflights requests, the events
are thus never fired, the listeners never kick in and none of our
extension rules are applied. This result in a cascading list of error
such as missing `Access-Control-Allow-Origin: *`.

The root cause is Chrome 79 as described on the WebRequest API page:
https://developer.chrome.com/docs/extensions/reference/webRequest/

> Starting from Chrome 79, the webRequest API *does not* intercept CORS
> preflight requests and responses by default. A CORS preflight for a
> request URL is visible to an extension if there is a listener with
> `'extraHeaders'` specified in `opt_extraInfoSpec` for the request URL.
> `onBeforeRequest` can also take 'extraHeaders' from Chrome 79.

Add the 'extraHeaders' to `onBeforeRequest` fixes the preflight
requests and cause events to be fired thus restoring the headers
injection.

Bug: Issue 16795
Change-Id: Ic25427dd65ad03d0ba8e78eebf6d23cd35134af0
1 file changed
tree: 9fc8e8de116fd1533af13db4724b687c2265d597
  1. data/
  2. src/
  3. webpack/
  4. .gitignore
  5. demo.png
  6. package.json
  7. README.md
  8. release-notes.md
  9. tsconfig.json
README.md

Gerrit FE Dev Helper

Gerrit FE Dev helper is a Chrome extension that will focus on helping frontend developers on Gerrit development.

As mentioned in readme from polygerrit-ui, we already support to start your local host for developing / debugging / testing, but it has quite a few restrictions:

  1. No auth support
  2. Restart needed to switch hosts
  3. Not easy to test plugins

To solve these pain points, Tao Zhou created this Chrome extension. It proxies all assets requests or any requests to a local HTTP server, and has the ability to inject any plugins exposed by the local HTTP server.

Features

See in release notes and Features below.

Install

The easiest is to install from the Chrome web store here: https://chrome.google.com/webstore/detail/gerrit-fe-dev-helper/jimgomcnodkialnpmienbomamgomglkd.

After you have installed and enabled the extension, you should see something similar to demo.png.

BUILD

To build from source:

npm install
npm run build

Then you should have gerrit_fe_dev_helper.zip that you can test with.

How to use

  1. For Gerrit core development, start the local Gerrit dev server to host app code locally
yarn start

Or if you are developing a plugin, serve your plugin via a local HTTP server via any means.

Example:

npx http-server -c-1 --cors
  1. Go to any Gerrit sites, enable the extension by clicking the icon
  2. You should see a red notice show up in the bottom right of the page: Gerrit dev helper is enabled, and now your Gerrit assets should be loaded from your local HTTP server
  3. Change files locally and refresh the page, you should have the changes immediately

The extension comes with a set of default rules, but you can change the rules by clicking the extension icon again.

The extension supports six different type of rules:

  1. block: block a certain request
  2. redirect: redirect a url to another url
  3. injectHtmlCode: inject a piece of html code to the page
  4. injectJsCode: inject any js code to the page
  5. injectJsPlugin: inject a js plugin(url) to the site
  6. injectHtmlPlugin: inject a html plugin(url) to the site
  7. injectJsModule: inject a js module file to the site (type=“module” will be added when load script)
  8. addReqHeader: to add arbitrary header when you send a request
  9. addRespHeader: to add arbitrary header when you receive a request
  10. rRespHeader: to remove arbitrary header on any response

The two options to inject any plugins (injectJsPlugin and injectHtmlPlugin) are meant to help you develop your plugins for your Gerrit sites. As they are served from your local HTTP server, you do not need to deploy them on the target Gerrit server.

How to use dev helper with html plugins

Use injectHtmlPlugin rule or use redirect rule if its an existing html plugin.

How to use dev helper with js plugins

For single-file js plugins, use injectJsPlugin rule or use redirect if its an exising js plugin.

For multi-file modularized js plugins (you have import / export in source code), you have two options:

  1. compile them and then treat it as single-file js plugin
  2. or if you want to load source code as it is
  • use injectJsModule, this will load the js with type="module", and due to restriction of type="module", Gerrit won't be able to recognize the plugin without a proper url set when calling Gerrit.install, so you also need to tweak your code to call Gerrit.install(callback, undefined, 'http://localhost:8081/plugins_/checks/gr-checks/gr-checks.js') to let Gerrit treat it as a legit plugin
  • or you can create a temporary html plugin which loads the http://localhost:8081/plugins_/checks/gr-checks/gr-checks.js with type="module", and then treat it as a html plugin

Either way, you need to block the existing plugin if its already on the page.

Contact

Please don't hesitate to contact dhruvsri@google.com for support on this extension.