csp problems

[gonojuarez]

Description create a hotfix related to CSP in the developer environment.

• Users in the dev environment can't connect the API because Windows rejects it.
• the problem is related to the HTTP protocol in Windows 11.

[gonojuarez]

I suggest removing from /public/index.html the label

 <meta http-equiv="Content-Security-Policy" content="
    default-src 'self'
        'unsafe-inline'
        'unsafe-eval'
        https://*
        wss://*.microsoft.com/cognitiveservices/
        blob:
        gap:
        data:;
    img-src * data:  filesystem:  blob:  ;
    ">

and implements a good csp with react like us:

import { useEffect } from 'react';

const setupCSP = () => {
  // Detectar entorno
  const isDevelopment = process.env.NODE_ENV === 'development';

  const localHostSources = isDevelopment
    ? 'http://localhost:* http://127.0.0.1:* ws://localhost:* ws://127.0.0.1:*'
    : '';

  const cspContent = `
    default-src 'self' https://app.cboard.io https://api.cboard.io ${localHostSources};
    script-src 'self' 'unsafe-inline' 'unsafe-eval' https://www.paypal.com https://www.sandbox.paypal.com ${localHostSources};
    style-src 'self' 'unsafe-inline' ${localHostSources};
    img-src * data: blob: filesystem:;
    connect-src 'self' https://api.cboard.io wss://*.microsoft.com/cognitiveservices/ https://*.paypal.com ${localHostSources};
    media-src 'self' blob: ${localHostSources};
    object-src 'none';
    frame-src 'self' https://www.paypal.com https://www.sandbox.paypal.com ${localHostSources};
    font-src 'self' data: ${localHostSources};
  `
    .replace(/\s+/g, ' ')
    .trim();

  // Añadir la meta tag dinámicamente
  const meta = document.createElement('meta');
  meta.httpEquiv = 'Content-Security-Policy';
  meta.content = cspContent;
  document.head.appendChild(meta);
};

//initializeAppInsights


// When running in Cordova, must use the HashRouter
const PlatformRouter = isCordova() ? HashRouter : BrowserRouter;

// Paypal settings

//render app
const renderApp = () => {
  if (isCordova()) {
    initCordovaPlugins();
  }
 //implements the CSP
  setupCSP();
 // render code
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <PayPalScriptProvider options={paypalOptions}>
          <SpeechProvider>
            <LanguageProvider>
              <ThemeProvider>
                <SubscriptionProvider>
                  <PlatformRouter>
                    <DndProvider backend={TouchBackend} options={dndOptions}>
                      <Route path="/" component={App} />
                    </DndProvider>
                  </PlatformRouter>
                </SubscriptionProvider>
              </ThemeProvider>
            </LanguageProvider>
          </SpeechProvider>
        </PayPalScriptProvider>
      </PersistGate>
    </Provider>,
    document.getElementById('root')
  );
};

isCordova() ? onCordovaReady(renderApp) : renderApp();

[gonojuarez]

I found problems related to connecting with the araasac and other API links. that implementations need a full testing

[gonojuarez]

there is an explain about the csp

[gonojuarez]

not pass the android testing, because lock internal files return to in progress

[RodriSanchez1]

related #1183