Question
I'm trying to integrate a Twitch iFrame into my Samsung TV web application, but encountering the following error:
Blocked a frame with origin "http://player.twitch.tv" from accessing a frame with origin "file://". The frame requesting access has a protocol of "http", the frame being accessed has a protocol of "file". Protocols must match.
Here's my current configuration in config.xml:
<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns:tizen="http://tizen.org/ns/widgets" xmlns="http://www.w3.org/ns/widgets" id="http://yourdomain/Twitchen" version="0.2.2" viewmodes="maximized">
<tizen:allow-navigation>*.twitch.tv</tizen:allow-navigation>
<access origin="http://player.twitch.tv" subdomains="true"/>
<access origin="http://spade.twitch.tv" subdomains="true"/>
<access origin="*" subdomains="true"></access>
<content src="index.html"/>
<!-- Additional configuration elements -->
</widget>
And here's the iFrame code I'm using:
<iframe
src="http://player.twitch.tv/?channel=drdisrespectlive"
height="720"
width="1280"
frameborder="0"
scrolling="no"
allowfullscreen="true"
sandbox="allow-scripts allow-same-origin">
</iframe>
Is there any way to resolve this protocol mismatch issue?
Answer
Problem Understanding
The error occurs due to a security restriction known as the Same-Origin Policy. The web application is running with a "file://" protocol (likely during local testing), while the Twitch player is trying to access it via "http://" protocol. Modern browsers block such cross-protocol communication for security reasons.
Solution Methods
-
Add Required Privileges: Ensure your config.xml includes the internet privilege:
<tizen:privilege name="http://tizen.org/privilege/internet"/> -
Test with HTTP Server: Instead of running the app locally with file:// protocol, deploy it to a web server or use a local development server (like http-server or live-server) to serve your application via http:// protocol.
-
Update Content Security Policy: Modify your CSP to explicitly allow Twitch domains:
<tizen:content-security-policy> default-src *; frame-src http://player.twitch.tv https://player.twitch.tv; script-src 'self' http://player.twitch.tv https://player.twitch.tv 'unsafe-inline' 'unsafe-eval'; connect-src http://player.twitch.tv https://player.twitch.tv; img-src * data:; media-src *; style-src 'self' 'unsafe-inline' https://* http://*; </tizen:content-security-policy>
Additional Tips
- Consider using HTTPS instead of HTTP for better security and compatibility
- Test your application in the Tizen emulator or on actual device rather than just in browser
- Check Twitch's embed documentation for any specific requirements for TV applications
- Ensure your app's domain is properly configured in the widget id attribute
