Full Title or Meme
The Inline Frame, or iFrame was introduced to allow isolated web pages from unrelated entities to embed content seamlessly into a web page.
- Frames and Framesets were introduced early in browser history to enable refreshing only a portion of a web page to improve responsiveness of web pages in the days of low bandwidth data communications.
- Identity features like OpenID Connect and WebAuthn 2 depends on the Cross-Origin iFrame for a seamless User Experience when identity is provided by a different web site than the Relying Party.
- This page is oriented towards the security of the user, unlike most web sites which are typically concerned only with data under their control, as this is the way that data protection laws have been written.
- DOM = Document Object Model resident in a "window" object in an HTML based user agent (typically a browser).
- COEP: Cross Origin Embedder Policy
- COOP: Cross Origin Opener Policy
- CORP: Cross Origin Resource Policy
- CORS: Cross Origin Resource Sharing
- CORB: Cross Origin Read Blocking
- Sandbox is an iFrame attribute that contains the properties listed below.
- Same Domain policy, as used above, has been replaced by policy on the same origin and site. A domain is the part after the scheme e,g, www.example.com.
- Origin is a combination of a scheme (also known as the protocol, for example HTTP or HTTPS), hostname, and port (if specified). For example, given a URL of https://www.example.com:443/foo , the "origin" is https://www.example.com:443.
- Site is the TLD and the part of the domain just before it. eg. for https://www.example.com:443/foo , the "site" is example.com.
- TLD = Top Level Domain, like .com, .us or .solutions.
- Effective TLD can be .co.jp or .com. for tips;//my-project.github.io:443 the site is my-project.github.io as getup.io is considered to be the effective tld.
- Public Suffix List defines the ETLDs.
- First Party = the Origin
- Second Party = the user on their browser
- Third Party = anyone else, typically an advertisement or an Identity Provider
- Trusted Third Party (TTP) is a web site with a certificate that makes some claim about the trustworthiness of the site.
- Advertisers have exploited the iframe and cookies to track users across multiple origin sites.
- The user is somewhat at the mercy of the web site in that the site is more interested in gaining users than in their security.
- Limitations that have been placed on iFrames can (with the exception of running plugins) be disabled by the source web site which does not fully share the user's security concerns.
- Run plug-ins
- Submit forms - disabled by allow-forms
- Change the parent web page’s URL - disabled by allow-top-navigation
- Read cookies or local storage, even if it’s from the parent domain
- Open new tabs, new windows or pop-up windows - partially disabled by allow-popups
- Access data from Origin URL - allow-same-origin
Cross Site Scripting
Cross Web Site Scripting (XSS) Attacks are a type of injection, in which malicious scripts are injected into otherwise benign and trusted websites. XSS attacks occur when an attacker uses a web application to send malicious code, generally in the form of a browser side script, to a different end user. Flaws that allow these attacks to succeed are quite widespread and occur anywhere a web application uses input from a user within the output it generates without validating or encoding it.
The SameSite cookie attribute offers defense against CSRF attacks but currently does not consider secure and insecure version of the same domain as being cross-site; because of this, a network attacker could impersonate http://site.example (or a subdomain) and use that to bypass SameSite protections on https://site.example. Changing the same-site computation to consider http://site.example and https://site.example as cross-site negates this type of attack.
- Note that WebSockets requests can send cookies but use different schemes from http(s). For purposes of this comparison wss:// and https:// are considered the same and similarly for ws:// and http://.
- To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/72a2df2a-a5f2-4d0b-8234-029e0ee884cb%40chromium.org.
iFrames bring other annoyances, like messing up the behavior of the back button or accessibility functionality. With two different teams working on the main frame and iframe, weird interactions are inevitable.
- The browser (or user agent) is now being sold to user's as an instrument of user protection. This attitude by the browser manufactures picked up relevance when Apple began advertising their privacy features to consumers in 2020 and earlier.
- The "window" interface is a pointer to an object that contains a DOM which is a collection of all the functions, namespaces, objects as well as the more commonly understood User Interface.elements.
- When we access something inside embedded window, the browser checks if the iframe has the same origin. If that’s not so then the access is denied (writing to location is an exception, it’s still permitted).
- In a tabbed browser, each tab starts out as a single window object, but can spawn additional windows with each iFrame.
- Some of the window properties of interest to this wiki (that are not deprecated) are:
- Window.isSecureContext - Read only Experimental - Indicates whether a context is capable of using features that require secure contexts.
- WindowOrWorkerGlobalScope.caches - Read only - Returns the CacheStorage object associated with the current context. This object enables functionality such as storing assets for offline use, and generating custom responses to requests.
- WindowOrWorkerGlobalScope.indexedDB - Read only - Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an IDBFactory object.
- WindowOrWorkerGlobalScope.isSecureContext - Read only - Returns a boolean indicating whether the current context is secure (true) or not (false).
- WindowOrWorkerGlobalScope.crossOriginIsolated - Read only Experimental not in non-Chrome phones or in Apple - The crossOriginIsolated read-only property of the WindowOrWorkerGlobalScope interface returns a boolean value that indicates whether a SharedArrayBuffer can be sent via a Window.postMessage() call. This value is dependent on any policy headers (see below) present in the response. (valid on 2021-03-15) These are the privileged features supported:
- SharedArrayBuffer Required for WebAssembly Threads. This is available from Android Chrome 88. Desktop version is currently enabled by default with the help of Site Isolation, but will require the cross-origin isolated state and will be disabled by default in Chrome 91.
- performance.measureUserAgentSpecificMemory() Available from Chrome 89.
- performance.now(), performance.timeOrigin Currently available in many browsers with the resolution limited to 100 microseconds or higher. With cross-origin isolation, the resolution can be 5 microseconds or higher.
- blocks modification of document.domain. - which allows communications between same-site documents
- JS Self-Profiling API Not available in any browsers on 2020-02-02
- Window.postMessage() = Provides a secure means for one window to send a string of data to another window, which need not be within the same domain as the first. (See limitations from COOP & COEP)
- The policy headers present in the response of interest to this wiki. These policy are opt-in by the Relying Party web site to enable an isolated environment called cross-origin isolated.
- Cross-Origin-Opener-Policy (COOP) require-corp - set to same-origin to ensure that both are in the same browsing context and have access to each other via DOA APIs such as window.opener.
- Cross-Origin-Embedder-Policy (COEP) same-origin - first ensure that COPR or CORS is enabled. Here is what you need to do depending on the nature of the resource:
- If the resource is expected to be loaded only from the same origin, set the Cross-Origin-Resource-Policy: same-origin header.
- If the resource is expected to be loaded only from the same site but cross origin, set the Cross-Origin-Resource-Policy: same-site header.
- If the resource is loaded from cross origin(s) under your control, set the Cross-Origin-Resource-Policy: cross-origin header if possible.
- For cross origin resources that you have no control over:
- Use the crossorigin attribute in the loading HTML tag if the resource is served with CORS.
- Ask the owner of the resource to support either CORS or CORP.
- For iframes, use CORP and COEP headers as follows: Cross-Origin-Resource-Policy: same-origin (or same-site, cross-origin depending on the context) and Cross-Origin-Embedder-Policy: require-corp.
Federated Learning of Cohorts
The FLoC API intends to provide callers (primarily ad-tech) with a "cohort label" shared by thousands of people with similar browsing habits to aid in interest-based online advertising. The browser will group people together into k-anonymous interest cohorts via purely on-device computation, and reveal the user’s cohort via script.
- This is Google's attempt to retain the advantages with targeted ads but without the same user privacy issues.
- Explainer on W3C WICG
- Explainer on Googe's support page
- Google Commits To Not Tracking Individual Users For Ad Targeting After Cookie Phase Out is a regurgitation of Google's PR. 2021-03-03
- Google's FLoC Is a Terrible Idea per the Electronic Frontier Foundation
- 3 Reasons You Might Not Want To Use Iframes is somewhat older. It is written from perspective of devs not users. It sure shows that devs never think that they cause security problems.
- Iframes as a Security Feature does actually acknowledge some of the security problems with iFrames but mostly is oriented to Relying Party.