Description of component placement within app

[guylepage3]

Description
It would be helpful for newbies to have a bit more detail on the description of component placement within an app.

Currently the following is what is a description for placement...

Supposing a CommonJS environment, you can simply use the component in this way:

import HttpsRedirect from 'react-https-redirect';

class App extends React.Component {

  render() {
    return (
      <Providers>
        <HttpsRedirect>
          <Children />
        </HttpsRedirect>
      <Providers />
    );
  }
}

This is great for those who are not new to SSL but it would be nice for everyone to have an idea of what's actually going on behind the scenes, as well as a description of what <Providers> is exactly.

[mbasso]

Hi @guylepage3,
thank you for opening this issue.
Yeah, we can certainly improve the README . I'll try to semplify it removing Providers from the example as they are not necessary. Do you think that something like the following would be fine?

import HttpsRedirect from 'react-https-redirect';

// you can just wrap your entire app to redirect it to the equivalent https version
// for example:
// http://example.com/    =>    https://example.com/

class HttpsApp extends React.Component {

  render() {
    return (
      <HttpsRedirect>
        <App />
      <HttpsRedirect/>
    );
  }
}

[guylepage3]

Hey @mbasso, I actually discovered a better method to "enforce https." I would recommend, using the static.json enforcement method for this package. It's a much better method imo as it does not require a redirect but an enforcement from the root and you're able to prevent downgrade attacks.

See below...

Create a static.json file at the root of the repo to configure the web server.

Enforce secure connections by automatically redirecting insecure requests to https://, in static.json:

{
  "root": "build/",
  "https_only": true
}

Prevent downgrade attacks with HTTP strict transport security. Add HSTS "headers" to static.json:

{
  "root": "build/",
  "https_only": true,
  "headers": {
    "/**": {
      "Strict-Transport-Security": "max-age=7776000"
    }
  }
}

max-age is the number of seconds to enforce HTTPS since the last connection; the example is 90-days

Another thing I noticed with the current system is that, since it's a redirect, sometimes the redirect doesn't happen instantly and there is a .5 second delay in redirecting the user from http to https which the user can see.

[guylepage3]

Hi @guylepage3,
thank you for opening this issue.
Yeah, we can certainly improve the README . I'll try to semplify it removing Providers from the example as they are not necessary. Do you think that something like the following would be fine?

If you do not choose to go with the above option.. I do think this works. A much better description of what's going on. Cheers. 👍

[mbasso]

Prevent downgrade attacks with HTTP strict transport security. Add HSTS "headers" to static.json

As we said in the readme, "This element provides a client-side option when HSTS and server-enforced redirects aren't possible, such as when deploying code on a shared-hosting provider like GitHub Pages". If you can use a solution like the one you mentioned is certainly better!

If you do not choose to go with the above option.. I do think this works. A much better description of what's going on. Cheers. 👍

I'll update the README in the next fews days!

Thank you 😄