Languages

Menu
Sites
Language
Youtube Embed Origin Error 
<iframe width="560" height="315" src="https://www.youtube.com/embed/i-p9lWIhcLQ?list=PL7atuZxmT954bCkC062rKwXTvJtcqFB8i" frameborder="0" allowfullscreen></iframe>

Embedding a simple YouTube iFrame into my hybrid app and I'm getting this error.

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "file://". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "file". Protocols must match.

Tizen browser for web app is blocking frame because of different origin. file:// vs https://.

Is there anyway to succesfully embed iFrames into the web app without causing this to happen?

 

 

 

List

Responses

8 Replies
Iqbal Hossain

hi~ 
You need to add some permission and previlege in config.xml 

Add these in config.xml

<?xml version="1.0" encoding="UTF-8"?>
<widget xmlns="http://www.w3.org/ns/widgets" xmlns:tizen="http://tizen.org/ns/widgets" id="http://yourdomain/IFrameMobileYoutube" version="1.0.0" viewmodes="maximized">
    <tizen:application id="x7PMNxXa7V.XXXXXXX" package="x7PMNxXa7V" required_version="2.4"/>
    <content src="index.html"/>
    <feature name="http://tizen.org/feature/screen.size.all"/>
     <access origin="http://www.youtube.com" subdomains="true"/>
    <tizen:allow-navigation>*.youtube.com</tizen:allow-navigation>
    <access origin="*" subdomains="true"></access>
    <icon src="icon.png"/>
    <name>XXXXXXX</name>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
     <tizen:privilege name="http://tizen.org/privilege/internet"/>
    <tizen:profile name="mobile"/>
    <tizen:setting context-menu="disable"/>
</widget>

 

html

<div class="ui-content">
    <h2>Youtube Embed</h2>
	<iframe width="560" height="315" src="https://www.youtube.com/embed/i-p9lWIhcLQ?   list=PL7atuZxmT954bCkC062rKwXTvJtcqFB8i" frameborder="0" allowfullscreen></iframe>
</div>

Hope it will help you. 

 

 

Iqbal Hossain

View:

James Hoegerl

Got the youtube one working by changing my CSP. But that wasn't my end goal, just a basic question. What do you think could be the issue here.

Still getting this.

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.

With this config (Removed app id) and code.

<?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"/>
    <feature name="http://tizen.org/feature/screen.size.normal.1080.1920"/>
    <icon src="icon.png"/>
    <tizen:metadata key="http://samsung.com/tv/metadata/prelaunch.support" value="true"/>
    <name>Twitchen</name>
    <tizen:privilege name="http://developer.samsung.com/privilege/network.public"/>
    <tizen:privilege name="http://tizen.org/privilege/tv.audio"/>
    <tizen:privilege name="http://tizen.org/privilege/application.launch"/>
    <tizen:content-security-policy> default-src *; style-src 'self' https://* http://*; object-src 'none'; script-src 'self' http://* https://* 'unsafe-inline' 'unsafe-eval';</tizen:content-security-policy>
    <tizen:profile name="tv-samsung-public"/>
    <tizen:setting screen-orientation="landscape" context-menu="enable" background-support="disable" encryption="disable" install-location="auto" hwkey-event="enable"/>
</widget>

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

 

Iqbal Hossain

That is different problem i think. Post it on separate thread. 

James Hoegerl

I guess I should have been more explicit that I'm on tizen for samsung tv. When I do this configuration I get this error.

 

Refused to load the script 'https://s.ytimg.com/yts/jsbin/player-en_US-vflz_1lv2/base.js' because it violates the following Content Security Policy directive: "script-src 'self'".

 

Iqbal Hossain

Add this on config.xml

<tizen:content-security-policy>self</tizen:content-security-policy>

 

Marco Buettner

And andd this too

<tizen:privilege name="http://tizen.org/privilege/internet"/>

 

Iqbal Hossain

Did it solve your problem ?