# 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`).