I have been working on a chrome extension using Angular 5.
I am able to successfully read favIconUrls from the tabs API, and bind them to the DOM of my popup.html. These icons are downloaded and displayed without issue. An example request is below.
date:Mon, 08 Jan 2018 16:43:03 GMT
expires:Mon, 08 Jan 2018 20:43:03 GMT
last-modified:Fri, 22 Dec 2017 22:51:08 GMT
accept-encoding:gzip, deflate, br
user-agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
This request is being made by angular’s platform-browser module.
I want to base64 encode each favicon image and so have been using the fileReader API to read the favIconUrl and convert it into a base64 encoded dataUrl. This works for some resources and not others (depending on CORS).
An example failed request looks as follows.
Provisional headers are shown
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.84 Safari/537.36
Query String Parameters
view URL encoded
I understand that this request is being blocked as CORS is preventing the origin (my chrome extension) from retrieving the resource. What I’m struggling to understand is how is the same extension, through angulars platform browser module, able to successfully load the resource inside its DOM? Surely this is also in breach of CORS? The request does not show an origin is being set by platform-browser.
Any help in understanding what is going on would be very much appreciated.