[iframe] Support allowed-origins attribute

kojiishi · chromium-wpt-export-bot · commit 77a48cf13391 · 2026-07-17T01:03:16.000-07:00
This patch support the `allowed-origins` attribute of the `<meta>` element for responsively-sized iframes. The addition of this attribute is discussed with the security team, and is currently being discussed at WHATWG[1]. This attribute has the same syntax as CSP `frame-ancestors`, and that it reuses the underlying logic. It restricts the effect of `responsive-embedded-sizing` meta tag by the origin of the container. All the changes are under an experimental runtime flag. [1]: whatwg/html#12444 (comment) Bug: 418397278 Change-Id: I2af4c4d4e80e1a3efb8b52ad512f1493157d01b8 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/8084061 Reviewed-by: Kent Tamura <tkent@chromium.org> Commit-Queue: Koji Ishii <kojii@chromium.org> Auto-Submit: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1663715}
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-400x200root.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-400x200root.html
@@ -10,5 +10,5 @@
   box-sizing: border-box;
 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-allowed-origins-missing.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-allowed-origins-missing.html
@@ -0,0 +1,8 @@
+<!doctype HTML>
+<head>
+<style>
+ * { margin: 0 }
+</style>
+<meta name="responsive-embedded-sizing">
+</head>
+<div style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-allowed-origins.sub.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-allowed-origins.sub.html
@@ -0,0 +1,8 @@
+<!doctype HTML>
+<head>
+<style>
+ * { margin: 0 }
+</style>
+<meta name="responsive-embedded-sizing" allowed-origins="{{GET[allowed]}}">
+</head>
+<div style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-dom-content-loaded.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-dom-content-loaded.html
@@ -8,7 +8,7 @@
   box-sizing: border-box;
 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
 <div id="target" style="width: 100px">
   <img src="slow-image.py?name=1x1-navy.png" width="1" height="1">
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-icb.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-icb.html
@@ -12,7 +12,7 @@
   box-sizing: border-box;
 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 <div id="target"></div>
 <script>
 window.addEventListener('message', e => {
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-after-head.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-after-head.html
@@ -9,7 +9,7 @@
   before `body`, should be inserted to the `head` element.
   https://html.spec.whatwg.org/multipage/parsing.html#the-after-head-insertion-mode
 -->
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 <body>
 <div style="width: 100px; height: 400px"></div>
 </body>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append-after-body.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append-after-body.html
@@ -8,6 +8,7 @@
 <script>
 const meta = document.createElement('meta');
 meta.name = "responsive-embedded-sizing";
+meta.setAttribute('allowed-origins', '*');
 document.head.appendChild(meta);
 </script>
 <div style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append-to-doc.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append-to-doc.html
@@ -6,6 +6,7 @@
 <script>
 const meta = document.createElement('meta');
 meta.name = "responsive-embedded-sizing";
+meta.setAttribute('allowed-origins', '*');
 document.documentElement.appendChild(meta);
 </script>
 </head>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-append.html
@@ -6,6 +6,7 @@
 <script>
 const meta = document.createElement('meta');
 meta.name = "responsive-embedded-sizing";
+meta.setAttribute('allowed-origins', '*');
 document.head.appendChild(meta);
 </script>
 </head>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-name-change-after-body.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-name-change-after-body.html
@@ -3,7 +3,7 @@
 <style>
 * { margin: 0 }
 </style>
-<meta name="name">
+<meta name="name" allowed-origins="*">
 </head>
 <body>
 <script>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-name-change.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-name-change.html
@@ -3,7 +3,7 @@
 <style>
 * { margin: 0 }
 </style>
-<meta name="name">
+<meta name="name" allowed-origins="*">
 <script>
 const meta = document.getElementsByTagName('meta')[0];
 meta.name = 'responsive-embedded-sizing';
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-remove.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-remove.html
@@ -3,7 +3,7 @@
 <style>
  * { margin: 0 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 <script>
 document.querySelector('meta[name="responsive-embedded-sizing"]').remove();
 </script>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-write.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-dynamic-write.html
@@ -4,7 +4,7 @@
 * { margin: 0 }
 </style>
 <script>
-document.write('<meta name="responsive-embedded-sizing">');
+document.write('<meta name="responsive-embedded-sizing" allowed-origins="*">');
 </script>
 </head>
 <div style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-in-body.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-meta-in-body.html
@@ -6,10 +6,10 @@
 </head>
 <body>
 <!-- `meta` elements in `body` should not enable responsive sizing. -->
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 <!-- `head` in `body` should be a parse error and be ignored. -->
 <head>
-  <meta name="responsive-embedded-sizing">
+  <meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
 <script>
 const meta = document.createElement('meta');
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-navigation.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-navigation.html
@@ -1,6 +1,6 @@
 <!doctype HTML>
 <head>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 <style>
 body { margin: 0; }
 #box { width: 100px; height: 200px; background: blue; }
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-request-resize.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-request-resize.html
@@ -3,7 +3,7 @@
 <style>
 * { margin: 0 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
 <div id="target"></div>
 <script>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents-slow.html b/css/css-sizing/responsive-iframe/resources/iframe-contents-slow.html
@@ -15,6 +15,6 @@
   box-sizing: border-box;
 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
 <div id="target" style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/resources/iframe-contents.html b/css/css-sizing/responsive-iframe/resources/iframe-contents.html
@@ -3,6 +3,6 @@
 <style>
  * { margin: 0 }
 </style>
-<meta name="responsive-embedded-sizing">
+<meta name="responsive-embedded-sizing" allowed-origins="*">
 </head>
 <div style="width: 100px; height: 400px"></div>
diff --git a/css/css-sizing/responsive-iframe/responsive-iframe-allowed-origins.html b/css/css-sizing/responsive-iframe/responsive-iframe-allowed-origins.html
@@ -0,0 +1,114 @@
+<!doctype HTML>
+<title>Test allowed-origins validation for responsive iframes</title>
+<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#responsive-iframes">
+<link rel="author" href="mailto:kojii@chromium.org">
+<meta name="variant" content="?origin=same,allowed=star,expect=400">
+<meta name="variant" content="?origin=same,allowed=parent,expect=400">
+<meta name="variant" content="?origin=same,allowed=other,expect=150">
+<meta name="variant" content="?origin=same,allowed=wildcard,expect=150">
+<meta name="variant" content="?origin=same,allowed=http,expect=400">
+<meta name="variant" content="?origin=same,allowed=https,expect=150">
+<meta name="variant" content="?origin=same,allowed=self,expect=400">
+<meta name="variant" content="?origin=same,allowed=none,expect=150">
+<meta name="variant" content="?origin=same,allowed=multiple,expect=400">
+<meta name="variant" content="?origin=same,allowed=space,expect=150">
+<meta name="variant" content="?origin=same,allowed=empty,expect=150">
+<meta name="variant" content="?origin=same,allowed=missing,expect=150">
+<meta name="variant" content="?origin=cross,allowed=star,expect=400">
+<meta name="variant" content="?origin=cross,allowed=parent,expect=400">
+<meta name="variant" content="?origin=cross,allowed=child,expect=150">
+<meta name="variant" content="?origin=cross,allowed=self,expect=150">
+<meta name="variant" content="?origin=cross,allowed=other,expect=150">
+<meta name="variant" content="?origin=subdomain,allowed=star,expect=400">
+<meta name="variant" content="?origin=subdomain,allowed=parent,expect=400">
+<meta name="variant" content="?origin=subdomain,allowed=child,expect=150">
+<meta name="variant" content="?container=subdomain,origin=same,allowed=wildcard,expect=400">
+<meta name="variant" content="?container=subdomain,origin=cross,allowed=wildcard,expect=400">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<style>
+iframe {
+  border: 0;
+  frame-sizing: content-height;
+}
+</style>
+<body>
+<script>
+const hostInfo = get_host_info();
+// TODO(crbug.com/479970848): Chromium bots don't support '&'.
+const search = location.search.replace(/,/g, '&');
+const params = new URLSearchParams(search);
+const containerType = params.get('container') || 'parent';
+const originType = params.get('origin') || 'same';
+const allowedType = params.get('allowed') || 'other';
+const expectedHeight = parseInt(params.get('expect') || '150');
+const paramsDesc = `container=${containerType}, origin=${originType}, allowed=${allowedType}`;
+const currentContainerOrigin = location.origin;
+
+function computeAllowedParam() {
+  switch (allowedType) {
+    case 'star': return '*';
+    case 'parent': return currentContainerOrigin;
+    case 'child':
+      switch (originType) {
+        case 'cross': return hostInfo.HTTP_NOTSAMESITE_ORIGIN;
+        case 'subdomain': return hostInfo.HTTP_REMOTE_ORIGIN;
+      }
+      return currentContainerOrigin;
+    case 'other': return 'https://invalid-origin.example';
+    case 'wildcard': return 'http://*.' + hostInfo.ORIGINAL_HOST + ':' + hostInfo.HTTP_PORT;
+    case 'http': return 'http:';
+    case 'https': return 'https:';
+    case 'self': return "'self'";
+    case 'none': return "'none'";
+    case 'multiple': return 'https://invalid-origin.example ' + currentContainerOrigin;
+    case 'space': return ' ';
+    case 'empty':
+    default: return '';
+  }
+}
+
+if (containerType === 'subdomain' && location.origin !== hostInfo.HTTP_REMOTE_ORIGIN) {
+  location.href = hostInfo.HTTP_REMOTE_ORIGIN + location.pathname + location.search;
+} else {
+  async_test(t => {
+    const iframe = document.createElement('iframe');
+    iframe.frameBorder = '0';
+    iframe.scrolling = 'no';
+
+    const fileName = (allowedType === 'missing')
+        ? 'iframe-contents-allowed-origins-missing.html'
+        : 'iframe-contents-allowed-origins.sub.html';
+    const resourcePath = new URL(`resources/${fileName}`, window.location.href).pathname;
+    const allowedParam = computeAllowedParam();
+    const query = (allowedType === 'missing') ? '' : `?allowed=${encodeURIComponent(allowedParam)}`;
+    let iframeSrc = resourcePath + query;
+    if (originType === 'cross') {
+      iframeSrc = hostInfo.HTTP_NOTSAMESITE_ORIGIN + resourcePath + query;
+    } else if (originType === 'subdomain') {
+      iframeSrc = hostInfo.HTTP_REMOTE_ORIGIN + resourcePath + query;
+    }
+
+    iframe.src = iframeSrc;
+    iframe.addEventListener('load', t.step_func(() => {
+      try {
+        if (iframe.contentWindow && iframe.contentWindow.location.href === 'about:blank') {
+          return;
+        }
+      } catch (e) {
+        // Cross-origin iframe accesses `location.href` with `SecurityError`,
+        // which means it loaded target URL.
+      }
+      t.step(() => {
+        assert_equals(iframe.offsetHeight, expectedHeight,
+          `iframe height should be ${expectedHeight}px for ${paramsDesc}`);
+      });
+      t.done();
+    }));
+
+    document.body.appendChild(iframe);
+  }, `Allowed origins check: ${paramsDesc}`);
+}
+</script>
+</body>

Original file line number	Diff line number	Diff line change
`@@ -10,5 +10,5 @@`
`10`	`10`	`box-sizing: border-box;`
`11`	`11`	`}`
`12`	`12`	`</style>`
`13`		`-<meta name="responsive-embedded-sizing">`
	`13`	`+<meta name="responsive-embedded-sizing" allowed-origins="*">`
`14`	`14`	`</head>`
Original file line number	Diff line number	Diff line change
`@@ -8,7 +8,7 @@`
`8`	`8`	`box-sizing: border-box;`
`9`	`9`	`}`
`10`	`10`	`</style>`
`11`		`-<meta name="responsive-embedded-sizing">`
	`11`	`+<meta name="responsive-embedded-sizing" allowed-origins="*">`
`12`	`12`	`</head>`
`13`	`13`	`<div id="target" style="width: 100px">`
`14`	`14`	`<img src="slow-image.py?name=1x1-navy.png" width="1" height="1">`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`box-sizing: border-box;`
`13`	`13`	`}`
`14`	`14`	`</style>`
`15`		`-<meta name="responsive-embedded-sizing">`
	`15`	`+<meta name="responsive-embedded-sizing" allowed-origins="*">`
`16`	`16`	`<div id="target"></div>`
`17`	`17`	`<script>`
`18`	`18`	`window.addEventListener('message', e => {`