Spotify Community

florinTAP · 2023-08-10

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.

sushants · 2023-08-17

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.

View solution in original post

rares_p · 2023-08-11

Same issue. Anyone at Spotify willing to help?

Trikto · 2023-08-15

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>

marblecompass · 2023-08-15

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

marblecompass · 2023-08-16

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)

sushants · 2023-08-17

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

florinTAP · 2023-08-17

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.

marblecompass · 2023-08-17

florinTAP it seems it's working again.

Thanks sushants !

sushants · 2023-08-17

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.

andremacola · 2023-08-19

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

staceypee · 2023-08-29

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!

jotus · 2023-08-30

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"".

matttaylor8910 · 2023-09-05

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

spacelampsix · 2023-09-07

i am also getting this.

jeremilashua · 2023-10-10

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

icew1nd · 2024-05-06

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

sebas932 · 2024-07-10

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.

Spotify Community

Help categories

Account & Payment

Using Spotify

Listen Everywhere

Iframe api is not working as documented

Iframe api is not working as documented

Photos

Suggested posts

Let's introduce ourselves!

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

Help Wizard

Step 1

Just quickly...

FAQs

Ongoing Issues

Help categories

Account & Payment

Using Spotify

Listen Everywhere

Iframe api is not working as documented

Iframe api is not working as documented

Photos

Suggested posts

Let's introduce ourselves!