Secure HTTP configuration for web applications (FE)

[MariusJulius]

a. To protect against clickjacking and cross-site scripting, appropriate HTTP response header settings (e.g. X-FRAME-OPTIONS: deny) are specified in the web application. b. At a minimum, the web application uses the following HTTP headers: • Content-Security-Policy (CSP); • Strict-Transport-Security (HSTS); • Content-Type; • X-Content-Type-Options; • Cache-Control. c. The web application is configured with HTTP headers to restrict requests as much as possible.

[superspartak]

"HTTP response header"

Response headers should be set in the BE, not FE.

[thenouan]

FE is still served through HTTP, which means it sends headers with response too

[KaarelKa]

@thenouan Hey, tried some options to configure this from FE side purely, but they don't seem to work, at least not without ejecting from CRA. I understand that we could also configure these from nginx ?

[thenouan]

@KaarelKa yes, no react-app ejecting is needed. tv-web docker image contains nginx which is serving static files generated during react-app build. Dockerfile in tv-web repo contains instructions for building the image and also the nginx config. Headers can be added using add_header directive in nginx conf

https://nginx.org/en/docs/http/ngx_http_headers_module.html

[KaarelKa]

Done on infrastructure level

[plakitkelly]

[plakitkelly]

[KaarelKa]

@thenouan

Can you check if these are relevant ?

[MariusJulius]

@KaarelKa check the list - validate if we set all to pass, will it brake FE application or not?

[KaarelKa]

@thenouan new CSP should be:

default-src 'none'; style-src 'self' fonts.googleapis.com fonts.gstatic.com; connect-src 'self' localhost:8000; font-src 'self' fonts.googleapis.com fonts.gstatic.com; script-src 'self'; manifest-src 'self'; img-src 'self' i.pinimg.com; base-uri 'none'; form-action 'self'; frame-ancestors 'self;

Make sure you don't change it before this task is deployed. Had to do some changes in code.