My iframes aren't showing up in app


#1

See this basic Plunker http://embed.plnkr.co/CdnYVL/preview

If you generate that code to an app it won’t show anything, just a white box where the iframe should be showing a video.

Any ideas why or how to fix it?


#2

Seems like your describing a cross origin issue. Is this only when on an actual device? If so, you want want to check out $sceProvider


#3

Yes, it’s most consistent when built as an iOS app. There are a few instances when it won’t work on the iOS browser either though. Also it’s not for all iframes, just videos as far as I know.

What is $sceProvider and how would I implement it into my specific example? The documentation seemed a bit sparse.

Really appreciate the help.


#4

$sceProvider is away to whitelist external url, saying these are trusted urls. It’s a built in function of Angular

angular.module('myApp', []).config(function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist([
       // Allow same origin resource loads.
       'self',
       // Allow loading from our assets domain.  Notice the difference between * and **.
       'http://srv*.assets.example.com/**']);

     // The blacklist overrides the whitelist so the open redirect here is blocked.
     $sceDelegateProvider.resourceUrlBlacklist([
       'http://myapp.example.com/clickThru**']);
     });

http://docs.angularjs.org/api/ng/provider/$sceDelegateProvider


#5

Ah I found the issue. When embedding a video, you apparently can’t use the https:// protocol. Everything works swell if you don’t use the default ssl embed. Would the $sceProvider provide a workaround for this?

The issue is now that in my production app the iframes have all been included in a JSON API and I won’t be able to go through and change all the ssl videos to the http:// protocol. JS Regex replace? Or is there an Angular workaround?


#6

Yup, $sceProvider will take care of this, as long you white list the URL

angular.module('myApp', []).config(function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist([
       // Allow same origin resource loads.
       'self',
       // Allow loading from our assets domain.  Notice the difference between * and **.
       'http://youtu.be/**']);


     });

This will let any embed video from youtube to be loaded.


#7

Hmm, doesn’t seem to be working… I’m getting this error print out in the Xcode console.

Failed to load webpage with error: The operation couldn’t be completed. (NSURLErrorDomain error -999.)


#8

Alright, try just disabling it all together to see if thats the issue.

$sceProvider.enabled(false);

#9

Nope, no cigar. Odd.


#10

Indeed, odd. It could be the directive that you have to create the fluid video. Try loading the video with out that plugin and report back.

If your using that plugin for a fluid video, you actually can do it with just css FYI. Check this codepen out.


#11

Nope, same problem, same error. Doesn’t like the ssl https:// for the iframe src. For now I just have a regex rewriting all my iframe src’s to the http:// protocol but it’s still odd that it’s an issue.


#12

Yeah, I just did a quick search and came across a lot of results saying that mixing http pages and https iframes is no good. They don’t play well with each other and can cause issues.

Not sure why it only happens on your device though…hmm. Best bet right now is to do as you said, replace the https with http and see if that solves your problem.


#13

@mhartington Thank you for the info! Worked! :smiley:


#14

Thanks it works @mhartington.


#15

For anyone else who stumbles across this:

I’m currently able to use either https if available or to fallback to http and the iframe still displays (I’m displaying an mjpeg). However if I didn’t explicitly state which to use, the iframe wouldn’t display on a device (fine in an emulator though). For me this meant that //livestream.example.com had to be either https:////livestream.example.com or http:////livestream.example.com. The 4 slashes were counter-intuitive to me, so I thought this could help someone else too.