proxmox/docs/09-troubleshooting/DAPP_CSP_CORB_FORMS.md

DApp Security & Accessibility Notes

Content Security Policy (CSP)

The DApp is served with a CSP that includes 'unsafe-eval' in script-src because WalletConnect/Reown and some SDKs use dynamic code evaluation. The header is set in:

• LXC 5801: smom-dbis-138/frontend-dapp/nginx-dapp-snippet.conf (included by the nginx config written in scripts/deployment/deploy-dapp-lxc.sh).

To reduce risk long-term, prefer dependencies that do not use eval() / new Function() / string-based setTimeout/setInterval, then remove 'unsafe-eval' from CSP.

If CSP still blocks after deploy (NPMplus)

If the DApp is behind NPMplus (e.g. https://dapp.d-bis.org) and you still see "script-src blocked" or CSP blocking eval:

1. In NPMplus UI, open the proxy host for dapp.d-bis.org.
2. Under Advanced or Custom Nginx Configuration, remove or relax any Content-Security-Policy custom header so the backend (LXC nginx) CSP is used, or set a custom CSP that includes 'unsafe-eval' in script-src (same as in smom-dbis-138/frontend-dapp/nginx-dapp-snippet.conf).
3. Save and reload the DApp. The container nginx already sends the correct CSP; this step is only needed if NPMplus overrides it.

CORB (Cross-Origin Read Blocking)

If you see "Response was blocked by CORB" when the DApp calls an API (e.g. POST /api/bridge/quote):

1. Cause: The browser blocks cross-origin responses whose Content-Type doesn’t match what the page expects (e.g. JSON). Often the server returns an error page as text/html or omits Content-Type: application/json.

2. Fix on the API server (the origin that serves /api/bridge/quote):

   • For successful JSON responses: send Content-Type: application/json and a JSON body.
   • For error responses: still use Content-Type: application/json and a JSON body (e.g. {"error": "..."}), not an HTML error page.
   • Send CORS headers so the DApp origin is allowed: Access-Control-Allow-Origin: https://dapp.d-bis.org (or * for dev) and, if the client sends credentials or custom headers, Access-Control-Allow-Methods and Access-Control-Allow-Headers as needed.

3. Frontend: The DApp uses fetch(..., { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(...) }). No change needed on the frontend if the server responds with correct Content-Type and CORS.

Form fields (accessibility)

Form inputs use id and name, and labels use htmlFor (or wrap the input) so autofill and screen readers work. See frontend-dapp/src/components/bridge/ (e.g. BridgeButtons.tsx, BridgeForm.tsx, TrustlessBridgeForm.tsx, SwapBridgeSwapQuoteForm.tsx).