Re: [csswg-drafts] [css-view-transitions-2] security/privacy considerations with cross-origin css (#8889)

The features which need navigation specific CSS can be done using script:

* Customize based on destination URL: The user navigates from a list to a details page. The transitioning element needs to be the list item whose details page is the navigation target. You can do that using the [`navigate`](https://developer.mozilla.org/en-US/docs/Web/API/NavigateEvent) event which provides you the destination URL.

   ```js
      navigation.addEventListener("navigate", (event) => {
          if (isUrlForItem1(event.destination.url)
             item1.style.viewTransitionName = "hero-image";
      });
   ```

   The same use-case applies when going back from the details page to the list. The new Document needs to know the source URL. Not sure if this is doable using the Navigation API but we can add that (same-origin only).

* Customize based on navigation type: Author doesn't want to do a View Transition for reload. You can do that using [`navigationType`](https://developer.mozilla.org/en-US/docs/Web/API/NavigateEvent/navigationType) on the `navigate` event.

The motivation for navigation specific CSS is to enable handling these use-cases declaratively. This was highlighted during the [TAG review](https://github.com/w3ctag/design-reviews/issues/748#:~:text=were%20our%20thoughts%3A-,We%20like%20that%20MPA%20transitions%20are%20declarative%2C%20and%20would%20love%20to%20see%20a%20declarative%20syntax%20for%20SPA%20transitions%20too,-%2C%20as%20right%20now). @LeaVerou @atanassov FYI.

So I think we should figure out how to securely allow navigation specific CSS. Just want to make it explicit, 3rd party JS is already assumed to have these capabilities and we're not trying to protect against that.

Other than the blanket html opt-in idea above, one other option is to limit navigation specific CSS to stylesheets which are same-origin. We already know the source of a stylesheet. If its fetched from a cross-origin link, then navigation specific CSS is ignored by default. Unless the author adds an opt-in, for example :

```html
<link rel="stylesheet" href="styles.css" navigation-css="enabled">
```

So its an html opt-in but lets the author decide which stylesheets are opted-in. In case some site is using a trusted cross-origin domain for stashing their resources.

-- 
GitHub Notification of comment by khushalsagar
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/8889#issuecomment-1570825160 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Wednesday, 31 May 2023 19:34:24 UTC