Sanitize URL in Angular 4 - Working with Base64 Images

By -
Handling Images is a very common in most of the web applications. Typically we need to render image in a webpage (very common) and some times we need to provide an user interface to upload images, editing images etc.

We can save the uploaded image in the web application in multiple ways. For instance we can save images in base64 encoded format in database or we can save the uploaded images in file system on the server and store the image path in database. It has it's own advantages and disadvantages.

Angular applications sometimes does not show the image if the image is in base64 econdoed form. While loading base64 images in Angular Application, based on different factors like Content Security Policy etc, Angular does not allow to load base64 encoded images in the HTML. It will append unsafe to the url, as a result the HTML does not show the image properly.

For instance if I want to show the following image which is in base64. 

data:image/png;base64,aaaiskkAAAANSUhEUgAAAPAAAADwCAYAAAA+VemSAAAgAEl...==
I will have something similar in the HTML 

<p><img src="data:image/jpeg;base64,/aaaiskk....></p>
But due to Content Security policy Angular will not load the above URL. And if we see the HTML source of the page though browsers tools such as Inspect in Chrome or Page Source in Firefox then you will see that unsafe is appended before the base64 URL.

One way to workout in Angular is to Sanitize the URL so that Angular can load the URL. For that we can import DomSantitizer from @angular/platform-browser.

//Angular Controller
import {DomSanitizer} from '@angular/platform-browser';
export class Base64ImageComponent implements OnInit{
  
  constructor(private sanitizer: DomSanitizer) { }
  
  sanitize(url: string) {
    //return url;
    return this.sanitizer.bypassSecurityTrustUrl(url);
  }  
}
//Template HTML 
<img [src]="sanitize(filePreview)"/>
A example plunker with full code can be found here https://embed.plnkr.co/dGJDKH0ZfouNskRbZmFz/?show=preview%23%2Fitems%2FLH

Comments

  1. AnonymousJuly 16, 2018 at 8:03 PM

    thanks for posting this, this was exactly i was facing. Is there any OOTB components that Angular provides to deal with this.

    ReplyDelete
    Replies
    1. Siddhartha BJuly 30, 2018 at 9:18 PM

      I am not aware of any OOTB components that can do this.

      Delete
  2. AnselmAugust 28, 2023 at 12:27 AM

    your tutorial is a game-changer! Your in-depth explanation and practical examples illuminate the intricacies of handling decoded images. What Fastest Cryptocurrency Your expertise aids developers in effectively integrating and manipulating them.

    ReplyDelete

Post a Comment

Popular posts from this blog

Difference between volatile and synchronized

By -
volatile is a field modifier, while synchronized modifies code blocks and methods. So we can specify three variations of a simple accessor using those two keywords: int i1; int geti1() {return i1;} volatile int i2; int geti2() {return i2;} int i3; synchronized int geti3() {return i3;} geti1() accesses the value currently stored in i1 in the current thread . Threads can have local copies of variables, and the data does not have to be the same as the data held in other threads. In particular, another thread may have updated i1 in it's thread, but the value in the current thread could be different from that updated value. In fact Java has the idea of a "main" memory, and this is the memory that holds the current "correct" value for variables. Threads can have their own copy of data for variables, and the thread copy can be different from the "main" memory. So in fact, it is possible for the "main"
Read more

Converting Java Map to String

By -
Java Collections framework, String manipulation etc is something that we often encounter in Development process. For processing collections (like checking null/empty, Intersection, Disjunction) We do have some of the very use full libraries. Some of the Collection related libraries are Apche Commons Collections and Google  Collections(Guava). Problem Use Case This article explains how to convert a Java Map to String(and vice versa) using different libraries and technique. One way is to use StringBuilder(Or String) and loop though the Map and build the String by applying some sort of separator ( for key:value and entry). Here we have to take care of the null value etc. Without Any Library If we want to convert the map to a String with key value separator and also individual entry seperator in the resulting String, we have to write code for that. For a simple Map, we have to iterate though the map, take care of the null values etc. Following is a sample to get String built
Read more

Masking Credit Card number in Java

By -
Sometimes we need to mask crucial information like Credit Card Numbers, CVV numbers etc before storing  or logging the information. This example mask Credit Card Number (Except last 4 Digit) from a Text which contains information along with Credit Card Number. The following example demonstrates how we can easily mask the credit card with Matcher and Pattern Classes. This Sample Code uses Matcher and Pattern. Pattern Used in this sample is not optimized for Credit Card Numbers, this pattern will get any numerical numbers in the String Content.  Based on the Credit Card Type a more efficient and Strict RegEx can be used to mask the Credit Card. /**Mask the Credit card number but last four digit value **/   Pattern PATTERN = Pattern.compile( "[0-9]+" ); String message = content; Matcher matcher = PATTERN.matcher(message); String maskingChar = "*"; StringBuilder finalMask = new StringBuilder(maskingChar);
Read more