ampproject / ampproject/amphtml
amp-analytics: iframe transport not choosen when triggered by an event (e.g. via amp-carousel)
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
### Description
If a `` element is implemented together with `` element and the provider uses an `iframe` as transport type, `image` is used as transport type instead when corresponding events are raised from the `` . This then results in an expected CORB error because the requested content type does not match the content type of the response. Our expectation here is that the vendor configuration and the requests and transport types specified apply.
According to the documentation, there is a fixed sequence for the transport methods used:
> If more than one of the above transport methods are enabled, the precedence is iframe > beacon > xhrpost > image. Only one transport method will be used, and it will be the highest precedence one that is permitted and available. If the client's user agent does not support a method, the next highest precedence method enabled will be used. By default, all four methods above are enabled.
From our point of view, AMP deviates from the documented procedure here.
### Reproduction Steps
Checkout [AMP Playground](https://playground.amp.dev/#share=PCFkb2N0eXBlIGh0bWw+CjxodG1sIOKaoSBsYW5nPSJlbiI+CjxoZWFkPgogIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4KICA8dGl0bGU+YW1wLWNhcm91c2VsPC90aXRsZT4KICA8c2NyaXB0IGFzeW5jIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAuanMiPjwvc2NyaXB0PgogIDwhLS0gIyMgU2V0dXAgLS0+CiAgPCEtLSBJbXBvcnQgdGhlIGNhcm91c2VsIGNvbXBvbmVudCBpbiB0aGUgaGVhZGVyLiAtLT4KICA8c2NyaXB0IGFzeW5jIGN1c3RvbS1lbGVtZW50PSJhbXAtY2Fyb3VzZWwiIHNyYz0iaHR0cHM6Ly9jZG4uYW1wcHJvamVjdC5vcmcvdjAvYW1wLWNhcm91c2VsLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPHNjcmlwdCBhc3luYyBjdXN0b20tZWxlbWVudD0iYW1wLWFuYWx5dGljcyIgc3JjPSJodHRwczovL2Nkbi5hbXBwcm9qZWN0Lm9yZy92MC9hbXAtYW5hbHl0aWNzLTAuMS5qcyI+PC9zY3JpcHQ+CiAgPGxpbmsgcmVsPSJjYW5vbmljYWwiIGhyZWY9Imh0dHBzOi8vYW1wLmRldi9kb2N1bWVudGF0aW9uL2V4YW1wbGVzL2NvbXBvbmVudHMvYW1wLWNhcm91c2VsL2luZGV4Lmh0bWwiPgogIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgiPgogIDxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoOy1tb3otYW5pbWF0aW9uOi1hbXAtc3RhcnQgOHMgc3RlcHMoMSxlbmQpIDBzIDEgbm9ybWFsIGJvdGg7LW1zLWFuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RoO2FuaW1hdGlvbjotYW1wLXN0YXJ0IDhzIHN0ZXBzKDEsZW5kKSAwcyAxIG5vcm1hbCBib3RofUAtd2Via2l0LWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1ALW1vei1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1tcy1rZXlmcmFtZXMgLWFtcC1zdGFydHtmcm9te3Zpc2liaWxpdHk6aGlkZGVufXRve3Zpc2liaWxpdHk6dmlzaWJsZX19QC1vLWtleWZyYW1lcyAtYW1wLXN0YXJ0e2Zyb217dmlzaWJpbGl0eTpoaWRkZW59dG97dmlzaWJpbGl0eTp2aXNpYmxlfX1Aa2V5ZnJhbWVzIC1hbXAtc3RhcnR7ZnJvbXt2aXNpYmlsaXR5OmhpZGRlbn10b3t2aXNpYmlsaXR5OnZpc2libGV9fTwvc3R5bGU+PG5vc2NyaXB0PjxzdHlsZSBhbXAtYm9pbGVycGxhdGU+Ym9keXstd2Via2l0LWFuaW1hdGlvbjpub25lOy1tb3otYW5pbWF0aW9uOm5vbmU7LW1zLWFuaW1hdGlvbjpub25lO2FuaW1hdGlvbjpub25lfTwvc3R5bGU+PC9ub3NjcmlwdD4KICA8c3R5bGUgYW1wLWN1c3RvbT4KICAgIC5ibHVlLWJveCwgLnJlZC1ib3gsIC5ncmVlbi1ib3ggewogICAgICB3aWR0aDogMTAwJTsKICAgICAgaGVpZ2h0OiAyODBweDsKICAgIH0KICAgIC5ibHVlLWJveCB7CiAgICAgIGJhY2tncm91bmQ6IGJsdWU7CiAgICAgIGNvbG9yOiAjZmZmOwogICAgfQogICAgLmdyZWVuLWJveCB7CiAgICAgIGJhY2tncm91bmQ6IGdyZWVuOwogICAgICBjb2xvcjogI2ZmZjsKICAgIH0KICAgIC5yZWQtYm94IHsKICAgICAgYmFja2dyb3VuZDogcmVkOwogICAgICBjb2xvcjogIzExMTsKICAgIH0KICAgICNjdXN0b20tYnV0dG9uIC5hbXAtY2Fyb3VzZWwtYnV0dG9uLXByZXYgewogICAgICBsZWZ0OiA1JTsKICAgICAgYmFja2dyb3VuZC1pbWFnZTogdXJsKCdodHRwczovL2FtcC5kZXYvc3RhdGljL3NhbXBsZXMvaW1nL2Nhcm91c2VsLWFycm93LWxlZnQucG5nJyk7CiAgICB9CiAgICAjY3VzdG9tLWJ1dHRvbiAuYW1wLWNhcm91c2VsLWJ1dHRvbi1uZXh0IHsKICAgICAgcmlnaHQ6IDUlOwogICAgICBiYWNrZ3JvdW5kLWltYWdlOiB1cmwoJ2h0dHBzOi8vYW1wLmRldi9zdGF0aWMvc2FtcGxlcy9pbWcvY2Fyb3VzZWwtYXJyb3ctcmlnaHQucG5nJyk7CiAgICB9CiAgPC9zdHlsZT4KPC9oZWFkPgo8Ym9keT4KICA8YW1wLWFuYWx5dGljcyB0eXBlPSJpbmZvbmxpbmVfYmFzZSI+CiAgICA8c2NyaXB0IHR5cGU9ImFwcGxpY2F0aW9uL2pzb24iPgogICAgICB7CiAgICAgICAgInZhcnMiOiB7CiAgICAgICAgICAic3QiOiAiaW5mb25saW4iLAogICAgICAgICAgImNwIjogImFtcF9jYXJvdXNlbF90ZXN0IiwKICAgICAgICAgICJkbiI6ICJkYXRhLWQ1YzczM2FjY2MuaW5mb25saW5lLmRlIgogICAgICAgIH0sCiAgICAgICAgInJlcXVlc3RzIjogewogICAgICAgICAgInVybCI6ICJodHRwczovL2RhdGEtZDVjNzMzYWNjYy5pbmZvbmxpbmUuZGUvaW9tYi9sYXRlc3QvaHRtbC9hbXAuaHRtbCIKICAgICAgICB9LAogICAgICAgICJ0cmlnZ2VycyI6IHsKICAgICAgICAgICJhbXBDYXJvdXNlbE5leHQiOiB7CiAgICAgICAgICAgICJvbiI6ICJhbXAtY2Fyb3VzZWwtbmV4dCIsCiAgICAgICAgICAgICJyZXF1ZXN0IjogInBhZ2V2aWV3IgogICAgICAgICAgfSwKICAgICAgICAgICJhbXBDYXJvdXNlbFByZXYiOiB7CiAgICAgICAgICAgICJvbiI6ICJhbXAtY2Fyb3VzZWwtcHJldiIsCiAgICAgICAgICAgICJyZXF1ZXN0IjogInBhZ2V2aWV3IgogICAgICAgICAgfQogICAgICAgIH0KICAgICAgfQogICAgPC9zY3JpcHQ+CiAgPC9hbXAtYW5hbHl0aWNzPgogIDwhLS0gIyMgQmFzaWMgVXNhZ2UgLS0+CiAgPCEtLSBVc2UgYHR5cGU9ImNhcm91c2VsImAgdG8gZGlzcGxheSBhIGxpc3Qgb2YgaW1hZ2VzIGFzIGEgY29udGludW91cyBzdHJpcC4gLS0+CiAgPGFtcC1jYXJvdXNlbCBoZWlnaHQ9IjMwMCIgbGF5b3V0PSJmaXhlZC1oZWlnaHQiIHR5cGU9InNsaWRlcyIgcm9sZT0icmVnaW9uIiBhcmlhLWxhYmVsPSJCYXNpYyB1c2FnZSBjYXJvdXNlbCI+CiAgICA8YW1wLWltZyBzcmM9Imh0dHBzOi8vcHJldmlldy5hbXAuZGV2L3N0YXRpYy9zYW1wbGVzL2ltZy9pbWFnZTEuanBnIiB3aWR0aD0iNDAwIiBoZWlnaHQ9IjMwMCIgYWx0PSJhIHNhbXBsZSBpbWFnZSI+PC9hbXAtaW1nPgogICAgPGFtcC1pbWcgc3JjPSJodHRwczovL3ByZXZpZXcuYW1wLmRldi9zdGF0aWMvc2FtcGxlcy9pbWcvaW1hZ2UyLmpwZyIgd2lkdGg9IjQwMCIgaGVpZ2h0PSIzMDAiIGFsdD0iYW5vdGhlciBzYW1wbGUgaW1hZ2UiPjwvYW1wLWltZz4KICAgIDxhbXAtaW1nIHNyYz0iaHR0cHM6Ly9wcmV2aWV3LmFtcC5kZXYvc3RhdGljL3NhbXBsZXMvaW1nL2ltYWdlMy5qcGciIHdpZHRoPSI0MDAiIGhlaWdodD0iMzAwIiBhbHQ9ImFuZCBhbm90aGVyIHNhbXBsZSBpbWFnZSI+PC9hbXAtaW1nPgogIDwvYW1wLWNhcm91c2VsPgogIDwhLS0gQSBnb29kIHVzZSBjYXNlIGZvciBgYW1wLWNhcm91c2VsYCBhcmUgaW1hZ2UgZ2FsbGVyaWVzLCBbaGVyZV0oL2RvY3VtZW50YXRpb24vZXhhbXBsZXMvbXVsdGltZWRpYS1hbmltYXRpb25zL2ltYWdlX2dhbGxlcmllc193aXRoX2FtcC1jYXJvdXNlbC8pIGFyZSBzb21lIGV4YW1wbGVzLiAtLT4KPC9ib2R5Pgo8L2h0bWw+), open browser console and slide through carousel.
### Relevant Logs
```shell
Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
[Report Only] Refused to compile or instantiate WebAssembly module because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "script-src blob: 'unsafe-inline' ".
See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
playground.amp.dev/:1 Autofocus processing was blocked because a document already has a focused element.
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/#development=1
See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel#development=1
VM30 validator_wasm.js:1727 See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F%3Furl%3Dhttps%253A%252F%252Fpreview.amp.dev%252Fdocumentation%252Fexamples%252Fcomponents%252Famp-carousel
amp.js:147 Powered by AMP ⚡ HTML – Version 2203101844000 https://playground.amp.dev/?url=https%3A%2F%2Fpreview.amp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel#development=1
validator_wasm.js:1727 See also https://validator.amp.dev/?experimental_wasm=1#url=https%3A%2F%2Fplayground.amp.dev%2F%3Furl%3Dhttps%253A%252F%252Fpreview.amp.dev%252Fdocumentation%252Fexamples%252Fcomponents%252Famp-carousel
log.js:232 [amp-analytics/transport] Response unparseable or failed to send image request https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview
i.qt @ log.js:232
i.warn @ log.js:261
(anonym) @ transport.js:256
Promise.catch (async)
t.sendRequestUsingImage @ transport.js:254
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
Cross-Origin Read Blocking (CORB) hat die ursprungsübergreifende Antwort https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview mit dem MIME-Typ text/html blockiert. Weitere Informationen finden Sie unter https://www.chromestatus.com/feature/5629709824032768.
Image (async)
me @ pixel.js:65
(anonym) @ pixel.js:23
t.sendRequestUsingImage @ transport.js:249
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
Cross-Origin Read Blocking (CORB) hat die ursprungsübergreifende Antwort https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview mit dem MIME-Typ text/html blockiert. Weitere Informationen finden Sie unter https://www.chromestatus.com/feature/5629709824032768.
Image (async)
me @ pixel.js:65
(anonym) @ pixel.js:23
t.sendRequestUsingImage @ transport.js:249
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
log.js:232 [amp-analytics/transport] Response unparseable or failed to send image request https://data-d5c733accc.infonline.de/iomb/latest/html/amp.html?dn=data-d5c733accc.infonline.de&cn=&st=infonlin&co=&cp=amp_carousel_test&au=https%3A%2F%2Famp.dev%2Fdocumentation%2Fexamples%2Fcomponents%2Famp-carousel%2Findex.html&tp=pageview
i.qt @ log.js:232
i.warn @ log.js:261
(anonym) @ transport.js:256
Promise.catch (async)
t.sendRequestUsingImage @ transport.js:254
n.sendRequest @ transport.js:134
(anonym) @ requests.js:268
Promise.then (async)
n.YSt @ requests.js:252
n.To @ requests.js:222
n.send @ requests.js:164
r.DOt @ amp-analytics.js:693
(anonym) @ amp-analytics.js:669
Promise.then (async)
r.COt @ amp-analytics.js:663
r.kk @ amp-analytics.js:630
(anonym) @ events.js:501
Promise.then (async)
(anonym) @ events.js:499
n.fire @ observable.js:61
r.trigger @ events.js:518
n.triggerEventForTarget @ instrumentation.js:91
(anonym) @ analytics.js:22
Promise.then (async)
(anonym) @ analytics.js:18
e.VL @ slidescroll.js:1034
e.zK @ slidescroll.js:1022
e.Xit @ slidescroll.js:857
e.Vit @ slidescroll.js:888
(anonym) @ slidescroll.js:742
Ma @ vsync-impl.js:456
i.cv @ vsync-impl.js:413
requestAnimationFrame (async)
i.mv @ vsync-impl.js:380
i.Os @ vsync-impl.js:374
i.run @ vsync-impl.js:173
i.mutate @ vsync-impl.js:215
e.$it @ slidescroll.js:740
(anonym) @ slidescroll.js:653
Promise.then (async)
e.Git @ slidescroll.js:652
e.moveSlide @ slidescroll.js:547
e.go @ slidescroll.js:372
i.handleNext @ carousel-controls.js:149
(anonym) @ carousel-controls.js:51
```
### Browser(s) Affected
Chrome
### OS(s) Affected
MacOS
### Device(s) Affected
MacBook
### AMP Version Affected
2203101844000
Contributor guide
Research direction
Reproduce the AMP Playground example by triggering amp-carousel events and inspect the transport.js, requests.js, and amp-analytics.js stack entries shown in the logs. Trace why the configured iframe transport is replaced by image for these events; done means the documented transport precedence is honored and the CORB error no longer occurs.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100