1 00:00:00,150 --> 00:00:04,860 In this lecture, we are going to bypass sanitization performed by Angular. 2 00:00:05,190 --> 00:00:10,530 Behind the scenes angular lengths to sanitize our data before rendering the template. 3 00:00:10,860 --> 00:00:13,710 It's a security feature automated by angular. 4 00:00:13,980 --> 00:00:16,110 We never had to worry about it before. 5 00:00:16,410 --> 00:00:20,340 Unfortunately, it's going to cause problems with our images. 6 00:00:20,550 --> 00:00:26,370 To understand why, let's try rendering the images after receiving them from the service. 7 00:00:26,850 --> 00:00:31,140 We're going to shift our focus to the upload component class file. 8 00:00:31,620 --> 00:00:33,120 Open it in your editor. 9 00:00:35,710 --> 00:00:43,300 The first step is to store the array of image URLs in the component as a local property inside the component 10 00:00:43,300 --> 00:00:46,360 class at a property called Screenshots. 11 00:00:46,540 --> 00:00:49,240 We will initialize it as an empty array. 12 00:00:51,800 --> 00:00:57,110 Next, we're going to add a type by annotating the property to an array of strings. 13 00:00:59,600 --> 00:01:04,250 The last step is to update this property after receiving the screenshots. 14 00:01:04,489 --> 00:01:06,890 Scroll to the store file function. 15 00:01:07,190 --> 00:01:12,620 We're going to update the property to the resolved value by the Get Screenshots function. 16 00:01:15,210 --> 00:01:17,580 Our component has everything it needs. 17 00:01:17,790 --> 00:01:21,090 We can proceed to render the images in the templates. 18 00:01:21,360 --> 00:01:23,880 Let's open the upload template file. 19 00:01:26,370 --> 00:01:32,490 In this template, search for these screenshots section, you can find it by searching for a comment 20 00:01:32,490 --> 00:01:34,170 that says screenshots. 21 00:01:36,620 --> 00:01:40,250 Under this section, we have a list of dummy screenshots. 22 00:01:40,520 --> 00:01:43,880 For the longest time, the image links have been broken. 23 00:01:44,180 --> 00:01:51,140 We can finally fix this mess by rendering the screenshots we've captured inside the first div tag. 24 00:01:51,320 --> 00:01:53,810 There are three pairs of div tags. 25 00:01:54,140 --> 00:01:56,750 This part of the template should be looped through. 26 00:01:57,140 --> 00:02:00,740 First, let's remove the last two dummy images. 27 00:02:03,230 --> 00:02:10,250 We only need to loop through one of them next, apply the energy for directive to the div tag. 28 00:02:12,680 --> 00:02:15,650 We're going to loop through these screenshots property. 29 00:02:15,920 --> 00:02:19,700 The alias for each item in the array will be screenshot. 30 00:02:22,190 --> 00:02:28,430 Lastly, we can bind the source attribute on the image tag to the screenshot variable. 31 00:02:30,970 --> 00:02:35,170 Like I said before, we're going to encounter an error with this finding. 32 00:02:35,440 --> 00:02:39,280 Let's refresh the upload page with the developer tools opened. 33 00:02:41,810 --> 00:02:43,820 Everything seems fine so far. 34 00:02:43,970 --> 00:02:45,830 Let's try uploading a file. 35 00:02:48,390 --> 00:02:51,570 After a few moments, the images remain broken. 36 00:02:51,870 --> 00:02:55,020 We are given three broken images on the page. 37 00:02:55,230 --> 00:02:58,110 It seems like angular can loop through the array. 38 00:02:58,410 --> 00:03:01,630 So what's the problem inside the console? 39 00:03:01,650 --> 00:03:07,770 The browser will tell us it does not recognize the URL at the beginning of the URL. 40 00:03:07,830 --> 00:03:10,200 It starts with the word unsafe. 41 00:03:10,530 --> 00:03:13,540 This text is the culprit behind our error. 42 00:03:13,920 --> 00:03:17,700 Hyperlinks and image sources are sanitized by angular. 43 00:03:18,000 --> 00:03:23,850 If angular doesn't trust the URL, it'll prefix the URL with the word unsafe. 44 00:03:24,210 --> 00:03:30,390 This behavior will cause the browser to throw an error, thus preventing the image from appearing on 45 00:03:30,390 --> 00:03:31,080 the page. 46 00:03:31,590 --> 00:03:35,490 This feature can be helpful for preventing attacks on our app. 47 00:03:35,820 --> 00:03:40,020 We've benefited from this feature and will continue to benefit from it. 48 00:03:40,320 --> 00:03:45,000 However, we're in a situation where we will need to bypass this feature. 49 00:03:45,300 --> 00:03:48,780 Angular has a class for bypassing sanitization. 50 00:03:49,080 --> 00:03:50,250 Let's give it a try. 51 00:03:50,520 --> 00:03:53,370 Switch over to the command line in your editor. 52 00:03:53,970 --> 00:03:56,220 We're going to create a custom pipe. 53 00:03:56,670 --> 00:04:01,380 Bypassing sanitization will require modifications to the URL. 54 00:04:01,710 --> 00:04:04,440 It's not something we want to apply permanently. 55 00:04:04,800 --> 00:04:06,960 Pipes are ideal for this situation. 56 00:04:07,230 --> 00:04:13,440 They transform the output, but do not directly mutate the property in the command line. 57 00:04:13,560 --> 00:04:19,300 We can create a pipe by running the following command Njie G pipe. 58 00:04:19,320 --> 00:04:23,520 VIDEO Slash pipes slash safe URL. 59 00:04:26,040 --> 00:04:29,070 The pipe will be registered under the video module. 60 00:04:29,310 --> 00:04:31,410 We don't need to use it anywhere else. 61 00:04:31,860 --> 00:04:36,000 According to the Seelye, it's automatically declared in the module. 62 00:04:36,180 --> 00:04:39,360 We do not need to manually register our new pipe. 63 00:04:39,630 --> 00:04:45,330 In addition to files have been created, a test file and the class itself. 64 00:04:45,630 --> 00:04:47,430 Let's open the class file. 65 00:04:49,850 --> 00:04:53,630 Inside this file will be given the basic setup for a pipe. 66 00:04:53,960 --> 00:04:56,840 Pipes are decorated with the pipe decorator. 67 00:04:57,140 --> 00:05:00,350 The minimum configuration for a pipe is a name. 68 00:05:00,680 --> 00:05:02,630 The name of our pipe is safe. 69 00:05:02,660 --> 00:05:05,540 You are, well, we're going to leave the name alone. 70 00:05:05,720 --> 00:05:08,780 I think it's fine, as is moving along. 71 00:05:08,960 --> 00:05:13,250 The class is implementing an interface called pipe transform. 72 00:05:13,670 --> 00:05:18,350 This interface will force the class to define a method called transform. 73 00:05:18,710 --> 00:05:24,080 Behind the scenes, angular calls the transform method to process a value. 74 00:05:24,380 --> 00:05:27,140 We can write our logic inside this method. 75 00:05:27,410 --> 00:05:35,420 Before we do, let's import a class called Dom Sanitizer from the angular platform browser package. 76 00:05:37,920 --> 00:05:44,010 The dome sanitizer class is an injectable service for bypassing angular sanitization. 77 00:05:44,400 --> 00:05:51,180 We're going to need it for generating a valid URL inside the class defined the constructor function. 78 00:05:53,720 --> 00:05:58,010 Next, inject this class with the alias of sanitizer. 79 00:06:00,520 --> 00:06:03,340 We can begin working on the transform method. 80 00:06:03,640 --> 00:06:06,550 We're going to make a few modifications to the method. 81 00:06:06,850 --> 00:06:11,980 Firstly, we're going to update the argument list by removing the second argument. 82 00:06:14,490 --> 00:06:21,180 The second argument is an additional list of arguments we can choose to support arguments in our pipes. 83 00:06:21,390 --> 00:06:25,020 But for this example, accepting the value will be enough. 84 00:06:25,320 --> 00:06:30,570 As for the first arguments, it'll contain the value the pipe is applied to. 85 00:06:30,900 --> 00:06:33,390 We're going to change the type to string. 86 00:06:36,100 --> 00:06:38,350 The URLs are stored as strings. 87 00:06:38,680 --> 00:06:42,310 We don't need to annotate the argument with the unknown type. 88 00:06:42,700 --> 00:06:46,610 As for the return value, it can be inferred by the function. 89 00:06:46,900 --> 00:06:48,250 We're going to remove it. 90 00:06:50,750 --> 00:06:59,090 Inside the function, we're going to return the following this dot sanitise dot bypass security trust 91 00:06:59,090 --> 00:07:00,350 u r l value. 92 00:07:02,860 --> 00:07:11,820 The bypass security trust you l function will accept a URL it over turn an object called safe URL angular 93 00:07:11,830 --> 00:07:16,660 will wrap our URL with this object during the rendering phase of an app. 94 00:07:16,860 --> 00:07:19,900 It'll unwrap the value without sanitizing it. 95 00:07:20,200 --> 00:07:24,520 Therefore, we can bind image sources and links to this object. 96 00:07:25,030 --> 00:07:27,400 It can be dangerous to use this function. 97 00:07:27,700 --> 00:07:32,080 You should be extra cautious whenever dealing with unsafe URLs. 98 00:07:32,410 --> 00:07:36,970 This is one of those rare cases where we'll need to use an unsafe URL. 99 00:07:37,240 --> 00:07:39,610 Let's apply of this pipe to our template. 100 00:07:40,240 --> 00:07:44,800 Switch back to the template file and the binding for the images source. 101 00:07:44,950 --> 00:07:47,050 Add these safe you URL pipe. 102 00:07:49,540 --> 00:07:52,990 Next, let's try uploading a file in the browser. 103 00:07:57,690 --> 00:08:01,290 After a few moments, our images appear amazing. 104 00:08:01,530 --> 00:08:07,200 We spent a good amount of time trying to generate screen shots after all our hard work. 105 00:08:07,410 --> 00:08:11,700 We've captured screenshots with WebAssembly and FFmpeg. 106 00:08:12,060 --> 00:08:15,520 Hopefully, you're starting to see the power of web assembly. 107 00:08:15,810 --> 00:08:19,710 The last steps are to submit the screenshot to Firebase. 108 00:08:19,950 --> 00:08:24,060 Let's begin to tackle this action in the next set of lectures.