topic Re: Iframe api is not working as documented in Spotify for Developers

Iframe api is not working as documented

florinTAP — Thu, 10 Aug 2023 09:09:30 GMT

I am trying to implement the iframe API documented here: https://developer.spotify.com/documentation/embeds/references/iframe-api#events

The only event triggered is onSpotifyIframeApiReady. After that, the created controller does not respond to play(), pause(). I added listeners for when it's ready, on playback_update, nothing is triggered.

The only error I see in the console is a 'Refused to set unsafe header "user-agent"'. thrown from a spotify lib js.

I saw multiple threads on this exact issue, contacted spotify support (they said that they can't help me on this)

Some help would be really appreciated.

Re: Iframe api is not working as documented

rares_p — Fri, 11 Aug 2023 11:14:46 GMT

Same issue. Anyone at Spotify willing to help?

Re: Iframe api is not working as documented

Trikto — Tue, 15 Aug 2023 09:53:16 GMT

Posting here my reply to https://community.spotify.com/t5/App-Features/Iframe-api-doesn-t-play-since-some-days/m-p/5618225

Same here, since a few days, EmbedController play controls does nothing at all, tested on several browsers. This is true even if the frame is not in preview mode.

Here is a small adaptation of the tutorial from https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api to reproduce the 'togglePlay' issue :

<html> <head> <style> body { display: flex; gap: 1rem; } .episodes { display: flex; flex-direction: column; } .episode { min-width: max-content; margin-bottom: .8rem; padding: .8rem 1rem; border-radius: 10px; border: 0; background: #191414; color: #fff; cursor: pointer; } .episode:hover { background: #1Db954; } </style> </head> <body> <div class="episodes"> <button class="episode" data-spotify-id="spotify:episode:7makk4oTQel546B0PZlDM5"> My Path to Spotify: Women in Engineering </button> <button class="episode" data-spotify-id="spotify:episode:43cbJh4ccRD7lzM2730YK3"> What is Backstage? </button> <button class="episode" data-spotify-id="spotify:episode:6I3ZzCxRhRkNqnQNo8AZPV"> Introducing Nerd Out@Spotify </button> <button id="control"> Toggle Play </button> </div> <div id="embed-iframe"></div> <script src="https://open.spotify.com/embed-podcast/iframe-api/v1" async> </script> <script type="text/javascript"> window.onSpotifyIframeApiReady = (IFrameAPI) => { const element = document.getElementById('embed-iframe'); const options = { width: '100%', height: '200', uri: 'spotify:episode:7makk4oTQel546B0PZlDM5' }; const callback = (EmbedController) => { document.querySelectorAll('.episode').forEach( episode => { episode.addEventListener('click', () => { EmbedController.loadUri(episode.dataset.spotifyId) }); }); document.getElementById('control').addEventListener('click', () => { console.log("Toggle play on EmbedController") EmbedController.togglePlay(); }); }; IFrameAPI.createController(element, options, callback); }; </script> </body> </html>

Re: Iframe api is not working as documented

marblecompass — Tue, 15 Aug 2023 20:26:45 GMT

I'm having the same issue since a few days. Worked until +- 3 days ago. Now I'm getting a CSP issue for using eval in script-src (the embed js that the iframe includes). Configuring CSP headers for my site doesn't solve the issue.

From Chrome's dev tools:

The Content Security Policy (CSP) prevents the evaluation of arbitrary strings as JavaScript to make it more difficult for an attacker to inject unathorized code on your site.
To solve this issue, avoid using eval(), new Function(), setTimeout([string], ...) and setInterval([string], ...) for evaluating strings.
If you absolutely must: you can enable string evaluation by adding unsafe-eval as an allowed source in a script-src directive.
⚠️Allowing string evaluation comes at the risk of inline script injection.
GETROFFEN RESOURCES

1 richtlijn

Locatie van bron Richtlijn Status
https://embed-cdn.spotifycdn.com/_next/static/chunks/95-555c6bbbb64902b7.js script-src geblokkeerd

Re: Iframe api is not working as documented

marblecompass — Wed, 16 Aug 2023 21:29:40 GMT

Small update,

- Chrome: not playing audio

- Firefox: works correctly

- Safari: works sometimes, sometimes the second episode plays and the first doesn't. Sometimes none play.

Chrome

I'm now getting the `Refused to set unsafe header "user-agent"` from https://embed-cdn.spotifycdn.com/_next/static/chunks/pages/_app-fe18df2bedcb776f.js Which I didn't see yesterday in the console log

In Safari I see the following errors:

[Error] Fetch API cannot load https://apresolve.spotify.com/?type=dealer&type=spclient due to access control checks.

(anonieme functie) (_app-fe18df2bedcb776f.js:1:38211)

Q (_app-fe18df2bedcb776f.js:1:389350)

(anonieme functie) (_app-fe18df2bedcb776f.js:1:414283)

[Error] Fetch API cannot load https://spclient.wg.spotify.com/melody/unauth/v1/msg/batch due to access control checks.

(anonieme functie) (_app-fe18df2bedcb776f.js:1:38211)

Q (_app-fe18df2bedcb776f.js:1:389350)

(anonieme functie) (_app-fe18df2bedcb776f.js:1:414283)

[Error] Fetch API cannot load https://apresolve.spotify.com/?type=dealer&type=spclient due to access control checks.

(anonieme functie) (_app-fe18df2bedcb776f.js:1:38211)

Q (_app-fe18df2bedcb776f.js:1:389350)

(anonieme functie) (_app-fe18df2bedcb776f.js:1:414283)

[Error] Fetch API cannot load https://spclient.wg.spotify.com/melody/unauth/v1/msg/batch due to access control checks.

(anonieme functie) (_app-fe18df2bedcb776f.js:1:38211)

Q (_app-fe18df2bedcb776f.js:1:389350)

(anonieme functie) (_app-fe18df2bedcb776f.js:1:414283)

Re: Iframe api is not working as documented

sushants — Thu, 17 Aug 2023 10:40:28 GMT

Hello,

I work in the team that handles the Spotify embed player we will be fixing the issues with the Iframe API very soon.

Thank you for reaching out and being patient! We had a migration going on internally which took longer than expected and had some issues that we couldn't unfortunately work around. However, as a team that owns the Spotify Embed Player and related offerings like the Iframe API, we will be looking to improve our processes around monitoring the community threads so you don't have to wait too long to hear from us on critical issues.

Regards,

Sushant

Re: Iframe api is not working as documented

florinTAP — Thu, 17 Aug 2023 13:22:22 GMT

Great news, sushants! Let us know when the bug has been fixed.

For now the library https://open.spotify.com/embed-podcast/iframe-api/v1 returns a 404.

Seeing that this was built for podcasts, maybe the lib source changed?

Thank you for the time you invested in this issue.

Re: Iframe api is not working as documented

marblecompass — Thu, 17 Aug 2023 14:03:34 GMT

florinTAP it seems it's working again.

Thanks sushants !

Re: Iframe api is not working as documented

sushants — Thu, 17 Aug 2023 17:06:38 GMT

Good news indeed! The migration is now almost done, but as consumers of the Iframe API you all should be able to have the Iframe API working as expected.

Re: Iframe api is not working as documented

andremacola — Sat, 19 Aug 2023 21:33:14 GMT

Is the embed player count as play and stream on analytics data? For music and podcasts?

Re: Iframe api is not working as documented

staceypee — Tue, 29 Aug 2023 13:12:06 GMT

Hi — any updates here? Will there be updated iframe embed code, or will existing embeds begin working? I have one working fine on Chrome and Firefox, but not playing on Safari (though it's correctly loading sample length, etc), with the same error as above:

[Error] Fetch API cannot load https://apresolve.spotify.com/?type=dealer&type=spclient due to access control checks.

Would love to report back to my client. Thanks!

Re: Iframe api is not working as documented

jotus — Wed, 30 Aug 2023 06:03:22 GMT

Still not working properly. Sometimes it loads up the embedded player - often not.

Message received in Chrome developer tool: "to set unsafe header "user-agent"".

Re: Iframe api is not working as documented

matttaylor8910 — Tue, 05 Sep 2023 02:54:12 GMT

Also seeing Refused to set unsafe header "user-agent" in console. Please advise.

Re: Iframe api is not working as documented

spacelampsix — Thu, 07 Sep 2023 03:23:38 GMT

i am also getting this.

Re: Iframe api is not working as documented

jeremilashua — Tue, 10 Oct 2023 17:54:08 GMT

Hi, Is this really fixed? It's still not working on my site or the Spotify iFrame API page: https://developer.spotify.com/documentation/embeds/tutorials/using-the-iframe-api

Re: Iframe api is not working as documented

icew1nd — Mon, 06 May 2024 08:01:33 GMT

Unsafe-eval still seem to be needed, any updates on this?

Re: Iframe api is not working as documented

sebas932 — Wed, 10 Jul 2024 16:14:32 GMT

I'm still getting the error in Safari browser, when I set the preferVideo option.
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.5 Safari/605.1.15"

> Fetch API cannot load https://apresolve.spotify.com/?type=dealer&type=spclient due to access control checks.

Locatie van bron	Richtlijn	Status
https://embed-cdn.spotifycdn.com/_next/static/chunks/95-555c6bbbb64902b7.js	script-src	geblokkeerd