https://github.com/krakenjs/fetch-robot
Proxy fetch through an iframe
https://github.com/krakenjs/fetch-robot
Last synced: 2 months ago
JSON representation
Proxy fetch through an iframe
- Host: GitHub
- URL: https://github.com/krakenjs/fetch-robot
- Owner: krakenjs
- License: apache-2.0
- Archived: true
- Created: 2017-09-04T00:26:21.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2017-09-06T01:24:39.000Z (almost 8 years ago)
- Last Synced: 2025-04-15T21:08:01.252Z (2 months ago)
- Language: JavaScript
- Size: 277 KB
- Stars: 157
- Watchers: 9
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
- Security: SECURITY.md
Awesome Lists containing this project
README
Fetch Robot
-----------
Run `fetch()` through an iframe proxy to avoid dealing with CORS.
https://medium.com/@bluepnume/reinventing-cross-origin-requests-without-cors-b9c4cb645376
Uses [post-robot](https://github.com/krakenjs/post-robot) for frame-to-frame communication.
### Why?
- CORS requires server-side changes on each endpoint
- For non-GET requests, preflight requests must be sent to verify the origin, which affects site-speed
- Support is limited in older browsers
- CORS headers only allow a certain degree of granularity
Example
-------
Let's say:
- I'm on `https://www.rorschach.com`
- I want to make a request to `https://www.niteowl.com`
In the parent window `rorschach.com`:
```javascript
// Create a proxy instance and open the iframe
let proxy = fetchRobot.connect({ url: 'https://www.niteowl.com/fetch-robot-proxy' });
// Use `proxy.fetch` in the same way as `fetch`
proxy.fetch('https://www.niteowl.com/api/foo', { method: 'POST' })
.then(response => response.text())
.then(console.log);
```
In the child window `niteowl.com/fetch-robot-proxy`:
```javascript
// Enable requests to be passed through the current frame using fetchRobot
fetchRobot.serve({
allow: [
{
path: [
'/api/foo',
'/api/bar'
],
headers: [
'x-csrf'
]
},
{
origin: 'https://some-domain.com',
path: [
'/api/baz',
],
headers: [
'x-custom-header'
],
credentials: 'include'
}
]
});
```
Rules
-----
Pass one or more rules in `allow`.
- If any of the rules pass for a given request, the request will be allowed through.
- If no rules pass, the request will error out
Each option in a rule can be one of:
- string (e.g. `origin: 'https://foo.com'`)
- array (e.g. `origin: [ 'https://foo.com', 'https://bar.com' ]`)
- regex (e.g. `origin: new RegExp('https://(foo|bar)\.com')`)
- wildcard (e.g. `origin: '*'`)
### Available options
- `origin` - The domain(s) from which the request can be sent
- default: `'*'`
- `domain` - The domain(s) to which the request can be sent
- default: domain where `fetchRobot.serve()` was called
- `path` - The path(s) to which requests can be sent
- default: `[]`
- `query` - The query param(s) which can be sent with the request
- default: `'*'`
- `credentials` - The credential level which can be sent with requests
- default: `[ 'omit' ]`
- `method` - The method(s) with which requests can be sent
- default: `[ 'get', 'head', 'post', 'put', 'delete', 'connect', 'options', 'trace', 'patch' ]`
- `headers` - The headers(s) which can be sent with the request
- default: `[ 'accept', 'accept-language', 'content-language', 'content-type' ]`
- `responseHeaders` - The header(s) which can be sent with the response
- default: `[ 'cache-control', 'content-language', 'content-type', 'expires', 'last-modified', 'pragma' ]`
Quick Start
-----------
#### Getting Started
- Run setup: `./setup.sh`
- Start editing code in `./src` and writing tests in `./tests`
- `gulp build`
#### Building
```bash
npm run build
```
#### Tests
- Edit tests in `./test/tests`
- Run the tests:
```bash
gulp test
```
#### Testing with different/multiple browsers
```bash
npm run karma -- --browser=PhantomJS
npm run karma -- --browser=Chrome
npm run karma -- --browser=Safari
npm run karma -- --browser=Firefox
npm run karma -- --browser=PhantomJS,Chrome,Safari,Firefox
```
#### Keeping the browser open after tests
```bash
npm run karma -- --browser=Chrome --keep-browser-open
```
#### Publishing
- Publish your code: `./publish.sh`