wip

Author: ganyicz

packages/csp/src/directives/x-html.js

@@ -1,5 +1,6 @@
 import { directive } from 'alpinejs/src/directives'
+import { handleError } from 'alpinejs/src/utils/error'
 
-directive('html', () => {
-    throw new Error('Using the x-html directive is prohibited')
+directive('html', (el, { expression }) => {
+    handleError(new Error('Using the x-html directive is prohibited in the CSP build'), el)
 })

packages/csp/src/evaluator.js

@@ -1,6 +1,6 @@
 import { generateEvaluatorFromFunction, shouldAutoEvaluateFunctions } from 'alpinejs/src/evaluator'
 import { closestDataStack, mergeProxies } from 'alpinejs/src/scope'
-import { tryCatch } from 'alpinejs/src/utils/error'
+import { handleError, tryCatch } from 'alpinejs/src/utils/error'
 import { generateRuntimeFunction } from './parser'
 import { injectMagics } from 'alpinejs/src/magics'
 
@@ -13,13 +13,15 @@ export function cspEvaluator(el, expression) {
     }
 
     if (el instanceof HTMLIFrameElement) {
-        console.warn('Alpine CSP Error: Evaluating expressions on an iframe is prohibited')
-        throw new Error('Alpine CSP Error: Evaluating expressions on an iframe is prohibited')
+        handleError(new Error('Evaluating expressions on an iframe is prohibited in the CSP build'), el)
+
+        return;
     }
 
     if (el instanceof HTMLScriptElement) {
-        console.warn('Alpine CSP Error: Evaluating expressions on a script is prohibited')
-        throw new Error('Alpine CSP Error: Evaluating expressions on a script is prohibited')
+        handleError(new Error('Evaluating expressions on a script is prohibited in the CSP build'), el)
+
+        return;
     }
 
     let evaluator = generateEvaluator(el, expression, dataStack)

packages/csp/src/index.js

@@ -31,9 +31,13 @@ import { reactive, effect, stop, toRaw } from '@vue/reactivity'
 Alpine.setReactivityEngine({ reactive, effect, release: stop, raw: toRaw })
 
 import 'alpinejs/src/magics/index'
-
 import 'alpinejs/src/directives/index'
 
-import './directives/x-html' // Disable
+/**
+ * The `x-html` directive needs to be disabled here
+ * because it is not CSP friendly. To disable it,
+ * we'll override it with noop implementation.
+ */
+import './directives/x-html'
 
 export default Alpine

packages/csp/src/parser.js

@@ -1,7 +1,12 @@
+let safemap = new WeakMap()
 let globals = new Set()
-Object.getOwnPropertyNames(globalThis).forEach(key => globals.add(globalThis[key]))
 
-let safemap = new WeakMap()
+Object.getOwnPropertyNames(globalThis).forEach(key => {
+    // Prevent Safari deprecation warning...
+    if (key === 'styleMedia') return
+
+    globals.add(globalThis[key])
+})
 
 class Token {
     constructor(type, value, start, end) {
@@ -839,7 +844,7 @@ class Evaluator {
                     scope[node.left.name] = value;
                     return value;
                 } else if (node.left.type === 'MemberExpression') {
-                    throw new Error('Property assignments are prohibited')
+                    throw new Error('Property assignments are prohibited in the CSP build')
                 }
                 throw new Error('Invalid assignment target');
 
@@ -872,7 +877,7 @@ class Evaluator {
         ]
 
         if (blacklist.includes(keyword)) {
-            throw new Error(`Accessing "${keyword}" is prohibited`)
+            throw new Error(`Accessing "${keyword}" is prohibited in the CSP build`)
         }
     }
 
@@ -890,11 +895,11 @@ class Evaluator {
         }
 
         if (prop instanceof HTMLIFrameElement || prop instanceof HTMLScriptElement) {
-            throw new Error('Accessing iframes and scripts is prohibited')
+            throw new Error('Accessing iframes and scripts is prohibited in the CSP build')
         }
 
         if (globals.has(prop)) {
-            throw new Error('Accessing global variables is prohibited')
+            throw new Error('Accessing global variables is prohibited in the CSP build')
         }
 
         safemap.set(prop, true)