create-react-app Refused to execute inline script because it violates the following Content Security Policy directive

alexbom commented 4 years ago

Hello! I'm trying to connect CRA with oidc auto renew & getting the next error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'sha256-...'". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.

index.js

import { reducer as oidcReducer, loadUser, OidcProvider } from 'redux-oidc';
import { userManager } from 'utils';
...

const store = createStore(
  combineReducers({
      ...rootReducer,
      oidc: oidcReducer,
  }),
  composeEnhancers(
    applyMiddleware(...)
  ),
);

loadUser(store, userManager);

ReactDOM.render(
  <Provider store={store}>
      <OidcProvider userManager={userManager} store={store}>
          ...
      </OidcProvider>
  </Provider>,
  document.getElementById('root')
);

env.development

REACT_APP_SILENT_REDIRECT_URI = https://localhost:8080/silent-renew

public/silent-renew.html

<head>
    <title></title>
</head>
<body>
<script src="oidc-client.min.js"></script>
<script>
    new UserManager().signinSilentCallback()
      .catch((err) => {
          console.log(err);
      });
</script>
</body>

I've also copied oidc-client.min.js to public folder.

utils/oidc.js

import { createUserManager } from 'redux-oidc';

export const userManager = createUserManager({
    authority: process.env.REACT_APP_AUTH_PATH,
    client_id: 'AdminWebApiJsClient',
    redirect_uri: process.env.REACT_APP_REDIRECT_URI,
    response_type: 'code',
    scope: 'openid profile admin_api',
    post_logout_redirect_uri: process.env.REACT_APP_LOGOUT_PATH,
    silent_redirect_uri: process.env.REACT_APP_SILENT_REDIRECT_URI,
    automaticSilentRenew: true,
});

App.js

<Route path="/silent-renew" exact={true} component={SilentRenew} />

SilentRenew.js

import { processSilentRenew } from 'redux-oidc';

const SilentRenew = () => {
    processSilentRenew();
};

export default SilentRenew;

What i've missing? Can't find full explanation, except some parts of code. Could somebody show the full demo of CRA & Oidc Auto Renew?

brockallen commented 4 years ago

This library can be used in a CSP compliant app. Your pages may not be. I can't help you beyond that.

alexbom commented 4 years ago

So, the only way CRA can realize silent renew is eject?

IdentityModel / oidc-client-js

create-react-app Refused to execute inline script because it violates the following Content Security Policy directive #1154