ViewTransitions (v3.2.0+) unusable with a content security policy

[budparr]

Astro Info

Astro                    v3.2.0
Node                     v20.6.1
System                   macOS (arm64)
Package Manager          npm
Output                   hybrid
Adapter                  @astrojs/cloudflare
Integrations             @astrojs/tailwind

Also tested in v3.4.0

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

The recent addition of a Route Announcer in <ViewTransitions /> in 3.2.0 appends a div with a style declaration. That inline style breaks content security policy without unsafe-inline so makes view transitions unusable with a CSP. While it's possible to declare unsafe-inline for styles in the CSP, that's not optimal from a security standpoint.

To reproduce, run Astro in example below, click on a new page and inspect. You'll find:

<div aria-live="assertive" aria-atomic="true" style="position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px">About Page</div>

Developers should have an option at least to render the styling in a stylesheet, or opt-out so they can implement on their own.

What's the expected result?

I think Announce should be optional—on by default with an option to not include—so that developers can implement in a manner appropriate for their needs.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-zxgdrp-6sx3md?file=src%2Fpages%2Findex.astro

Participation

• I am willing to submit a pull request for this issue.

[matthewp]

Ah, ok yeah good call out. I think we can probably put this into the stylesheet we already have. I'll add it next week.

[lilnasy]

Does this CSP directive help?

style-src-attr 'unsafe-hashes' 'sha256-scTtdlOdXHagPUz8jUu+nyUURgOE9FGWDkse4ziLZw4='

[budparr]

@lilnasy It's all relative. Any unsafe... directive is not optimal, though it could be okay on some sites. This came up for me on a site that I need to lock down pretty strictly (at least as much as I can do in an Astro context).

[martinburger]

Has this been fixed in Astro v4.2.1? I ask because I think I am encountering this problem.

Content-Security-Policy: The page’s settings blocked the loading of a resource at inline (“style-src”).

<style>.astro-route-announcer{position:absolute;left:0;top:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;width:1px;height:1px}@keyframes astroFadeInOut{0%{opacity:1}to{opacity:0}}@keyframes astroFadeIn{0%{opacity:0}}@keyframes astroFadeOut{to{opacity:0}}@keyframes astroSlideFromRight{0%{transform:translate(100%)}}@keyframes astroSlideFromLeft{0%{transform:translate(-100%)}}@keyframes astroSlideToRight{to{transform:translate(100%)}}@keyframes astroSlideToLeft{to{transform:translate(-100%)}}@media (prefers-reduced-motion){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}[data-astro-transition-scope]{animation:none!important}}
[...]
	animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-j5f6et4o-2"] { view-transition-name: astro-j5f6et4o-2; }@layer astro { ::view-transition-old(astro-j5f6et4o-2) {

[martinburger]

At least in v4.2.4, this has not been fixed yet.