Giter Site home page Giter Site logo

Comments (6)

Malvoz avatar Malvoz commented on August 18, 2024

This could be a feature policy, e.g:

allow attribute:
<iframe src="https://example.com" allow="spatnav">

or in a header field:
Feature-Policy: spatnav 'self' https://example.com;

Alternatively spatnav could be enabled by default for all sources in CSP's frame-src (and object-src) fetch directives? But that would limit control of trusted sources to only iframe and object respectively. There is the drafted navigate-to navigation directive, but I'm not totally sure how that works.

And although CSP is good practice, it would force developers to enable CSP to provide spatial navigation for iframed content. Which probably isn't ideal?

from spatial-navigation.

frivoal avatar frivoal commented on August 18, 2024

@Malvoz Thanks for the feedback.

The feature policy approach looks nice to me, but I am not an expert in this area, and don't have all the background needed to pick the best way forward.

I'm going to leave this issue open for a while, and hope to gather feedback from more people.

from spatial-navigation.

annevk avatar annevk commented on August 18, 2024

Feature Policy makes sense for this (for enabling something that's by default disabled).

Is there an attack vector in the other direction? Whereby the embedder can direct the navigation such that it makes clickjacking easier?

from spatial-navigation.

frivoal avatar frivoal commented on August 18, 2024

@annevk with the possible exception of window.navigate(), I don't see what spatnav APIs can do that the .focus() method couldn't. It can influence where the focus goes, but within a single document, authors are already free to move it wherever.

For window.navigate(), I suppose that it would be possible, knowing the layout of an other site, to put that site in an iframe, use .focus() to move the focus in the embedder to a focusable element that is near particular interesting click target in the embeddee, and then use window.navigate() to get that element focused. However, It only gets the element focused, it does not click/activate it.

I don't believe that merely focusing an element is a security vulnerability, but maybe I just lack imagination.

If we do want to curtail this, we could do it with 2 steps:

  1. navigating towards an iframe always focuses the iframe, rather than its content. This is already the case if the iframe is scrollable, but we could make non scrollable iframes focusable as well.
  2. unlike manual navigation, window.navigate() cannot move the focus from an iframe to its content, and is a noop (or throws an exception) if you try.

That would limit the usefulness of window.navigate() in general, and in particular make it insufficient to drive the test suite.

from spatial-navigation.

jihyerish avatar jihyerish commented on August 18, 2024

I agree with the feature policy is a good approach to solve the security issue in spatial navigation.
By default, the focus can move to the iframe elements which are the same-origin.
But for the iframe with spatial-navigation feature is given to * for the allow attribute (Feature Policy API), the focus can move inside the cross-origin iframe elements.

Detailed approach for the feature policy would be as below:


Default policy: spatial-navigation 'self'

Feature-Policy HTTP header

A page can declare the spatial navigation feature in its HTTP headers as follows:

Feature policy: spatial-navigation 'self'

It means that only same-origin iframe elements are allowed for the spatial navigation.

iframe allow attribute

The feature can be specified for a single iframe element using allow attribute as below:

<iframe src="https://example.com..." allow="spatial-navigation 'none'"></iframe>

This will block the spatial navigation feature for the top-level and nested iframe elements.

from spatial-navigation.

frivoal avatar frivoal commented on August 18, 2024

Issue migrated to w3c/csswg-drafts#3390

from spatial-navigation.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.