In this lecture, we are going to bypass sanitization performed by Angular.
Behind the scenes angular lengths to sanitize our data before rendering the template.
It's a security feature automated by angular.
We never had to worry about it before.
Unfortunately, it's going to cause problems with our images.
To understand why, let's try rendering the images after receiving them from the service.
We're going to shift our focus to the upload component class file.
Open it in your editor.
The first step is to store the array of image URLs in the component as a local property inside the component
class at a property called Screenshots.
We will initialize it as an empty array.
Next, we're going to add a type by annotating the property to an array of strings.
The last step is to update this property after receiving the screenshots.
Scroll to the store file function.
We're going to update the property to the resolved value by the Get Screenshots function.
Our component has everything it needs.
We can proceed to render the images in the templates.
Let's open the upload template file.
In this template, search for these screenshots section, you can find it by searching for a comment
that says screenshots.
Under this section, we have a list of dummy screenshots.
For the longest time, the image links have been broken.
We can finally fix this mess by rendering the screenshots we've captured inside the first div tag.
There are three pairs of div tags.
This part of the template should be looped through.
First, let's remove the last two dummy images.
We only need to loop through one of them next, apply the energy for directive to the div tag.
We're going to loop through these screenshots property.
The alias for each item in the array will be screenshot.
Lastly, we can bind the source attribute on the image tag to the screenshot variable.
Like I said before, we're going to encounter an error with this finding.
Let's refresh the upload page with the developer tools opened.
Everything seems fine so far.
Let's try uploading a file.
After a few moments, the images remain broken.
We are given three broken images on the page.
It seems like angular can loop through the array.
So what's the problem inside the console?
The browser will tell us it does not recognize the URL at the beginning of the URL.
It starts with the word unsafe.
This text is the culprit behind our error.
Hyperlinks and image sources are sanitized by angular.
If angular doesn't trust the URL, it'll prefix the URL with the word unsafe.
This behavior will cause the browser to throw an error, thus preventing the image from appearing on
the page.
This feature can be helpful for preventing attacks on our app.
We've benefited from this feature and will continue to benefit from it.
However, we're in a situation where we will need to bypass this feature.
Angular has a class for bypassing sanitization.
Let's give it a try.
Switch over to the command line in your editor.
We're going to create a custom pipe.
Bypassing sanitization will require modifications to the URL.
It's not something we want to apply permanently.
Pipes are ideal for this situation.
They transform the output, but do not directly mutate the property in the command line.
We can create a pipe by running the following command Njie G pipe.
VIDEO Slash pipes slash safe URL.
The pipe will be registered under the video module.
We don't need to use it anywhere else.
According to the Seelye, it's automatically declared in the module.
We do not need to manually register our new pipe.
In addition to files have been created, a test file and the class itself.
Let's open the class file.
Inside this file will be given the basic setup for a pipe.
Pipes are decorated with the pipe decorator.
The minimum configuration for a pipe is a name.
The name of our pipe is safe.
You are, well, we're going to leave the name alone.
I think it's fine, as is moving along.
The class is implementing an interface called pipe transform.
This interface will force the class to define a method called transform.
Behind the scenes, angular calls the transform method to process a value.
We can write our logic inside this method.
Before we do, let's import a class called Dom Sanitizer from the angular platform browser package.
The dome sanitizer class is an injectable service for bypassing angular sanitization.
We're going to need it for generating a valid URL inside the class defined the constructor function.
Next, inject this class with the alias of sanitizer.
We can begin working on the transform method.
We're going to make a few modifications to the method.
Firstly, we're going to update the argument list by removing the second argument.
The second argument is an additional list of arguments we can choose to support arguments in our pipes.
But for this example, accepting the value will be enough.
As for the first arguments, it'll contain the value the pipe is applied to.
We're going to change the type to string.
The URLs are stored as strings.
We don't need to annotate the argument with the unknown type.
As for the return value, it can be inferred by the function.
We're going to remove it.
Inside the function, we're going to return the following this dot sanitise dot bypass security trust
u r l value.
The bypass security trust you l function will accept a URL it over turn an object called safe URL angular
will wrap our URL with this object during the rendering phase of an app.
It'll unwrap the value without sanitizing it.
Therefore, we can bind image sources and links to this object.
It can be dangerous to use this function.
You should be extra cautious whenever dealing with unsafe URLs.
This is one of those rare cases where we'll need to use an unsafe URL.
Let's apply of this pipe to our template.
Switch back to the template file and the binding for the images source.
Add these safe you URL pipe.
Next, let's try uploading a file in the browser.
After a few moments, our images appear amazing.
We spent a good amount of time trying to generate screen shots after all our hard work.
We've captured screenshots with WebAssembly and FFmpeg.
Hopefully, you're starting to see the power of web assembly.
The last steps are to submit the screenshot to Firebase.
Let's begin to tackle this action in the next set of lectures.