reactjs - GoogleOAuthProvider isn't passing nonce, inline styles can't be applied - Stack Overflow

admin管理员组

文章数量:1333396

I have a react app which needs to use google oauth. Here's how I setup the root renderer:

import React from 'react';
import { GoogleOAuthProvider } from '@react-oauth/google';
import App from './pages/App';
import { createRoot } from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';

import "./index.css"

const rootElement = document.getElementById("root");
const root = createRoot(rootElement!);
const url = import.meta.env.VITE_REACT_APP_OAUTH_CLIENT_ID;

root.render(
  <BrowserRouter>
    <GoogleOAuthProvider clientId= {url} nonce={"F04DAE83-E065-4AB5-904F-C2E5E3B3390C"}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </GoogleOAuthProvider>
  </BrowserRouter>
);

Supposedly, the nonce I pass to GoogleOAuthProvider will be passed along to the script it downloads so that things like setting an inline style will be allowed with appropriet content security policies.

GoogleOAuthProvider, to my understanding, loads a script from which should add the nonce. However, when I load my app (which is behind a firewall so I can't provide a link sadly), I see a content security policy violation:

Refused to apply inline style because it violates the following Content Security Policy directive: 
"style-src 'self' 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=' 'sha256-mmA4m52ZWPKWAzDvKQbF7Qhx9VHCZ2pcEdC0f9Xn/Po=' 'sha256-6EhLFF8G95u/ybGSFfUDwCI+tUnGaFOU7YO6RWksdT8=' 'sha256-/VVOq+Ws/EiUxf2CU6tsqsHdOWqBgHSgwBPqCTjYD3U=' 'sha256-VFkcZKIwYxNm8Z6oY+AC70f2fuyHVm5fJgnpOkYBF3Q=' 'sha256-g9aHNH7iF2hhGZYtVVd5mKQSnyLPmXWw5gwiuxBVonI=' 'sha256-VjKqXV9i0mo5RzxvaQpz7qQA91PkjLVqLQGYNI4Cc/I=' 'sha256-NsEzkM762veirpWZeMiqlWTPdCYrm1uJHLzzwfYnDLM=' *.websitepolicies.io *.acom.ucar.edu nav.ucar.edu fonts.gstatic code.jquery *.googleapis angularjs angular-ui.github.io maxcdn.bootstrapcdn www2.ucar.edu cdnjs.cloudflare netdna.bootstrapcdn  getbootstrap accounts.google nonce-F04DAE83-E065-4AB5-904F-C2E5E3B3390C". 
Either the 'unsafe-inline' keyword, a hash ('sha256-lmto2U1o7YINyHPg9TOCjIt+o5pSFNU/T2oLxDPF+uw='), or a nonce ('nonce-...') is required to enable inline execution.

As you can see, the nonce is included in the style-src of the Content-Security-Policy.

My best guess is that GoogleOAuthProvider isn't passing along the nonce but I don't see how I've set the nonce in the code is incorrect.

What am I missing here?

Lastly, I'm aware that a nonce should be generated everytime, but I will worry about proper generation of the nonce after I get it to work just once.

本文标签： reactjsGoogleOAuthProvider isn39t passing nonceinline styles can39t be appliedStack Overflow