Base solution for your next web application
Open Closed

ERROR Error: unsafe value used in a resource URL context #10552


User avatar
0
KarakTheWise created

Version 9.2.0 Product type: Angular .NET Core

Greetings,

I've been working on getting a binary object to a PDF in an iframe and have succeeded in doing so today. I'm happy about that but I am getting the error in the console that I listed as the subject.

I am using this._sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64' + this.guestDocument); in hopes of removing the error. I don't see you guys getting an errror when passing the string for the user picture in 'create-or-edit-user-modal'.

this.profilePicture = 'data:image/jpeg;base64,' + result.profilePicture;

Is there something I'm missing?

Thanks!


6 Answer(s)
  • User Avatar
    0
    musa.demir created

    Hi @KarakTheWise

    AspNet Zero stores profile pictures as a base64 string. But when we use it in client side we pass it as a file. See: https://github.com/aspnetzero/aspnet-zero-core/blob/c3a483eaac57057c55b338db62d73e6d75e9c98d/aspnet-core/src/MyCompanyName.AbpZeroTemplate.Web.Core/Controllers/ProfileControllerBase.cs#L99

    If what your app services returns is base64 string, you should not need to implement any other security things. Because base64string result is just a string result. Can you please check the ProfileControllerBase.

  • User Avatar
    0
    KarakTheWise created

    Thank you for the response. Here what I'm returning, which to me looks like it should be a base64 string:

    Dto:

    public class GetGuestDocumentOutputDto { public string GuestDocument { get; set; }

    public GetGuestDocumentOutputDto(string guestDocument) { GuestDocument = guestDocument; }

    }

    This is the method in the app service that's called in Angular:

    public async Task GetGuestDocument(Guid documentId) { var guestDocument = await _binaryFileUploadManager.GetBinaryFileOrNullAsync(documentId);

    `var guestDoc = Convert.ToBase64String(guestDocument.Bytes);
    
    return new GetGuestDocumentOutputDto(guestDoc);`
    

    }

    Am I missing something? If the string property of the Dto is set by Convert.ToBase64String, shouldn't it be a base64 string?

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi,

    I think this happens because you are using an iframe. Have you checked https://stackoverflow.com/questions/37927657/img-unsafe-value-used-in-a-resource-url-context ?

  • User Avatar
    0
    KarakTheWise created

    Update: I was successful in using the function call as described in the Stack forum:

    guestDocumentURL() { return this._sanitizer.bypassSecurityTrustResourceUrl('data:application/pdf;base64' + this.guestDocument); }

    <iframe id="documentIframe" [src]="guestDocumentURL()" style="width: 1056px; height:800px"></iframe>

    Thanks for the help and the Stack link. I'm out of town for the holiday weekend but will check it out first of next week.

    As I'm looking at this, I'm wondering is there a better way to do this and not use the iframe? The reason behind the iframe was that I could bind the string to the src property:

    <iframe id="documentIframe" [src]="guestDocument" style="width: 1056px; height:800px"></iframe>

    I wasn't sure how else to diplay the it otherwise.

  • User Avatar
    0
    ismcagdas created
    Support Team

    Hi @KarakTheWise

    Thanks for the update, you can also try using a library similar to https://github.com/stephanrauh/ngx-extended-pdf-viewer

  • User Avatar
    0
    KarakTheWise created

    Thank you! I've looked into that library and may try it out. Thanks for all the help!