35 lines
2.6 KiB
Markdown
35 lines
2.6 KiB
Markdown
|
# 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`).
|