mbasso / react-https-redirect Goto Github PK

View Code? Open in Web Editor NEW

33.0 4.0 16.0 15 KB

Force a redirect to HTTPS when not on a local web server

License: MIT License

JavaScript 100.00%

react-https-redirect's Introduction

React-https-redirect

⚠️ Security note ⚠️ - This element provides a client-side option when HSTS and server-enforced redirects aren't possible. Please don’t use this if you can configure the server.

This is a React component equivalent of Polymer platinum-https-redirect

The element redirects the current page to HTTPS, unless the page is loaded from a web server running on localhost. Using HTTP Strict Transport Security (HSTS) can be used to enforce HTTPS for an entire origin, following the first visit to any page on the origin. Configuring the underlying web server to redirect all HTTP requests to their HTTPS equivalents takes care of enforcing HTTPS on the initial visit as well. Both options provide a more robust approach to enforcing HTTPS, but require access to the underlying web server's configuration in order to implement. 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.

You can read more information here.

Installation

Using npm:

npm install --save react-https-redirect

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

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/

// you can also use a "disabled" prop to dinamically disable it
// <HttpsRedirect disabled={...}>

class HttpsApp extends React.Component {

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

Author

Matteo Basso

Copyright and License

React-https-redirect source code is licensed under the MIT License.

react-https-redirect's People

Contributors

Stargazers

Watchers

Forkers

amilkey patrickread anuragkapur rossgoodwin wrroslund summitnetworks glaubervictor hugoskwirrel sopnopriyo 031087 workmanhomesolutions1 xiaoweicolive rchick jatvoirabotnik suciuandrei94 juniormayhe

react-https-redirect's Issues

Description of component placement within app

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.

How to use it in a next.js app?

As it depends on the window, don't know how to use it in a next.js app. It was working well previously on my react app.

Failed prop type: Invalid prop `children`

I receive the following warning using react 15.

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `HttpsRedirect`, expected `array`. in HttpsRedirect

I believe the correct PropType would be node not array.

Prop to disable redirect

Use case: I'm testing my app locally with charles proxy, and using HTTPS with charles proxy is a bit of a bummer for me.

So I'd like to have a prop, so I can do disabled={!!process.env.REACT_APP_NO_HTTPS}

Subdomains won't load on localhost

This works great for an app with a single domain, but my subdomains don't load on localhost.

Example foo.localhost:3000 automatically redirects to https://foo.localhost:3000/ and throws an error

Redirect not working in create-react-app anymore?

I dont have any errors but my site is loading the URL's with Http instead of redirecting them to Https.

Can someone confirm or am I the only one?

create-react-app import react-https-redirect could not be found

I was trying to import this npm package but it keep on saying: Could not find a declaration file for module 'react-https-redirect'.

I am importing it like so, import HttpsRedirect from 'react-https-redirect';
Another weird thing is that, after i deployed it in GAE, the redirection of http to https worked for a while, after 10min or so it didnt work already. until now.

Any help will be much appreciated.