Embed YouTube error 153

[Jason Savard]

I've been embedding YouTube videos in my extension pages for a while, but my recent tests on Chrome Beta 141 are displaying an error in the YouTube video with error 153.

When I right click the video and "Copy debug info" I errorCode: embedder.identity.missing.referrer

Here is code

<iframe width="560" height="315" src="https://www.youtube.com/embed/pN9aec4QjRQ?si=PYcur0y1MzkfmqfM&enablejsapi=1&origin=chrome-extension://mdddabjhelpilpnpgondfmehhcplpiin" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

You can also test this from my extension: https://chromewebstore.google.com/detail/explain-and-send-screensh/mdddabjhelpilpnpgondfmehhcplpiin

and just go to the extension Options > Contribute page and the video will show the error.

[woxxom]

The video is shown in Chrome Canary for me, so maybe this bug is fixed in Canary but not in Beta...

[Jason Savard]

So as suspected this issue is now showing in Chrome Stable 141.0.7390.123 (Official Build) (64-bit)

[Jason Savard]

It seems the issue is related to being signed into the YouTube website. When I signed in then the embedded vidoes were working again.

[Jackie Han]

I confirmed this issue. The problem is that YouTube asks all clients (embed youtube players) to send HTTP Referer header.

YouTube official doc: https://developers.google.com/youtube/terms/required-minimum-functionality#youtube-embedded-player-and-video-playback

Adding an iframe of youtube url in a web page, you can see Chrome does send Referer for youtube embed url in DevTools network panel. And it works.

But the same way in an extension page, Chrome doesn't send Referer header with the youtube url. So it shows 153 error in the youtube player.

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/4443ca8a-d668-43ec-bdb7-95973a9a5e55n%40chromium.org.

[Jackie Han]

Because Chrome doesn't send the Referer header in extensions. A workaround is

- extension page

  - add a web page as iframe

    - add youtube embed player in the iframe page

For example, you have a web page https://my-site.com/player.html

in the extension page, you add an iframe of this page with youtube video id parameter

e.g. <iframe src="https://my-site.com/player.html?vid=xxxxx">

then the youtube player is loaded in this web page.

Now youtube is loaded in a web page not in an extension page, it works.

[woxxom]

An intermediate web page works but it shouldn't be necessary if your extension adds an arbitrary Referer header via declarativeNetRequest scoped to the extension's id similarly to https://stackoverflow.com/a/69177790

[Jackie Han]

declarativeNetRequest only allows a list of Headers to modify (append). It doesn't support appending the Referer header.

[Jackie Han]

Update, workaround by declarativeNetRequest works. Chrome doesn't support  'append' Referer header, but supports 'set' this header.

Here is the code:

// manifest.json

"permissions": [
  "declarativeNetRequestWithHostAccess",
],
"host_permissions": [
  "https://www.youtube.com/*",

],

// service worker

const iframeHosts = [
  'www.youtube.com',
];
chrome.runtime.onInstalled.addListener(() => {
  const RULE = {
    id: 1,
    condition: {
      initiatorDomains: [chrome.runtime.id],
      requestDomains: iframeHosts,
      resourceTypes: ['sub_frame'],
    },
    action: {
      type: 'modifyHeaders',
      requestHeaders: [
        {header: 'referer', value: chrome.runtime.id, operation: 'set'},
      ],
    },
  };
  chrome.declarativeNetRequest.updateDynamicRules({
    removeRuleIds: [RULE.id],
    addRules: [RULE],
  });
});

[Jason Savard]

Love the speedy response and workarounds, thank you both.

I'll stick with intermediate web page workaround because I don't want the declarativeNetRequest host permission warnings for youtube.com in my extension - I assume that's what the consequence of that solution would be.

[woxxom]

For an intermediate web page you will also need host permissions, to run/inject the content script that creates an iframe inside that page.

[woxxom]

I guess you can use optional_host_permissions and inform the user to grant it in your UI in case they're not signed in.

[Jackie Han]

No, the web page is embedded in the extension page, doesn't need content script. The web page is owned by you.

dNR do need host permission.

[Jason Savard]

Correct about in the extension page.
And I understand the dNR permission itself might not prompt a warning, but in your example you put a host_permission for youtube, won't that prompt a warning on extension install...

"host_permissions": [
  "https://www.youtube.com/*",
],

[Jackie Han]

Yes, "declarativeNetRequestWithHostAccess" has no warning. And host permission promotes warnings on install or disabled on upgrade.

If there is no host permission, dDR api just doesn't work (don't throw errors).

[Jason Savard]

Ok thanks for confirming, but that warning is what I want to avoid, hence why I'll use the intermediate page.

Should we open a ticket and where if we want to root cause to be fixed? Here? https://issues.chromium.org/issues?q=youtube%20153

[Jackie Han]

It is hard to say this is a browser bug (the browser doesn't change, I think). Because youtube checks the HTTP referer recently. If there is no referer, youtube doesn't allow you to use it.

I could add a WECG issue, asking why there is no referer header for an iframe in an extension page.

[Jackie Han]

I added an issue for discussion https://github.com/w3c/webextensions/issues/896

[woxxom]

> The web page is owned by you

Ah, I see. I guess there are also web services like wordpress that would allow using this workaround without paying for the server.