feat(frontend-canister)!: default secure configuration for assets in frontend project template

[smallstepman]

Description

blocked by:

• feat(frontend-canister): use JSON5 file format for .ic-assets.json5 config files  #2489
• feat(frontend-canister): add allow_raw_access config option #2824

Closes https://dfinity.atlassian.net/browse/SDK-473
Closes https://dfinity.atlassian.net/browse/PSEC-710

How Has This Been Tested?

e2e

Checklist:

• The title of this PR complies with Conventional Commits.
• I have edited the CHANGELOG accordingly.
• I have made corresponding changes to the documentation.

[smallstepman]

@robin-kunzler @eduard-dfinity here is a little script so you can test things on your end.

git clone https://github.com/dfinity/sdk sdk_sec_headers
cd sdk_sec_headers
git checkout SDK-473-default-security-headers
cargo run -- new sec_headers
cd sec_headers/
cargo run --manifest-path ../Cargo.toml -- start --clean --background
cargo run --manifest-path ../Cargo.toml -- deploy
FE_CAN_ID=$(cargo run --manifest-path=../Cargo.toml -- canister id sec_headers_frontend)
open "http://127.0.0.1:8000/?canisterId=${FE_CAN_ID}"
curl --head "http://127.0.0.1:8000/index.js?canisterId=${FE_CAN_ID}"
curl --head "http://127.0.0.1:8000/main.css?canisterId=${FE_CAN_ID}"

Output

The headers are loaded as expected, and to my untrained eye, everything is working also in the browser.

HTTP/1.1 200 OK
content-type: application/javascript
ic-certificate: ic-certificate: certificate=:.....:, tree=:....:
content-security-policy: default-src 'self';script-src 'self' 'unsafe-eval';connect-src 'self' https://ic0.app https://*.ic0.app;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;
x-content-type-options: nosniff
x-frame-options: DENY
referrer-policy: same-origin
strict-transport-security: max-age=31536000; includeSubDomains
x-xss-protection: 1; mode=block
permissions-policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()
etag: "................"
content-length: 628071
date: Mon, 08 Aug 2022 11:21:12 GMT

HTTP/1.1 200 OK
content-type: text/css
ic-certificate: certificate=:.....:, tree=:....:
content-security-policy: default-src 'self';script-src 'self' 'unsafe-eval';connect-src 'self' https://ic0.app https://*.ic0.app;img-src 'self' data:;style-src * 'unsafe-inline';style-src-elem * 'unsafe-inline';font-src *;object-src 'none';base-uri 'self';frame-ancestors 'none';form-action 'self';upgrade-insecure-requests;
referrer-policy: same-origin
x-xss-protection: 1; mode=block
x-frame-options: DENY
x-content-type-options: nosniff
permissions-policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), cross-origin-isolated=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), navigation-override=(), payment=(), picture-in-picture=(), publickey-credentials-get=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=(), clipboard-read=(), clipboard-write=(), gamepad=(), speaker-selection=(), conversion-measurement=(), focus-without-user-activation=(), hid=(), idle-detection=(), interest-cohort=(), serial=(), sync-script=(), trust-token-redemption=(), window-placement=(), vertical-scroll=()
strict-transport-security: max-age=31536000; includeSubDomains
etag: "................"
content-length: 537
date: Mon, 08 Aug 2022 11:21:12 GMT

[ghost]

Hey @smallstepman sorry for the late reply. I've reviewed the PR, everything looks good to me: headers are correct and I haven't seen any CSP violation or other errors in the browser.

btw, it would be nice to have a FOLLOW ticket for the http security headers comments so we can track its progress, would you mind creating it in your side?

[smallstepman]

@ericswanson-dfinity please suggest a better PR name

secure configuration for assets in default frontend canister starter project

?

(I'll modify the changelog header too)

[ericswanson-dfinity]

@ericswanson-dfinity please suggest a better PR name

secure configuration for assets in default frontend canister starter project

?

(I'll modify the changelog header too)

What you put in the changelog looks good

default secure configuration for assets when creating a new frontend project
or
default secure configuration for assets in frontend project template

[smallstepman]

I like the second one better

[smallstepman]

ready for re-review @ericswanson-dfinity