Validate meta CSP directives (#107)

crx/manifest.json

@@ -2,7 +2,7 @@
   "manifest_version": 3,
   "name": "Capo: get your ﹤𝚑𝚎𝚊𝚍﹥ in order",
   "description": "Visualize the optimal ordering of ﹤𝚑𝚎𝚊𝚍﹥ elements on any web page",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "permissions": [
     "scripting",
     "activeTab",

docs/src/content/docs/user/validation.mdx

@@ -116,6 +116,14 @@ In the example above, there is a `<meta>` CSP element, so capo.js warns that "CS
 
 This validation warning is an example of capo.js being more opinionated than simply following the specification. The warning includes a recommendation to use the CSP header instead, which avoids the preload scanner issue all together. Also note that the `Content-Security-Policy-Report-Only` directive is only valid as an HTTP header and not as a `<meta http-equiv>` element.
 
+Additionally, some CSP directives are not allowed in the `<meta>` declaration:
+
+- `frame-ancestors`
+- `sandbox`
+- `report-uri`
+
+If capo.js detects any of these directives in a `<meta>` CSP element, it will log a validation warning.
+
 ### No invalid origin trials
 
 Sites can register for [origin trials](https://developer.chrome.com/en/docs/web-platform/origin-trials/) to enable individual experimental web platform features. To enable them on a given site, a token must be included as either an `Origin-Trial` HTTP header or `<meta http-equiv>` element.

docs/src/lib/capo.js

@@ -540,11 +540,36 @@ function $c322f9a5057eaf5c$export$6c93e2175c028eeb(element) {
 }
 function $c322f9a5057eaf5c$var$validateCSP(element) {
     const warnings = [];
-    if (element.matches('meta[http-equiv="Content-Security-Policy-Report-Only" i]')) //https://w3c.github.io/webappsec-csp/#meta-element
-    warnings.push("CSP Report-Only is forbidden in meta tags");
-    else if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) warnings.push("meta CSP discouraged. See https://crbug.com/1458493.");
+    let payload = null;
+    if (element.matches('meta[http-equiv="Content-Security-Policy-Report-Only" i]')) {
+        //https://w3c.github.io/webappsec-csp/#meta-element
+        warnings.push("CSP Report-Only is forbidden in meta tags");
+        return warnings;
+    }
+    if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) warnings.push("meta CSP discouraged. See https://crbug.com/1458493.");
+    const content = element.getAttribute("content");
+    if (!content) {
+        warnings.push("Invalid CSP. The content attribute must be set.");
+        return {
+            warnings: warnings,
+            payload: payload
+        };
+    }
+    const directives = Object.fromEntries(content.split(/\s*;\s*/).map((directive)=>{
+        const [key, ...value] = directive.split(" ");
+        return [
+            key,
+            value.join(" ")
+        ];
+    }));
+    payload = payload ?? {};
+    payload.directives = directives;
+    if ("report-uri" in directives) warnings.push("The report-uri directive is not supported. Use the Content-Security-Policy-Report-Only HTTP header instead.");
+    if ("frame-ancestors" in directives) warnings.push("The frame-ancestors directive is not supported. Use the Content-Security-Policy HTTP header instead.");
+    if ("sandbox" in directives) warnings.push("The sandbox directive is not supported. Use the Content-Security-Policy HTTP header instead.");
     return {
-        warnings: warnings
+        warnings: warnings,
+        payload: payload
     };
 }
 function $c322f9a5057eaf5c$var$isInvalidOriginTrial(element) {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rviscomi/capo.js",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Get your ﹤𝚑𝚎𝚊𝚍﹥ in order",
   "author": "Rick Viscomi",
   "license": "Apache-2.0",

snippet/capo.js

@@ -541,11 +541,36 @@ function $580f7ed6bc170ae8$export$6c93e2175c028eeb(element) {
 }
 function $580f7ed6bc170ae8$var$validateCSP(element) {
     const warnings = [];
-    if (element.matches('meta[http-equiv="Content-Security-Policy-Report-Only" i]')) //https://w3c.github.io/webappsec-csp/#meta-element
-    warnings.push("CSP Report-Only is forbidden in meta tags");
-    else if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) warnings.push("meta CSP discouraged. See https://crbug.com/1458493.");
+    let payload = null;
+    if (element.matches('meta[http-equiv="Content-Security-Policy-Report-Only" i]')) {
+        //https://w3c.github.io/webappsec-csp/#meta-element
+        warnings.push("CSP Report-Only is forbidden in meta tags");
+        return warnings;
+    }
+    if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) warnings.push("meta CSP discouraged. See https://crbug.com/1458493.");
+    const content = element.getAttribute("content");
+    if (!content) {
+        warnings.push("Invalid CSP. The content attribute must be set.");
+        return {
+            warnings: warnings,
+            payload: payload
+        };
+    }
+    const directives = Object.fromEntries(content.split(/\s*;\s*/).map((directive)=>{
+        const [key, ...value] = directive.split(" ");
+        return [
+            key,
+            value.join(" ")
+        ];
+    }));
+    payload = payload ?? {};
+    payload.directives = directives;
+    if ("report-uri" in directives) warnings.push("The report-uri directive is not supported. Use the Content-Security-Policy-Report-Only HTTP header instead.");
+    if ("frame-ancestors" in directives) warnings.push("The frame-ancestors directive is not supported. Use the Content-Security-Policy HTTP header instead.");
+    if ("sandbox" in directives) warnings.push("The sandbox directive is not supported. Use the Content-Security-Policy HTTP header instead.");
     return {
-        warnings: warnings
+        warnings: warnings,
+        payload: payload
     };
 }
 function $580f7ed6bc170ae8$var$isInvalidOriginTrial(element) {

src/lib/validation.js

@@ -185,18 +185,50 @@ export function getCustomValidations(element) {
 
 function validateCSP(element) {
   const warnings = [];
+  let payload = null;
 
   if (element.matches('meta[http-equiv="Content-Security-Policy-Report-Only" i]')) {
     //https://w3c.github.io/webappsec-csp/#meta-element
     warnings.push("CSP Report-Only is forbidden in meta tags");
-  } else if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) {
+    return warnings;
+  }
+
+  if (element.matches('meta[http-equiv="Content-Security-Policy" i]')) {
     warnings.push("meta CSP discouraged. See https://crbug.com/1458493.");
+  }
+
+  const content = element.getAttribute("content");
+  if (!content) {
+    warnings.push("Invalid CSP. The content attribute must be set.");
+    return { warnings, payload };
+  }
+
+  const directives = Object.fromEntries(
+    content.split(/\s*;\s*/).map((directive) => {
+      const [key, ...value] = directive.split(" ");
+      return [key, value.join(" ")];
+    })
+  );
+  payload = payload ?? {};
+  payload.directives = directives;
 
-    // TODO: Validate that CSP doesn't include `report-uri`, `frame-ancestors`, or `sandbox` directives.
+  if ("report-uri" in directives) {
+    warnings.push(
+      "The report-uri directive is not supported. Use the Content-Security-Policy-Report-Only HTTP header instead."
+    );
+  }
+  if ("frame-ancestors" in directives) {
+    warnings.push(
+      "The frame-ancestors directive is not supported. Use the Content-Security-Policy HTTP header instead."
+    );
+  }
+  if ("sandbox" in directives) {
+    warnings.push("The sandbox directive is not supported. Use the Content-Security-Policy HTTP header instead.");
   }
 
   return {
     warnings,
+    payload,
   };
 }