Add security headers to dev server

[lukaw3d]

No description provided.

[cloudflare-workers-and-pages]

Deploying with    Cloudflare Pages

Latest commit:	c907220
Status:	✅  Deploy successful!
Preview URL:	https://4035f8d6.oasis-wallet.pages.dev
Branch Preview URL:	https://lw-dev-e2e.oasis-wallet.pages.dev

View logs

[github-actions]

🦙 MegaLinter status: ⚠️ WARNING

Descriptor	Linter	Files	Fixed	Errors	Elapsed time
✅ EDITORCONFIG	editorconfig-checker	12		0	0.07s
✅ JAVASCRIPT	eslint	2	0	0	4.36s
✅ JSON	eslint-plugin-jsonc	1	0	0	0.85s
✅ JSON	jsonlint	1		0	0.28s
✅ JSON	npm-package-json-lint	yes		no	0.72s
✅ JSON	prettier	1	0	0	0.35s
✅ JSON	v8r	1		0	4.06s
⚠️ MARKDOWN	markdownlint	1	0	1	0.72s
✅ MARKDOWN	markdown-table-formatter	1	0	0	0.26s
✅ REPOSITORY	checkov	yes		no	38.4s
✅ REPOSITORY	git_diff	yes		no	0.0s
✅ REPOSITORY	grype	yes		no	15.4s
✅ REPOSITORY	trivy-sbom	yes		no	2.74s
✅ REPOSITORY	trufflehog	yes		no	139.23s
✅ TSX	eslint	1	0	0	4.8s
✅ TYPESCRIPT	eslint	6	0	0	5.21s

See detailed report in MegaLinter reports
Set VALIDATE_ALL_CODEBASE: true in mega-linter.yml to validate all sources, not only the diff

MegaLinter is graciously provided by

[codecov]

Codecov Report

Merging #1609 (4475e23) into master (4e7f83e) will decrease coverage by 0.14%.
The diff coverage is 33.33%.

❗ Current head 4475e23 differs from pull request most recent head c907220. Consider uploading reports for the commit c907220 to get more accurate results

@@            Coverage Diff             @@
##           master    #1609      +/-   ##
==========================================
- Coverage   83.01%   82.87%   -0.14%     
==========================================
  Files         157      157              
  Lines        4073     4075       +2     
  Branches      730      730              
==========================================
- Hits         3381     3377       -4     
- Misses        692      698       +6     

Flag	Coverage Δ
cypress	51.19% <33.33%> (-0.04%)	⬇️
jest	77.87% <0.00%> (-0.17%)	⬇️

Flags with carried forward coverage won't be shown. Click here to find out more.

Files Changed	Coverage Δ
src/app/pages/E2EPage/index.tsx	48.14% <33.33%> (-1.86%)	⬇️

... and 2 files with indirect coverage changes

[buberdds]

What generates this value? Is it going to be the same across react versions?

[lukaw3d]

It depends on part of the built version of react-error-overlay library (added by parcel). b6fd0c5 is supposed to make sure we notice if we have to change it after random dependency updates

I'll add this to make it more explicitly connected

expect((await page.request.head('/')).headers()['content-security-policy']).toContain(reactErrorOverlay)

[lukaw3d]

and I'm relying on browser to print the hash. I can't reproduce it

const fs = require('fs')
const crypto = require('crypto')

const file = fs.readFileSync('./node_modules/react-error-overlay/lib/index.js', 'utf-8')
const script = file.slice(
  file.indexOf('/*! For license'),
  file.indexOf('iframeReady()}]);') + 'iframeReady()}]);'.length,
)
console.log(`${script.slice(0, 20)}...${script.slice(-20)}`)
console.log(crypto.createHash('sha256').update(script).digest('base64'))
// c1+FzHlBWznidUzzL/gYMDO8mS0XL4lAvO5NaizuNZs=
// expected RV6I4HWPb71LvA27WVD3cEz8GsJrHlfcM/2X2Q5gV00=

[lukaw3d]

Update: this would work. But it's still terribly ugly:

const fs = require('fs')
const crypto = require('crypto')
const vm = require('vm')

const file = fs.readFileSync('./node_modules/react-error-overlay/lib/index.js', 'utf-8')

const strScript = file.slice(
  file.indexOf("'/*! For license"),
  file.indexOf("iframeReady()}]);'") + "iframeReady()}]);'".length,
)
const script = vm.runInNewContext(strScript)

console.log(`${script.slice(0, 20)}...${script.slice(-20)}`)
console.log(crypto.createHash('sha256').update(script).digest('base64'))