cloudflare / cloudflare-plugin-frontend

A React/Redux front-end for Cloudflare's WordPress, Magento2, and cPanel plugins.

Build using Yarn

1. yarn install
2. yarn run build

Development Tasks

$ yarn run build
$ OUTPUT_PATH=custom-path.js yarn run build
$ yarn run build:production
$ yarn run lint
$ yarn run format
$ yarn run test

Production

For production run yarn run build:production to get a minified version of compiled.js

Building Your Own Backend

This repository serves as the front end for all of our 3rd party integrations. It is intended to be backend agnostic with the intention of making it as easy as possible to port it to new backends. If you would like to build a custom backend just follow these steps:

1. Implement RestProxyCallback()

    /*
     * A callback for cf-util-http to proxy all calls to our backend
     *
     * @param {Object} [opts]
     * @param {String} [opts.method] - GET/POST/PUT/PATCH/DELETE
     * @param {String} [opts.url]
     * @param {Object} [opts.parameters]
     * @param {Object} [opts.headers]
     * @param {Object} [opts.body]
     * @param {Function} [opts.onSuccess]
     * @param {Function} [opts.onError]
     */
     function RestProxyCallback(opts) {}

This method is called on every request before it is sent. It should route all absolute URLs to the endpoint for your backend. Requests with relative URLs for things like localization (./lang/*.js) and config (./config.json) should remain unchanged.

2. Build your backend data store Your backend needs to store the following information about each user:

   • Cloudflare Client V4 API Key
   • Cloudflare Client V4 API Email
   • Cloudflare Host API Key

3. In index.html create a variable in local storage called cfEmail which contains Cloudflare Client V4 API Email of the current user.

4. Build an API Client for the Cloudflare V4 API which adds the necessary headers to each request.

5. Build an API Client for the Cloudflare Host API which adds the Host Key to all requests.

JSON response for endpoint /config

{
    "debug": false,
    "featureManagerIsFullZoneProvisioningEnabled": false,
    "isDNSPageEnabled": true,
    "isSubdomainCheckEnabled": true,
    "homePageCards": [
        "ApplyDefaultSettingsCard",
        "AutomaticHTTPSRewritesCard",
        "IpRewriteCard",
        "PluginSpecificCacheCard",
        "PluginSpecificCacheTagCard"
    ],
    "moreSettingsCards": {
        "container.moresettings.speed": [
            "AlwaysOnlineCard",
            "BrowserCacheTTLCard",
            "CacheLevelCard",
            "DevelopmentModeCard",
            "IPV6Card",
            "ImageOptimizationCard",
            "MinifyCard",
            "PurgeCacheCard",
        ],
        "container.moresettings.security": [
            "AdvanceDDoSCard",
            "BrowserIntegrityCheckCard",
            "ChallengePassageCard",
            "SecurityLevelCard",
            "SSLCard",
            "WAFCard"
        ]
    },
    "locale": "en",
    "integrationName": "frontend",
    "useHostAPILogin": true,
    "version": "2.8.1"
}

cloudflare-plugin-frontend's Issues

Using an API Token restricted only to the website's domain, causes a "Forbidden" error in the plugin

We have multiple sites under the same CF account and we would like to use API Tokens to authenticate the Wordpress plugin to prevent a breach in one website to potentially cause drama in other ones.

When we restrict the token to only the zone of the website, the plugin GUI stops working with a "Forbidden" error in the bottom red bar. This defies the benefit of using API Tokens because the API Token for one website can edit any zone in the Cloudflare account.

Steps to recreate:

1. Create a new API Token
2. in the "Zone Resources" settings select "Include" - "Specific Zone" - "the domain of your website"
3. Use the token to authenticate the plugin
4. When you try to login or edit something in the plugin it will show a "Forbidden" error
5. If you remove the setting at (2) the plugin is able to login successfully

Upon further investigation, the request that fails is triggered by this function that tries to fetch all the zones in the connected account:

cloudflare-plugin-frontend/src/actions/zones.js

Line 66 in 5fa743f

export function asyncFetchZones() {

I tried to do the request manually with the restricted token and the response is:

{
  "success":false,
  "errors":[
      {
       "code":0,
       "message":"Actor 'com.cloudflare.api.token...' requires permission 'com.cloudflare.api.account.zone.list' to list zones"
      }
  ],
  "messages":[],
  "result":null
}

So if we set an API token to only access one zone, it will not have the ability to get the list of available zones. I'm not been able to grant that permission manually.

Can the error be catched and the package will provide a way to enter the zoneID manually?

This issue has been previously open in the wordpress-plugin repository:
cloudflare/Cloudflare-WordPress#255

Upgrade to React 15.5

https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html

API key field uses regular text type input

The input field for API key on the login screen uses a regular text type, instead of password.

This dramatically increases the amount of places an API key is exposed.

For example browsers will show the full key as a form suggestion (image is with a revoked key).

I don't see a reason to not use a password type field here.

We don't trim user email and api key

v4 Login
https://github.com/cloudflare/cloudflare-plugin-frontend/blob/master/src/actions/user.js#L73
https://github.com/cloudflare/cloudflare-plugin-frontend/blob/master/src/utils/PluginAPI/PluginAPI.js#L29

Host API Create
https://github.com/cloudflare/cloudflare-plugin-frontend/blob/master/src/actions/user.js#L111
https://github.com/cloudflare/cloudflare-plugin-frontend/blob/master/src/utils/CFHostAPI/CFHostAPI.js#L62

I've checked purge cache by url and we do trim in that case. I don't recall any other input which would need trimming

It makes more sense to add it to frontend since we'll have this problem in all plugins.

Remove unused dependencies

Use something like https://github.com/depcheck/depcheck