Implement CSP (Content Security Policy) (#145)

jieqiu0129 · web-flow · commit 1c70b85ec091 · 2024-01-23T11:27:29.000+08:00
* Implement CSP(Content Security Policy)

* bump version
diff --git a/package.json b/package.json
@@ -32,12 +32,14 @@
     "@storybook/react": "6.4.22",
     "@svgr/webpack": "^6.1.2",
     "@testing-library/react": "13.4.0",
+    "@types/dompurify": "2.0.4",
     "@types/jest": "29.4.4",
     "@types/node": "18.11.9",
     "@types/react": "18.0.25",
     "@types/react-dom": "18.0.9",
     "@types/react-test-renderer": "^17.0.1",
     "@types/toposort": "^2.0.3",
+    "@types/trusted-types": "^2.0.7",
     "@types/uuid": "^8.3.1",
     "@typescript-eslint/eslint-plugin": "5.56.0",
     "@typescript-eslint/parser": "5.56.0",
@@ -77,6 +79,7 @@
     "@storybook/core-server": "6.4.22",
     "@storybook/manager-webpack5": "6.4.22",
     "core-js": "^3.6.5",
+    "dompurify": "^2.0.11",
     "eventemitter3": "^4.0.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
diff --git a/packages/react-dag-editor/package.json b/packages/react-dag-editor/package.json
@@ -4,7 +4,7 @@
   "repository": {
     "url": "https://github.com/microsoft/react-dag-editor.git"
   },
-  "version": "0.4.2",
+  "version": "0.4.3",
   "dependencies": {
     "@fluentui/merge-styles": "^8.2.0",
     "eventemitter3": "^4.0.7",
diff --git a/packages/react-dag-editor/src/lib/utils/wheel-delta.ts b/packages/react-dag-editor/src/lib/utils/wheel-delta.ts
@@ -4,6 +4,7 @@
  * https://stackoverflow.com/questions/20110224/what-is-the-height-of-a-line-in-a-wheel-event-deltamode-dom-delta-line
  */
 
+import DOMPurify from "dompurify";
 import { Debug } from "./debug";
 
 /**
@@ -16,20 +17,20 @@ function getScrollLineHeight(): number {
     const iframe = document.createElement("iframe");
     iframe.src = "#";
     document.body.appendChild(iframe);
-    const { contentWindow } = iframe;
-    if (!contentWindow) {
+    const { contentDocument } = iframe;
+    if (!contentDocument) {
       throw new Error("Fail to create iframe");
     }
-    const doc = contentWindow.document;
-    if (!doc) {
-      throw new Error("Fail to create iframe");
-    }
-    doc.open();
-    doc.write(
-      "<!DOCTYPE html><html><head></head><body><span>a</span></body></html>"
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    contentDocument.documentElement.innerHTML = DOMPurify.sanitize(
+      "<span>a</span>",
+      {
+        RETURN_TRUSTED_TYPE: true,
+      }
     );
-    doc.close();
-    const span = doc.body.firstElementChild as HTMLSpanElement;
+    const span = contentDocument.body.firstElementChild as HTMLSpanElement;
     const height = span.offsetHeight;
     document.body.removeChild(iframe);
     return height;
diff --git a/yarn.lock b/yarn.lock
@@ -4428,6 +4428,13 @@
   dependencies:
     "@types/node" "*"
 
+"@types/dompurify@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@types/dompurify/-/dompurify-2.0.4.tgz#25fce15f1f4b1bc0df0ad957040cf226416ac2d7"
+  integrity sha512-y6K7NyXTQvjr8hJNsAFAD8yshCsIJ0d+OYEFzULuIqWyWOKL2hRru1I+rorI5U0K4SLAROTNuSUFXPDTu278YA==
+  dependencies:
+    "@types/trusted-types" "*"
+
 "@types/eslint-scope@^3.7.0":
   version "3.7.2"
   resolved "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.2.tgz#11e96a868c67acf65bf6f11d10bb89ea71d5e473"
@@ -4800,6 +4807,11 @@
   resolved "https://registry.yarnpkg.com/@types/tough-cookie/-/tough-cookie-4.0.2.tgz#6286b4c7228d58ab7866d19716f3696e03a09397"
   integrity sha512-Q5vtl1W5ue16D+nIaW8JWebSSraJVlK+EthKn7e7UcD4KWsaSJ8BqGPXNaPghgtcn/fhvrN17Tv8ksUsQpiplw==
 
+"@types/trusted-types@*", "@types/trusted-types@^2.0.7":
+  version "2.0.7"
+  resolved "https://registry.yarnpkg.com/@types/trusted-types/-/trusted-types-2.0.7.tgz#baccb07a970b91707df3a3e8ba6896c57ead2d11"
+  integrity sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==
+
 "@types/uglify-js@*":
   version "3.13.1"
   resolved "https://registry.npmjs.org/@types/uglify-js/-/uglify-js-3.13.1.tgz#5e889e9e81e94245c75b6450600e1c5ea2878aea"
@@ -7829,6 +7841,11 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.0:
   dependencies:
     domelementtype "^2.2.0"
 
+dompurify@^2.0.11:
+  version "2.4.7"
+  resolved "https://registry.yarnpkg.com/dompurify/-/dompurify-2.4.7.tgz#277adeb40a2c84be2d42a8bcd45f582bfa4d0cfc"
+  integrity sha512-kxxKlPEDa6Nc5WJi+qRgPbOAbgTpSULL+vI3NUXsZMlkJxTqYI9wg5ZTay2sFrdZRWHPWNi+EdAhcJf81WtoMQ==
+
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
