Difference between revisions of "Cross-Origin iFrame"

From MgmtWiki
Jump to: navigation, search
Line 9: Line 9:
* DOM = Document Object Model resident in a "window" object in an HTML based user agent (typically a browser).
* DOM = Document Object Model resident in a "window" object in an HTML based user agent (typically a browser).
* [https://wicg.github.io/cross-origin-embedder-policy/COEP: Cross Origin Embedder Policy]
* [https://wicg.github.io/cross-origin-embedder-policy/COEP: COEP: Cross Origin Embedder Policy]
* [https://github.com/whatwg/html/pull/5334/files COOP: Cross Origin Opener Policy]
* [https://github.com/whatwg/html/pull/5334/files COOP: Cross Origin Opener Policy]
* [https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP) CORP: Cross Origin Resource Policy]
* [https://developer.mozilla.org/docs/Web/HTTP/Cross-Origin_Resource_Policy_(CORP) CORP: Cross Origin Resource Policy]

Revision as of 22:41, 12 March 2021

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.
  • Early on security was addressed If they’re not from the same domain, the parent HTML document and the iframe don’t have access to each other’s CSS styles, DOM or JavaScript functions, cookies, or local storage.
  • 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.



  • 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.
  1. Run plug-ins
  2. Submit forms - disabled by allow-forms
  3. Change the parent web page’s URL - disabled by allow-top-navigation
  4. Read cookies or local storage, even if it’s from the parent domain
  5. Open new tabs, new windows or pop-up windows - partially disabled by allow-popups
  6. Run any JavaScript (even if it would only impact what’s inside the iframe) - disabled by allow-scripts.
  7. 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.

Client-side script, or DOM based XSS attacks are downloaded (or locally modified) into the DOM so that JavaScript from the web site can be made to perform malicious activity on behalf of an attacker that is not known to the Relying Party web site. This and similar client-side attacks have been documented and weaponized for running by "script kiddies".

Scheme-full SameSite

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.

Other Annoyances

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.
  • 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:
  1. Window.isSecureContext - Read only Experimental - Indicates whether a context is capable of using features that require secure contexts.
  2. 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.
  3. WindowOrWorkerGlobalScope.indexedDB - Read only - Provides a mechanism for applications to asynchronously access capabilities of indexed databases; returns an IDBFactory object.
  4. WindowOrWorkerGlobalScope.isSecureContext - Read only - Returns a boolean indicating whether the current context is secure (true) or not (false).
  5. 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:
    1. 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.
    2. performance.measureUserAgentSpecificMemory() Available from Chrome 89.
    3. 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.
    4. blocks modification of document.domain. - which allows communications between same-site documents
    5. JS Self-Profiling API Not available in any browsers on 2020-02-02
  • 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.
  1. 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.
  2. 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:
    1. If the resource is expected to be loaded only from the same origin, set the Cross-Origin-Resource-Policy: same-origin header.
    2. 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.
    3. If the resource is loaded from cross origin(s) under your control, set the Cross-Origin-Resource-Policy: cross-origin header if possible.
    4. For cross origin resources that you have no control over:
      1. Use the crossorigin attribute in the loading HTML tag if the resource is served with CORS.
      2. Ask the owner of the resource to support either CORS or CORP.
    5. 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.