Add DOM utilities

README.md

@@ -155,6 +155,23 @@ router.route("/login").post(async (req, res, next) => {
 export default router;
 ```
 
+### DOM Utilities
+
+This package also provides a set of DOM utilities to help increase security.
+
+```ts
+import { openPopup } from "owasp/dom";
+
+function onClick() {
+  // Applies the following attributes to the window:
+  // * - `'noopener'`: Prevents the new window from having access to the originating window via `Window.opener`.
+  // * - `'noreferrer'`: Omits the `Referer` header and sets `noopener` to true.
+  // Subsequently, it resets the `opener` property of the new window to `null`.
+  // This prevents the new window from being able to navigate the originating window.
+  openPopup("https://example.com", "Window name", "width=200,height=200");
+}
+```
+
 ## Contributing
 
 Contributions are welcome!

biome.json

@@ -8,5 +8,13 @@
 		"rules": {
 			"recommended": true
 		}
-	}
-}
+	},
+	"overrides": [
+		{
+			"formatter": {
+				"indentStyle": "space"
+			},
+			"include": ["package.json"]
+		}
+	]
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "owasp",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "type": "module",
   "license": "MIT",
   "publishConfig": {
@@ -13,12 +13,18 @@
   "bugs": {
     "url": "https://github.com/quinnturner/owasp/issues"
   },
-  "keywords": [
-    "owasp",
-    "logging",
-    "security"
-  ],
+  "keywords": ["owasp", "logging", "security"],
   "exports": {
+    "./dom": {
+      "import": {
+        "types": "./dist/dom.d.ts",
+        "default": "./dist/dom.js"
+      },
+      "require": {
+        "types": "./dist/dom.d.cts",
+        "default": "./dist/dom.cjs"
+      }
+    },
     "./vocab": {
       "import": {
         "types": "./dist/vocab.d.ts",
@@ -33,9 +39,7 @@
   },
   "main": "./dist/index.cjs",
   "types": "./dist/index.d.cts",
-  "files": [
-    "dist"
-  ],
+  "files": ["dist"],
   "scripts": {
     "format": "biome format ./src --write",
     "lint": "biome lint ./src",
@@ -44,10 +48,10 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.4.1",
-    "bun-types": "^1.0.14",
+    "bun-types": "^1.0.17",
     "tsup": "^8.0.1",
-    "type-fest": "^4.8.2",
-    "typescript": "^5.3.2"
+    "type-fest": "^4.8.3",
+    "typescript": "^5.3.3"
   },
   "packageManager": "bun@1.0.14"
-}
+}

src/dom/index.ts

@@ -0,0 +1 @@
+export * from "./popup.js";

src/dom/popup.ts

@@ -0,0 +1,43 @@
+/// <reference lib="dom" />
+
+/**
+ * Open a popup window with the given URL, name, and window features.
+ *
+ * @param url - The URL to open in the popup.
+ * @param name - The name of the popup window.
+ * @param windowFeatures - A string containing a comma-separated list of window features in the form `name=value` — or for boolean features, just name.
+ * These features include options such as the window's default size and position, whether or not to open a minimal popup window, and so forth.
+ * The following options are supported:
+ * - `'popup'`: Requests a minimal popup window. If no other features are specified, the new browsing context will be a tab.
+ * - `'width'`: Specifies the width of the content area, including scrollbars. The minimum required value is `100`.
+ * - `'innerWidth'`: Specifies the width of the content area, excluding scrollbars. The minimum required value is `100`.
+ * - `'height'`: Specifies the height of the content area, including scrollbars. The minimum required value is `100`.
+ * - `'innerHeight'`: Specifies the height of the content area, excluding scrollbars. The minimum required value is `100`.
+ * - `'left'`: Specifies the distance in pixels from the left side of the work area where the new window will be generated.
+ * - `'screenX'`: Specifies the distance in pixels from the left side of the screen where the new window will be generated.
+ * - `'top'`: Specifies the distance in pixels from the top side of the work area where the new window will be generated.
+ * - `'screenY'`: Specifies the distance in pixels from the top side of the screen where the new window will be generated.
+ * - `'noopener'`: Prevents the new window from having access to the originating window via `Window.opener`.
+ * - `'noreferrer'`: Omits the `Referer` header and sets `noopener` to true.
+ *
+ * @returns If the browser successfully opens the new browsing context, a `WindowProxy` object is returned.
+ *          The returned reference can be used to access properties and methods of the new context as long as it complies with the same-origin policy security requirements.
+ *          `null` is returned if the browser fails to open the new browsing context, for example because it was blocked by a browser popup blocker.
+ * @see [OWASP HTML5 Security Cheat Sheet - Tabnabbing](https://cheatsheetseries.owasp.org/cheatsheets/HTML5_Security_Cheat_Sheet.html#tabnabbing)
+ * @see [MDN `Window.open`](https://developer.mozilla.org/en-US/docs/Web/API/Window/open#popup)
+ */
+export function openPopup(
+	url: string | URL,
+	name?: string | undefined,
+	windowFeatures?: string | undefined,
+): Window | null {
+	// Open the popup and set the opener and referrer policy instruction
+	const newWindow = window.open(
+		url,
+		name,
+		`noopener,noreferrer${windowFeatures ? `,${windowFeatures}` : ""}`,
+	);
+	// Reset the opener link
+	if (newWindow) newWindow.opener = null;
+	return newWindow;
+}

tsup.config.ts

@@ -2,6 +2,7 @@ import { defineConfig } from "tsup";
 
 export default defineConfig({
 	entry: {
+		dom: "./src/dom/index.ts",
 		vocab: "./src/vocab/index.ts",
 	},
 	splitting: false,