Merge pull request #49 from FriendsOfREDAXO/copilot/fix-inline-styles-security-headers

Fix CSP inline style violations - Remove inline styles for Content Security Policy compliance

Author: skerbis

.gitignore

@@ -13,3 +13,5 @@ modules.xml
 .idea/encodings.xml
 *.ipr
 node_modules/
+build/dist/
+build/node_modules/

assets/vidstack.js

@@ -16243,7 +16243,7 @@
 
         ${DefaultControlsSpacer()}
 
-        <media-controls-group class="vds-controls-group" style="pointer-events: none;">
+        <media-controls-group class="vds-controls-group">
           ${[
         DefaultControlsSpacer(),
         DefaultPlayButton({ tooltip: "top" }),
@@ -21180,7 +21180,7 @@
     static tagName = "media-slider";
   };
   var videoTemplate = /* @__PURE__ */ createTemplate(
-    `<video muted playsinline preload="none" style="max-width: unset;"></video>`
+    `<video muted playsinline preload="none"></video>`
   );
   var MediaSliderVideoElement = class extends Host(HTMLElement, SliderVideo) {
     static tagName = "media-slider-video";

assets/vidstack_helper.css

@@ -187,3 +187,12 @@ noscript  .js .a11y-content {
     background-color: #117a8b;
     color: white;
 }
+
+/* CSP-compliant styles to replace inline styles */
+.vds-controls-group {
+    pointer-events: none;
+}
+
+media-slider-video video {
+    max-width: unset;
+}

assets/vs_js_out.js

@@ -11556,7 +11556,7 @@
 
         ${DefaultControlsSpacer()}
 
-        <media-controls-group class="vds-controls-group" style="pointer-events: none;">
+        <media-controls-group class="vds-controls-group">
           ${[
         DefaultControlsSpacer(),
         DefaultPlayButton({ tooltip: "top" }),
@@ -16555,7 +16555,7 @@
         static tagName = "media-slider";
       };
       videoTemplate = /* @__PURE__ */ createTemplate(
-        `<video muted playsinline preload="none" style="max-width: unset;"></video>`
+        `<video muted playsinline preload="none"></video>`
       );
       MediaSliderVideoElement = class extends Host(HTMLElement, SliderVideo) {
         static tagName = "media-slider-video";

build/README.md

@@ -0,0 +1,42 @@
+# Vidstack Build Directory
+
+This directory contains the build configuration and scripts for the Vidstack addon.
+
+## Building
+
+To build the assets, run:
+
+```bash
+npm install
+npm run build
+```
+
+This will:
+1. Bundle the vidstack components (`vidstack.js`)
+2. Bundle the vidstack JavaScript (`vs_js_out.js`)
+3. Remove inline styles for CSP compliance
+
+## CSP Compliance
+
+The `remove-inline-styles.js` script automatically removes inline styles from the built files to ensure Content Security Policy (CSP) compliance. The following inline styles are removed:
+
+- `style="pointer-events: none;"` from `media-controls-group` elements
+- `style="max-width: unset;"` from `video` elements
+
+These styles are replaced by CSS rules in `assets/vidstack_helper.css`:
+
+```css
+.vds-controls-group {
+    pointer-events: none;
+}
+
+media-slider-video video {
+    max-width: unset;
+}
+```
+
+## Output
+
+The built files are placed in the `dist/` directory and should be copied to the `assets/` directory for deployment.
+
+**Note:** The `dist/` and `node_modules/` directories are excluded from git via `.gitignore`.

build/package.json

@@ -9,6 +9,7 @@
     "scripts": {
         "build_components": "esbuild config/vs_components.js --bundle --outfile=dist/vidstack.js",
         "build_js": "esbuild config/vs_js.js --bundle --outfile=dist/vs_js_out.js",
-        "build": "npm run build_components && npm run build_js"
+        "remove_inline_styles": "node remove-inline-styles.js",
+        "build": "npm run build_components && npm run build_js && npm run remove_inline_styles"
     }
 }

build/remove-inline-styles.js

@@ -0,0 +1,59 @@
+#!/usr/bin/env node
+
+/**
+ * Post-build script to remove inline styles for CSP compliance
+ * This script removes inline style attributes that violate Content Security Policy
+ */
+
+const fs = require('fs');
+const path = require('path');
+
+const files = [
+  './dist/vidstack.js',
+  './dist/vs_js_out.js'
+];
+
+console.log('Removing inline styles for CSP compliance...\n');
+
+files.forEach(file => {
+  const filePath = path.join(__dirname, file);
+  
+  if (!fs.existsSync(filePath)) {
+    console.log(`⚠️  File not found: ${file}`);
+    return;
+  }
+
+  let content = fs.readFileSync(filePath, 'utf8');
+  let modified = false;
+
+  // Remove pointer-events: none inline style
+  const beforePointerEvents = content;
+  content = content.replace(
+    /(<media-controls-group[^>]*class="vds-controls-group"[^>]*)\s+style="pointer-events:\s*none;?"/gi,
+    '$1'
+  );
+  if (content !== beforePointerEvents) {
+    console.log(`✓ Removed pointer-events inline style from ${file}`);
+    modified = true;
+  }
+
+  // Remove max-width: unset inline style
+  const beforeMaxWidth = content;
+  content = content.replace(
+    /(<video[^>]*)\s+style="max-width:\s*unset;?"/gi,
+    '$1'
+  );
+  if (content !== beforeMaxWidth) {
+    console.log(`✓ Removed max-width inline style from ${file}`);
+    modified = true;
+  }
+
+  if (modified) {
+    fs.writeFileSync(filePath, content, 'utf8');
+    console.log(`✓ Updated ${file}\n`);
+  } else {
+    console.log(`ℹ No inline styles found in ${file}\n`);
+  }
+});
+
+console.log('Done! All inline styles removed for CSP compliance.');