feat: change custom csp in md2md mode

diplodoc-platform · Nov 11, 2024 · 7ef5a5f · 7ef5a5f
1 parent 667893b
commit 7ef5a5f
Show file tree

Hide file tree

Showing 9 changed files with 105 additions and 36 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -55,6 +55,7 @@
   "dependencies": {
     "@diplodoc/client": "^3.1.6",
     "@diplodoc/translation": "^1.4.3",
+    "csp-header": "^5.2.1",
     "katex": "^0.16.9",
     "shelljs": "0.8.5",
     "threads": "1.7.0",

diff --git a/src/constants.ts b/src/constants.ts
@@ -40,6 +40,18 @@ export const SINGLE_PAGE_DATA_FILENAME = 'single-page.json';
 export const CUSTOM_STYLE = 'custom-style';
 export const SEARCH_API = join(ASSETS_FOLDER, 'search', 'index.js');
 export const SEARCH_LANGS = join(ASSETS_FOLDER, 'search', 'langs');
+export const DEFAULT_CSP_SETTINGS: Record<string, string[]> = {
+    'default-src': ["'self'"],
+    'script-src': ["'self'", "'unsafe-inline'"],
+    'style-src': ["'self'", "'unsafe-inline'"],
+    'img-src': ["'self'", 'data:'],
+    'font-src': ["'self'", 'data:'],
+    'connect-src': ["'self'"],
+    'frame-src': ["'none'"],
+    'object-src': ["'none'"],
+    'base-uri': ["'self'"],
+    'form-action': ["'self'"],
+};
 
 export enum Stage {
     NEW = 'new',

diff --git a/src/models.ts b/src/models.ts
@@ -294,7 +294,9 @@ export interface PathData {
 }
 
 export type Resources = {
-    [key in ResourceType]?: string[];
+    [key in Exclude<ResourceType, 'csp'>]?: string[];
+} & {
+    csp?: Record<string, string[]>[];
 };
 
 export type YandexCloudTranslateGlossaryPair = {

diff --git a/src/pages/document.ts b/src/pages/document.ts
@@ -1,6 +1,12 @@
 import {join} from 'path';
 
-import {BUNDLE_FOLDER, CARRIAGE_RETURN, CUSTOM_STYLE, RTL_LANGS} from '../constants';
+import {
+    BUNDLE_FOLDER,
+    CARRIAGE_RETURN,
+    CUSTOM_STYLE,
+    DEFAULT_CSP_SETTINGS,
+    RTL_LANGS,
+} from '../constants';
 import {LeadingPage, Resources, TextItems, VarsMetadata} from '../models';
 import {ArgvService, PluginService} from '../services';
 import {getDepthPath} from '../utils';
@@ -9,6 +15,7 @@ import {DocInnerProps, DocPageData, render} from '@diplodoc/client/ssr';
 import manifest from '@diplodoc/client/manifest';
 
 import {escape} from 'html-escaper';
+import {getCSP} from 'csp-header';
 
 export interface TitleMeta {
     title?: string;
@@ -24,7 +31,8 @@ export function generateStaticMarkup(
     tocPath: string,
     title: string,
 ): string {
-    const {style, script, metadata, ...restYamlConfigMeta} = (props.data.meta as Meta) || {};
+    /* @todo replace rest operator with proper unpacking */
+    const {style, script, csp, metadata, ...restYamlConfigMeta} = (props.data.meta as Meta) || {};
     const resources = getResources({style, script});
 
     const {staticContent} = ArgvService.getConfig();
@@ -41,6 +49,7 @@ export function generateStaticMarkup(
                 <meta charset="utf-8">
                 <base href="${base}" />
                 ${getMetadata(metadata, restYamlConfigMeta)}
+                ${generateCSP(csp)}
                 <meta name="viewport" content="width=device-width, initial-scale=1.0">
                 <title>${title}</title>
                 <style type="text/css">
@@ -103,6 +112,38 @@ function getMetadata(metadata: VarsMetadata | undefined, restMeta: LeadingPage['
     return result;
 }
 
+function generateCSP(csp?: Record<string, string[]>[]) {
+    if (!csp) {
+        return '';
+    }
+
+    const collected = [DEFAULT_CSP_SETTINGS].concat(csp).reduce((acc, curr) => {
+        if (!curr || typeof curr !== 'object') {
+            return acc;
+        }
+
+        const entries = Object.entries(curr);
+
+        for (const [cspRule, value] of entries) {
+            acc[cspRule] ??= [];
+
+            const flat = Array.isArray(value) ? value : [value];
+
+            flat.forEach((cspValue) => {
+                if (!acc[cspRule].includes(cspValue)) {
+                    acc[cspRule].push(cspValue);
+                }
+            });
+        }
+
+        return acc;
+    }, {});
+
+    const stringified = getCSP({directives: collected});
+
+    return `<meta http-equiv="Content-Security-Policy" content="${stringified}">`;
+}
+
 function getResources({style, script}: Resources) {
     const resourcesTags: string[] = [];
 

diff --git a/src/steps/processAssets.ts b/src/steps/processAssets.ts
@@ -81,9 +81,13 @@ function processAssetsMdRun({args, tmpOutputFolder}) {
         const resourcePaths: string[] = [];
 
         // collect paths of all resources
-        Object.keys(resources).forEach((type) =>
-            resources[type as keyof Resources]?.forEach((path: string) => resourcePaths.push(path)),
-        );
+        Object.keys(resources).forEach((type) => {
+            if (type === 'csp') {
+                return;
+            }
+
+            resources[type as keyof Resources]?.forEach((path: string) => resourcePaths.push(path));
+        });
 
         //copy resources
         copyFiles(args.input, tmpOutputFolder, resourcePaths);

diff --git a/tests/e2e/__snapshots__/load-custom-resources.spec.ts.snap b/tests/e2e/__snapshots__/load-custom-resources.spec.ts.snap
@@ -68,8 +68,8 @@ exports[`Allow load custom resources md2html single page with custom resources:
     <meta name="noIndex"
           content="true"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -136,8 +136,8 @@ exports[`Allow load custom resources md2html single page with custom resources:
     <meta name="yfm"
           content="builder"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -203,8 +203,8 @@ exports[`Allow load custom resources md2html single page with custom resources:
   <head>
     <meta charset="utf-8">
     <base href="../">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -400,8 +400,8 @@ exports[`Allow load custom resources md2html with custom resources: index.html 1
     <meta name="noIndex"
           content="true"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -468,8 +468,8 @@ exports[`Allow load custom resources md2html with custom resources: page.html 1`
     <meta name="yfm"
           content="builder"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -535,8 +535,8 @@ exports[`Allow load custom resources md2html with custom resources: project/conf
   <head>
     <meta charset="utf-8">
     <base href="../">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"

diff --git a/tests/e2e/__snapshots__/metadata.spec.ts.snap b/tests/e2e/__snapshots__/metadata.spec.ts.snap
@@ -69,8 +69,8 @@ exports[`Allow load custom resources md2html with metadata: index.html 1`] = `
     <meta name="noIndex"
           content="true"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -136,8 +136,8 @@ exports[`Allow load custom resources md2html with metadata: page.html 1`] = `
     <meta name="yfm-config"
           content="config test"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -205,8 +205,8 @@ exports[`Allow load custom resources md2html with metadata: project/config.html
     <meta name="yfm-config"
           content="config test"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"

diff --git a/tests/e2e/__snapshots__/rtl.spec.ts.snap b/tests/e2e/__snapshots__/rtl.spec.ts.snap
@@ -56,8 +56,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
   <head>
     <meta charset="utf-8">
     <base href="./">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -114,8 +114,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
   <head>
     <meta charset="utf-8">
     <base href="./">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -176,8 +176,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
   <head>
     <meta charset="utf-8">
     <base href="../">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -234,8 +234,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
   <head>
     <meta charset="utf-8">
     <base href="../">
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -302,8 +302,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
     <meta name="noIndex"
           content="true"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"
@@ -363,8 +363,8 @@ exports[`Generate html document with correct lang and dir attributes. Load corre
     <meta name="yfm"
           content="builder"
     >
-    <meta name="csp"
-          content
+    <meta http-equiv="Content-Security-Policy"
+          content="default-src 'self'; script-src 'self' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; font-src 'self' data:; connect-src 'self'; frame-src 'none'; object-src 'none'; base-uri 'self'; form-action 'self';"
     >
     <meta name="viewport"
           content="width=device-width, initial-scale=1.0"