PHPackages friends-of-hyva/magento2-paradise-csp-workshop-frontend - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. friends-of-hyva/magento2-paradise-csp-workshop-frontend ActiveMagento2-module[Utility & Helpers](/categories/utility) friends-of-hyva/magento2-paradise-csp-workshop-frontend ======================================================= Hyva Developer Paradise - Frontend module with theme extensions 1.0.0(3mo ago)031OSL-3.0 Since Apr 8Compare [ Source](https://github.com/friends-of-hyva/magento2-paradise-csp-workshop-frontend)[ Packagist](https://packagist.org/packages/friends-of-hyva/magento2-paradise-csp-workshop-frontend)[ RSS](/packages/friends-of-hyva-magento2-paradise-csp-workshop-frontend/feed)WikiDiscussions Synced 3w ago READMEChangelog (1)Dependencies (2)Versions (2)Used By (1) Hyva Developer Paradise - Frontend Module ========================================= [](#hyva-developer-paradise---frontend-module) This module contains the **Paradise CSP Learning Hub** - an interactive educational experience teaching developers how to migrate code to strict Content Security Policy (CSP) compliance. Module Name ----------- [](#module-name) `HyvaParadise_Frontend` Installation ------------ [](#installation) Install via the metapackage: ``` composer require friends-of-hyva/magento2-paradise-csp-workshop-meta ``` Or install directly: ``` composer require friends-of-hyva/magento2-paradise-csp-workshop-frontend bin/magento setup:upgrade --keep-generated ``` ### If the package isn't on Packagist yet [](#if-the-package-isnt-on-packagist-yet) If `composer require` can't find the package, add the GitHub repository manually to your project's `composer.json`. ``` { "repositories": [ { "type": "vcs", "url": "https://github.com/friends-of-hyva/magento2-paradise-csp-workshop-frontend" } ] } ``` Then run: ``` composer require friends-of-hyva/magento2-paradise-csp-workshop-frontend bin/magento setup:upgrade --keep-generated ``` Paradise CSP Learning Hub ------------------------- [](#paradise-csp-learning-hub) A learning experience that teaches CSP migration through **interactive fixing**: - **URL**: `/paradise/` - **Status**: Contains intentionally unsafe code that students fix using the hyva-csp-helper.php tool - **Learning Method**: As students apply migrations, features unlock (interactive feedback loop) ### The Concept [](#the-concept) The learning hub starts with **broken code** demonstrating all 8 CSP anti-patterns: 1. Inline expressions in @click 2. Alpine negation operators 3. x-model directives 4. Method arguments in attributes 5. Conditional class objects 6. Complex template expressions 7. Inline script registration 8. Alpine component registration Students run the migration tool, which auto-fixes most patterns. As they do, the page becomes more interactive - creating a powerful learning experience. Features -------- [](#features) ### 1. Pattern Gallery [](#1-pattern-gallery) - **8 CSP migration patterns** with before/after code examples - Toggle between unsafe and CSP-compliant versions - Explanation of why each pattern matters ### 2. Interactive Quiz [](#2-interactive-quiz) - **15 questions** covering CSP concepts and the Hyvä Developers Paradise event - Multiple difficulty levels (easy, medium) - Instant feedback on answers - Progress bar tracking current question - Auto-advance after correct answers with pause/resume control - Wrong answer review on completion - Quiz restart functionality ### 3. Resources Section [](#3-resources-section) - Links to Hyva CSP documentation - Migration tool guide - PCI-DSS 4.0 information How to Use (For Students) ------------------------- [](#how-to-use-for-students) ### Step 1: Visit the Learning Hub [](#step-1-visit-the-learning-hub) ``` https://yoursite.local/paradise/ ``` ### Step 2: Notice the Broken UI [](#step-2-notice-the-broken-ui) - Some buttons don't work - Dropdowns aren't interactive - Quiz might not function properly - **This is intentional!** ### Step 3: Run the Migration Tool [](#step-3-run-the-migration-tool) ``` php tools/hyva-csp-helper.php ``` ### Step 4: Refresh and See Features Unlock [](#step-4-refresh-and-see-features-unlock) - Navigation buttons now work - Dropdowns become interactive - Quiz becomes fully functional - Visual feedback appears ### Step 5: Learn and Understand [](#step-5-learn-and-understand) Each fixed pattern teaches a CSP migration technique you'll use in real code. Directory Structure ------------------- [](#directory-structure) ``` magento2-paradise-frontend/ ├── Api/ │ ├── PatternDataInterface.php # Pattern data contract │ └── QuestionDataInterface.php # Question data contract ├── Controller/ │ └── Index/ │ └── Index.php # Route handler for /paradise/ ├── Model/ │ ├── PatternData.php # 8 CSP patterns with code examples │ └── QuestionData.php # 15 quiz questions ├── ViewModel/ │ ├── PatternData.php # View model wrapper for patterns │ └── QuestionData.php # View model wrapper for questions ├── etc/ │ ├── module.xml │ └── frontend/ │ ├── di.xml # Dependency injection │ └── routes.xml # /paradise/ route ├── view/frontend/ │ ├── layout/ │ │ ├── paradise_index_index.xml # Page layout for /paradise/ │ │ └── cms_index_index.xml # Homepage link injection │ ├── templates/ │ │ ├── learning-hub.phtml # Main template │ │ ├── homepage-link.phtml # CMS homepage banner │ │ └── sections/ │ │ ├── broken-notice.phtml # Initially visible warning banner │ │ ├── patterns.phtml # Pattern gallery (8 patterns) │ │ ├── quiz.phtml # Interactive quiz (15 questions) │ │ └── learn-more.phtml # Resources section │ └── web/ │ └── images/ │ └── hero-paradise-csp.svg # Hero image ├── composer.json ├── registration.php ├── COPYING.txt ├── LICENSE.txt └── SECURITY.md ``` Technical Details ----------------- [](#technical-details) ### Patterns Included [](#patterns-included) \#PatternInitial ProblemAfter Migration1Inline expressions in @clickCode in event handlers blockedNavigation works2Negation operator`!open` not supported in Alpine CSPToggles work3x-model directiveNot available in Alpine CSP buildDropdowns interactive4Method arguments in @clickArguments evaluated as expressionsData passed via `data-*`5Conditional class objectsInline object literals not allowedClasses from methods6Complex template expressionsDynamic array access unsafeExpressions in methods7Inline script registrationScripts blocked without nonce/hash`registerInlineScript()` added8Alpine component registrationComponents not registered via `alpine:init`Proper registration pattern### Data Models [](#data-models) **PatternData** (`Model/PatternData.php`): - 8 patterns with unsafe/safe code examples - Explanations and difficulty levels per pattern **QuestionData** (`Model/QuestionData.php`): - 15 quiz questions (10 CSP technical + 5 Hyvä Developers Paradise) - Multiple choice options with correct answer tracking - Learning explanations per question - Difficulty assignments (easy/medium) ### Alpine Components [](#alpine-components) **`paradisePatterns()`** (`sections/patterns.phtml`): - Renders all 8 patterns in a 2-column grid - Toggles between unsafe and safe code per pattern - Data injected server-side via `json_encode()` **`paradiseQuiz()`** (`sections/quiz.phtml`): - Shuffles questions on init - Tracks current question index and score - Auto-advances after correct answers (with pause/resume) - Shows wrong answer review on completion - Supports full quiz restart Both components are registered via `window.addEventListener('alpine:init', ...)` and `$hyvaCsp->registerInlineScript()` - demonstrating patterns 7 and 8 directly in the module's own code. CSP Compliance -------------- [](#csp-compliance) The learning hub itself demonstrates CSP compliance: - No `unsafe-eval` - All inline scripts registered with `$hyvaCsp->registerInlineScript()` - Alpine CSP-compatible patterns throughout - Data passed via `json_encode()` and `data-*` attributes - Components registered via `alpine:init` PCI-DSS 4.0 Context ------------------- [](#pci-dss-40-context) This module addresses **PCI-DSS 4.0** compliance requirements (effective April 1, 2025): - Requires strict CSP on payment pages - Eliminates `unsafe-eval` vulnerability - Makes payment processing secure Dependencies ------------ [](#dependencies) - Magento Framework 102.0+ or 103.0+ - Hyva Theme Module 1.2.28+ - Alpine.js (CSP build, provided by Hyva theme) License ------- [](#license) [Open Software License ("OSL") v. 3.0](LICENSE.txt) Support ------- [](#support) - Hyva Documentation: - Paradise Event: - Community: Hyva Slack & Discord ### Health Score 32 — LowBetter than 69% of packages Maintenance80 Actively maintained with recent releases Popularity3 Limited adoption so far Community6 Small or concentrated contributor base Maturity34 Early-stage or recently created project How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Unknown Total 1 Last Release 107d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/1905417db5fbd31a61553b29bd441fdc66945da7cfb14f1b20a72275c68184e8?d=identicon)[vinai](/maintainers/vinai) ![](https://www.gravatar.com/avatar/1548630acefd0c1ac8002a37135d67741307f978296ac628422e3923b7a3766b?d=identicon)[JeroenBoersma](/maintainers/JeroenBoersma) ### Embed Badge ![Health badge](/badges/friends-of-hyva-magento2-paradise-csp-workshop-frontend/health.svg) ``` [![Health](https://phpackages.com/badges/friends-of-hyva-magento2-paradise-csp-workshop-frontend/health.svg)](https://phpackages.com/packages/friends-of-hyva-magento2-paradise-csp-workshop-frontend) ``` ### Alternatives [nosto/module-nostotagging Increase your conversion rate and average order value by delivering your customers personalized product recommendations throughout their shopping journey. 27703.7k4](/packages/nosto-module-nostotagging)[myparcelnl/magento A Magento 2 module that creates MyParcel labels 1860.2k](/packages/myparcelnl-magento)[loki/magento2-components Core module for defining Alpine.js components with advanced AJAX features 1011.8k26](/packages/loki-magento2-components)[mage-os/module-llm-txt AI-powered LLMs.txt generation for Magento 2 / Mage-OS stores. Help AI systems understand your store with OpenAI-generated content. 234.4k](/packages/mage-os-module-llm-txt)[mage-os/module-rma Return Merchandise Authorization 214.0k](/packages/mage-os-module-rma)[jajuma/awesomehyva This Magento 2 extension allows using Font Awesome 5 icons with Hyvä Themes 1354.7k](/packages/jajuma-awesomehyva) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)