I want to bind iframe in a div that is returning by my database,
<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Is this possible to bind in following div
<div ng-app="myApp" ng-controller="dummy">
You will need to use the $sce service in conjunction with ng-bind-html in order to parse the string as safe HTML.
If your string is:
"<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>"
Then you need to replace the " with apostrophes and then parse it as safe HTML, as such:
dummy.unsafeIframeCode = "<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>";
dummy.unsafeParsedIframeCode = dummy.unsafeIframeCode.replace(/\"\;/gi, "'");
dummy.safeIframeCode = $sce.trustAsHtml(dummy.unsafeParsedIframeCode);
And simply bind it in HTML as such:
<div ng-app="myApp" ng-controller="dummy" ng-bind-html="dummy.safeIframeCode">
Full working JSFiddle here
ng-bind-html willn't work for binding your iFrame, because the sanitizer is protecting your app from potential XSS attacks.
If you trust/control the data source completely, you can look into using trustAsHtml
e.g. scope.trustedData = $sce.trustAsHtml(content); in your directive controller(where content is your iFrame "<iframe.../>"), and <div ng-bind-html="trustedData"></div> in the DOM. It'll do the task for you.
Related
I am attempting to render Youtube videos along with content. The content renders however the embedded Youtube video is not. I read that I need to white list youtube for rending but I think my setup needs adjustment. My content comes through in a ng-repeat like such:
ng-bind-html=activity.content
Here is a song to listen to:
<iframe width="560" height="315" ng-src="https://www.youtube.com/embed/dcdgV0eYLSQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
template looks like such
<div class="activity" ng-bind-html="activity.content"></div>
I tried setting a whitelist url to the $sceDelegateProvider but I think I am missing a step. How do I make sure that youtube is accepted? It currently isn't.
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*://www.youtube.com/**'
]);
});
You can use a filter that returns the function to trust that resource.
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
And then apply it to your binding like this
<div class="activity">
<iframe ng-src="{{embed | trustAsResourceUrl}}" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Working plunker
My code lets people select youtube videos to show. The code is written in angular and I simply want to populate the iframe components with the angular variables. Here are some of the things I have tried and none of them work.
Produces Error
<div>
<iframe width="{{obj.content.videoWidth}}"
height="{{obj.content.videoHeight}}"
ng-src="{{obj.content.url}}"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Does nothing
<div>
<iframe width="{{obj.content.videoWidth}}"
height="{{obj.content.videoHeight}}"
ng-src="obj.content.url"
frameborder="0"
allowfullscreen>
</iframe>
</div>
How do I make this work?
i have a div which contains iframe datas such as
<div class="video-container" ng-bind-html="trustedContentSce(value.content)" class="item"></div>
<p ng-bind-html="value.content"></p>
and in controller
$scope.trustedContentSce=function(value){
return $sce.trustAsHtml(value)
};
and also included following in app.config
$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
I Receive data in value.content as
<iframe width="560" height="315" src="https://www.youtube.com/embed/lGP1YFE5s4M" frameborder="0" allowfullscreen></iframe>
and while posting through my app
<iframe width="560" height="315" src="https://www.youtube.com/embed/fk4BbF7B29w" frameborder="0" allowfullscreen></iframe>
which is pretty much same. isn't it?
Here is screen shot of problem i am facing (above video is posted from app and one below is posted from web
I still don't have an answer but i found a workAround. Before I used Text editor in php but when i use textarea it worked. don't know why ? isn't this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/lGP1YFE5s4M" frameborder="0" allowfullscreen></iframe>
and this considered same when used ng-bind-html :
<iframe width="560" height="315" src="https://www.youtube.com/embed/fk4BbF7B29w" frameborder="0" allowfullscreen></iframe>
If I want to call a link into iframe with angular Js, I do this:
in HTML
<iframe width="560" height="315" ng-src="{{customUrl}}" frameborder="0" allowfullscreen></iframe>
In script
$scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio');
but what about if I want to make a ng-repeat with several iframes?
May I make something like this (obviously not this)?
$scope.videoList = [video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio'),
video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio'),
video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio')
]
Try this: Works Well !! http://plnkr.co/edit/zf2YDyesNZXWwMrygNG1?p=preview
HTML:
<div ng-repeat = "src in sources track by $index">
<iframe width="560" height="315" ng-src="{{getTrust(src)}}" frameborder="0" allowfullscreen></iframe>
</div>
JS:
$scope.sources = ['https://www.youtube.com/embed/ie06-rsfgio',
'https://www.youtube.com/embed/ie06-rsfgio',
];
$scope.getTrust = function(src){
return $sce.trustAsResourceUrl(src);
};
My HTML page looks like this:
<div>
<iframe margin="0" padding="0" border="none" width="420" height="345" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
'exercise_video_url' I am setting in my controller like following:
$http.get("https://localhost:8000/api/exercises/initial/").then(function(response){
$scope.initial_data=response.data;
angular.forEach($scope.initial_data, function(item){
$scope.exercise_type=item.exercise_type;
$scope.exercise_description=item.description;
$scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
})
I am fetching a particular exercise related information from my Django view, exercise model has a video_url as an attribute. I read somewhere and injected $sce service in my angular controller.
the video link itself looks like 'https://youtu.be/******' --> * are few random characters. This link works fine independently if you hit it in a browser or give as a source to ng-src directly.
I also tried commenting 'django.middleware.clickjacking.XFrameOptionsMiddleware' in my settings.py
Its your YouTube url your using, it needs to be the embed version. I just fixed similar issue on my site and worked.
Since your embedding it into an iframe it only makes since to use the YouTube embed url.
so example don't use the short url for embedding in iframes, use the embed url.
WRONG: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/watch?v=xWRNBOXoLf8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
RIGHT: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Use https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1