1
00:00:00,090 --> 00:00:03,719
In this lecture, we are going to fix the issue with our image.

2
00:00:03,990 --> 00:00:07,620
Under normal circumstances, this issue was not common.

3
00:00:07,950 --> 00:00:11,670
We are experiencing issues because of our servers configuration.

4
00:00:11,940 --> 00:00:13,140
To understand why.

5
00:00:13,290 --> 00:00:17,490
Let's talk about a concept called cross origin resource sharing.

6
00:00:17,970 --> 00:00:21,300
First, let's talk about resources on the internet.

7
00:00:21,780 --> 00:00:26,310
A resource can be considered videos, images and even a web page.

8
00:00:26,520 --> 00:00:28,920
They are files downloaded by the browser.

9
00:00:29,190 --> 00:00:32,130
Requesting a resource can be a dangerous business.

10
00:00:32,369 --> 00:00:37,140
If your app downloads a malicious resource, it can spell trouble for your users.

11
00:00:37,710 --> 00:00:42,840
Browsers introduce a set of security policies called Cross Origin Resource Sharing.

12
00:00:43,170 --> 00:00:44,850
It's also known as cause.

13
00:00:45,180 --> 00:00:47,520
The idea of these policies is simple.

14
00:00:47,850 --> 00:00:49,920
Let's say we have a site called site.

15
00:00:49,920 --> 00:00:54,600
A Site A may want to download a JavaScript file from Site A.

16
00:00:54,900 --> 00:00:56,010
It's the same site.

17
00:00:56,700 --> 00:01:00,690
Browsers allow sites to download resources from the same site.

18
00:01:01,050 --> 00:01:04,260
This feature is known as a same origin policy.

19
00:01:04,500 --> 00:01:06,240
It makes complete sense, right?

20
00:01:06,660 --> 00:01:10,080
Apps should be able to download files hosted on the same server.

21
00:01:10,500 --> 00:01:11,820
Let's kick it up a notch.

22
00:01:12,000 --> 00:01:14,340
What if we going to go file from another site?

23
00:01:14,580 --> 00:01:20,730
For example, you may want to store your asset files on a CD, or you may want to grab files from an

24
00:01:20,730 --> 00:01:22,890
external resource like Firebase.

25
00:01:23,400 --> 00:01:26,610
This relationship is known as Cross Origin Policy.

26
00:01:26,940 --> 00:01:30,420
It's when files are hosted on different servers or origins.

27
00:01:30,750 --> 00:01:34,020
Browsers can be lenient with cross origin resources.

28
00:01:34,350 --> 00:01:39,030
For example, loading an image with the image tag doesn't produce many problems.

29
00:01:39,390 --> 00:01:43,260
Most browsers will allow you to embed images without a problem.

30
00:01:44,460 --> 00:01:47,520
And my browser, I'm viewing the home page of our app.

31
00:01:47,820 --> 00:01:51,330
I'm going to quickly inspect the image with the developer tools.

32
00:01:53,700 --> 00:01:57,240
On the source attribute, there's clearly a valid URL.

33
00:01:57,570 --> 00:02:00,030
There doesn't seem to be a problem with the URL.

34
00:02:00,360 --> 00:02:03,500
So why are the images broken on the home page?

35
00:02:04,620 --> 00:02:11,730
The problem lies with our servers, headers in the angular JSON file, we added headers to the development

36
00:02:11,730 --> 00:02:12,240
server.

37
00:02:12,540 --> 00:02:15,870
One of them was called cross origin and better policy.

38
00:02:16,260 --> 00:02:19,620
This policy enforces stricter standards on our app.

39
00:02:19,950 --> 00:02:24,660
It does not allow our app to load cross origin resources without permission.

40
00:02:25,230 --> 00:02:28,200
Our images are hosted on Firebase is server.

41
00:02:28,500 --> 00:02:33,900
By default, their servers do not permit other origins to download their resources.

42
00:02:34,170 --> 00:02:36,120
To be clear, they don't have to.

43
00:02:36,450 --> 00:02:41,010
In most scenarios, you can embed images on your app without permission.

44
00:02:41,310 --> 00:02:45,990
However, since we're adding this header, the browser wants explicit permission.

45
00:02:46,380 --> 00:02:49,560
It doesn't care if the images can be loaded without permission.

46
00:02:49,800 --> 00:02:51,600
The browser demands permission.

47
00:02:52,080 --> 00:02:53,820
Here's where things get challenging.

48
00:02:54,090 --> 00:02:56,910
It's easy to add headers to our development server.

49
00:02:57,210 --> 00:03:02,350
This time, we need to add headers to Firebase is servers, which is another story.

50
00:03:02,670 --> 00:03:05,670
Working with servers is a back and developer job.

51
00:03:05,940 --> 00:03:10,710
If you're on a team, you would communicate with your back and developer to fix this for you.

52
00:03:11,190 --> 00:03:13,770
Unfortunately, we're working independently.

53
00:03:14,040 --> 00:03:17,970
We don't have much of a choice but to take on the role of a backend developer.

54
00:03:18,270 --> 00:03:23,100
We can give permission by adding a header called Access Control Allow Origin.

55
00:03:23,460 --> 00:03:25,500
There's header can be set to a domain.

56
00:03:26,070 --> 00:03:30,090
Alternatively, we can set this header to a wildcard character.

57
00:03:30,540 --> 00:03:33,900
This value allows for any app to download files.

58
00:03:34,170 --> 00:03:38,490
I find it easier to use wildcard characters in the next lecture.

59
00:03:38,490 --> 00:03:42,750
We're going to begin updating Firebase servers to add this header.