0

I am having trouble getting ng-src to work with a Chrome extension I am making with Angular. I figured out that I needed to use $sce to sanitize the URL. In my controller I have:

chrome.storage.sync.get({calendar: '', tasklist: ''}, function(items) {
  var src = 'https://calendar.google.com/calendar/embed?src=' + items.calendar;
  $scope.calendar = $sce.trustAsResourceUrl(src);
});

Then in my HTML, I have:

<iframe class="full-width" id="calendar-embed" ng-src="{{ calendar }}" style="border: 0" width="100%" height="500" frameborder="0" scrolling="no"></iframe>

I also have *://calendar.google.com/** whitelisted in my config.

What I am forgetting? Does it have something to do with the asynchronous call to the chrome.storage API?

Jordan Rhea
  • 1,186
  • 15
  • 34

1 Answers1

0

Ok, I figured out that the problem was with the "content_security_policy" in the manifest file, and is possibly an intended behavior. There is a workaround that I found on SO: Injecting iframe into page with restrictive Content Security Policy

Not sure if this is best practice, but it worked.

Community
  • 1
  • 1
Jordan Rhea
  • 1,186
  • 15
  • 34