Skip to content

fix: pass CSP nonce to lite-youtube so its shadow-DOM styles aren't blocked - #2618

Merged
Onibenjo merged 1 commit into
mainfrom
WD-37159
Jun 17, 2026
Merged

fix: pass CSP nonce to lite-youtube so its shadow-DOM styles aren't blocked#2618
Onibenjo merged 1 commit into
mainfrom
WD-37159

Conversation

@Onibenjo

@Onibenjo Onibenjo commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Done

  • Set window.liteYouTubeNonce to the per-request CSP nonce in base_index.html, just before the extra_metatags block.
    • lite-youtube@1.9.0 injects a <style> into its open shadow DOM at runtime. Our style-src directive is nonce-based with no 'unsafe-inline', so that injected style was blocked with a CSP violation and the player rendered unstyled.
    • The component reads a nonce from window.liteYouTubeNonce and stamps it onto the <style> it injects. Setting it before the deferred module upgrades the element lets the injected style satisfy our nonce-based style-src.
    • Centralised in the base template (a classic inline <script> in <head>), so it runs before the loader and covers every page that embeds a lite-youtube video without per-template edits.

Affected pages (all embed lite-youtube and extend base_index.html):
https://canonical.com/maas
https://canonical.com/microcloud
https://canonical.com/anbox-cloud
https://canonical.com/solutions/automotive
https://canonical.com/solutions/education
https://canonical.com/solutions/financial-services
https://canonical.com/solutions/infrastructure/virtualization-solutions
https://canonical.com/public-sector
https://canonical.com/company
https://canonical.com/data/spark
https://canonical.com/careers/company-culture/progression
https://canonical.com/careers/hiring-process
https://canonical.com/case-study/oediv
https://canonical.com/case-study/oediv-de
https://canonical.com/knowledge/ubuntu-and-linux/what-is-linux-kernel
https://canonical.com/knowledge/security-and-compliance/what-is-software-supply-chain-security
https://canonical.com/knowledge/security-and-compliance/open-source-security
https://canonical.com/knowledge/internet-of-things/what-is-iot-security
https://canonical.com/knowledge/internet-of-things/yocto-vs-ubuntu-core

QA

Issue / Card

Fixes WD-37159

Screenshots

[if relevant, include a before/after of the player styling]

Copilot AI review requested due to automatic review settings June 16, 2026 11:38
@webteam-app

webteam-app commented Jun 16, 2026

Copy link
Copy Markdown

Demo

Jenkins

demos.haus

Copilot AI reviewed Jun 16, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR addresses a Content Security Policy (CSP) styling issue with lite-youtube@1.9.0 by making the per-request CSP nonce available to the component so it can nonce its runtime-injected shadow-DOM <style> tag and avoid style-src violations.

Changes:

  • Set window.liteYouTubeNonce to the request’s csp_nonce in the base HTML head so all pages inheriting base_index.html benefit automatically.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Comment thread templates/base_index.html
@codecov

codecov Bot commented Jun 16, 2026 •
edited
Loading

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 78.58%. Comparing base (0c0c3ec) to head (2bf7b69).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files 
@@           Coverage Diff           @@
##             main    #2618   +/-   ##
=======================================
  Coverage   78.58%   78.58%           
=======================================
  Files          16       16           
  Lines        1975     1975           
=======================================
  Hits         1552     1552           
  Misses        423      423
Flag Coverage Δ
python 78.58% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@Onibenjo Onibenjo added run-percy Manually trigger for percy workflow and removed run-percy Manually trigger for percy workflow labels Jun 16, 2026
@Onibenjo
Onibenjo merged commit 7abea0c into main Jun 17, 2026
18 checks passed
@Onibenjo
Onibenjo deleted the WD-37159 branch June 17, 2026 08:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@Skazitron Skazitron Skazitron approved these changes

Assignees

No one assigned

Labels

Review: Code +1 Review: QA +1

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@Onibenjo @webteam-app @Skazitron