Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug] Content Security Policy violation when trying to embed in a local HTML file #4448

Open
tomasz1986 opened this issue Feb 24, 2024 · 6 comments · May be fixed by #4450
Open

[Bug] Content Security Policy violation when trying to embed in a local HTML file #4448

tomasz1986 opened this issue Feb 24, 2024 · 6 comments · May be fixed by #4450
Labels
bug Something isn't working

Comments

@tomasz1986
Copy link

Describe the bug

  1. Create a new HTML file with this content:
<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
	</head>
<body>
	<div>
		<object type="text/html" data="https://yewtu.be/embed/n3vQbR1GhmA"></object>
	</div>
</body>
</html>
  1. Open the HTML in a browser.

Logs

Refused to frame 'https://yewtu.be/' because an ancestor violates the following Content Security Policy directive: "frame-ancestors 'self' http: https:".

Additional context

The specific Invidious instance doesn't seem to matter, and also the behaviour seems the same in all Web browsers (e.g. Chromium, Firefox, Palemoon, etc.).

YouTube itself has no problems with embedding videos, and also Piped, the other YouTube alternative viewer, embeds with no issues this way.

@tomasz1986 tomasz1986 added the bug Something isn't working label Feb 24, 2024
@unixfox
Copy link
Member

unixfox commented Feb 24, 2024

Why are you not using the "iframe" element from HTML?

<iframe id='ivplayer' width='640' height='360' src='https://yewtu.be/embed/n3vQbR1GhmA' style='border:none;'></iframe>

@tomasz1986
Copy link
Author

tomasz1986 commented Feb 24, 2024

The same error occurs. I don't think it matters which type of element is used to embed. I think the problem is because the embedded https:// site doesn't allow loading itself inside a page that uses the file:// protocol.

@unixfox
Copy link
Member

unixfox commented Feb 24, 2024

The CSP is here, feel free to submit a PR: https://github.com/iv-org/invidious/blob/master/src/invidious/routes/before_all.cr#L33!

@tomasz1986
Copy link
Author

tomasz1986 commented Feb 24, 2024

Should I just add file: in there? Would this be accepted? I'm not running Invidious myself, so I can't really do any testing locally.

@unixfox
Copy link
Member

unixfox commented Feb 24, 2024

Please see here if you want to test if it works: https://docs.invidious.io/installation/#docker-compose-method-development

tomasz1986 added a commit to tomasz1986/invidious that referenced this issue Feb 24, 2024
The current Content Security Policy does not allow to embed videos
inside local HTML files which are viewed in the browser via the file
protocol. This commit adds the file protocol to the allowed frame
ancestors, so that the embedded videos load correctly in local HTML
files.

This behaviour is consistent which how the official YouTube website
allows to embed videos from itself.

Signed-off-by: Tomasz Wilczyński <twilczynski@naver.com>
@tomasz1986
Copy link
Author

tomasz1986 commented Feb 24, 2024

The PR is up, however I still can't say for sure whether this works or not. The reason is that if I run Invidious locally, then embedding in a local HTML file works even without the change. This is true both when accessing it on the same machine or from other devices on the same LAN.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants