update to new CSP with embed font

6時間前 · 29f71088b2
--- a/docs/csp-apache.conf.md
+++ b/docs/csp-apache.conf.md
@@ -0,0 +1,51 @@
 # Content-Security-Policy (Apache)

 Self-hosted fonts: no `fonts.googleapis.com` or `fonts.gstatic.com`. Static assets (including `woff2`) are served from `'self'`.

 Adjust `report-uri` if your API base path or host differs (example below targets UAT).

 ## Enforcing

 ```apache
 Header always set Content-Security-Policy "default-src 'self'; \
 	base-uri 'self'; \
 	object-src 'none'; \
 	frame-ancestors 'none'; \
 	form-action 'self'; \
 	script-src 'self'; \
 	style-src 'self' 'unsafe-inline'; \
 	style-src-elem 'self' 'unsafe-inline'; \
 	img-src 'self' data: https://www.w3.org https://w3.org; \
 	media-src 'self' blob:; \
 	font-src 'self' data:; \
 	connect-src 'self'; \
 	upgrade-insecure-requests"
 ```

 ## Report-Only

 Same policy plus violation reporting:

 ```apache
 Header always set Content-Security-Policy-Report-Only "default-src 'self'; \
 	base-uri 'self'; \
 	object-src 'none'; \
 	frame-ancestors 'none'; \
 	form-action 'self'; \
 	script-src 'self'; \
 	style-src 'self' 'unsafe-inline'; \
 	style-src-elem 'self' 'unsafe-inline'; \
 	img-src 'self' data: https://www.w3.org https://w3.org; \
 	media-src 'self' blob:; \
 	font-src 'self' data:; \
 	connect-src 'self'; \
 	upgrade-insecure-requests; \
 	report-uri https://pnspsuat.gld.gov.hk/api/csp-report"
 ```

 ## Notes

 - **`style-src-elem`**: Explicit, alongside `style-src`, for `<link rel="stylesheet">` behaviour in modern browsers.
 - **`img-src`**: Includes `https://www.w3.org` and `https://w3.org` so W3C URLs that redirect between hosts are allowed.
 - **`font-src`**: `'self' data:` covers bundled fonts and `data:` URLs if used.
 - Add origins to the relevant directive only if you introduce third-party scripts, styles, fonts, or APIs.
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -10,6 +10,9 @@
    "@emotion/cache": "^11.10.3",
    "@emotion/react": "^11.10.4",
    "@emotion/styled": "^11.10.4",
    "@fontsource/noto-sans-hk": "^5.2.9",
    "@fontsource/noto-sans-sc": "^5.2.9",
    "@fontsource/public-sans": "^5.2.7",
    "@material-ui/pickers": "^3.3.10",
    "@mui/icons-material": "^5.14.1",
    "@mui/lab": "^5.0.0-alpha.139",
--- a/public/index.html
+++ b/public/index.html
@@ -20,11 +20,6 @@
    <meta name="author" content="Government Logistics Department" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/apple-touch-icon.png" />
    <title>PNSPS - Public Notice Submission and Payment System</title>
    <link rel="preconnect" href="https://fonts.gstatic.com" />
    <link
      href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap&family=Public+Sans:wght@400;500;600;700"
      rel="stylesheet"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
--- a/src/assets/fonts.css
+++ b/src/assets/fonts.css
@@ -0,0 +1,19 @@
 /* Self-hosted fonts (bundled via @fontsource; no Google Fonts CDN — CSP-friendly). */

 /* Public Sans — MUI theme (`themeConst.js`), charts, config */
@import "@fontsource/public-sans/400.css";
@import "@fontsource/public-sans/500.css";
@import "@fontsource/public-sans/600.css";
@import "@fontsource/public-sans/700.css";

 /* Noto Sans HK — `styles.css` / navbar (Latin + Hong Kong glyphs) */
@import "@fontsource/noto-sans-hk/latin-400.css";
@import "@fontsource/noto-sans-hk/chinese-hongkong-400.css";
@import "@fontsource/noto-sans-hk/latin-600.css";
@import "@fontsource/noto-sans-hk/chinese-hongkong-600.css";

 /* Noto Sans SC — fallback for simplified Chinese */
@import "@fontsource/noto-sans-sc/latin-400.css";
@import "@fontsource/noto-sans-sc/chinese-simplified-400.css";
@import "@fontsource/noto-sans-sc/latin-600.css";
@import "@fontsource/noto-sans-sc/chinese-simplified-600.css";
--- a/src/assets/style/styles.css
+++ b/src/assets/style/styles.css
@@ -1,6 +1,3 @@
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+HK|Noto+Sans+SC&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC&display=swap');

 html,
 body,
 #root,
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,8 @@
 import { StrictMode, useEffect, useContext } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import "./assets/style/styles.css"
 import './assets/fonts.css';
 import './assets/style/styles.css';

 // scroll bar
 import 'simplebar/src/simplebar.css';
--- a/yarn.lock
+++ b/yarn.lock