locked
Few questions on WebAPI RRS feed

  • Question

  • User240536124 posted

    I'm a little out of my area here. I created my first WebAPI and have just a few questions that I haven't been able to find out via searching. I have a working WebAPI (locally and in production). It cuts the image size client side before uploading and I used this "how to": https://onezeroeight.co/code/web/compress-image-before-after-upload/#WebAPICode

    1) It's all at the same domain, so I did not enable CORS as the author of the above link did. The page sending the data will have security on it and requires a login. Without CORS enabled, how secure is this WebAPI?

    2) I need to make a new, unrelated WebAPI that will be accessed from a Windows .exe program.  Since the program isn't at the same domain, do I have to enable CORS for this WebAPI to work? 

    3) The first two questions are the most important to me, but if anyone can throw their two cents in here, it would be most appreciated. The image is being transferred using Ajax and a dataURL (ajax call below). I would really like to catch the uploaded file name and send it with the dataURL, possibly another variable, as well. Can anyone suggest the best way to go about doing this? If I just get the right terminology going, sometimes it helps me search for solutions better. I got nothing on this one.

    4) Again, not as important a question, but the upload page usually gets images, but sometimes a PDF. Obviously, not going to process that client side and compress it. Anyone care to suggest how they would separate out the PDF. I'm not sure it even needs to go to the WebAPI, as the current upload page handles it just fine at point. However, it might be cleaner to send it all to the WebAPI, so all the code is in the same place.

    Again, someone's input would be much appreciated. Thanks,

    $.ajax({
    url: "http://<<Server address>>/api/images",
    type: "POST",
    data: 'image=' + dataURL,
    contentType: "application/x-www-form-urlencoded",
    success: function (data, textStatus, jqXHR) {
    console.log('posted image');
    },
    error: function (jqXHR, textStatus, errorThrown) {
    console.log('error posting image');
    }
    });
    
    
    

    Monday, November 23, 2020 7:58 PM

Answers

  • User-474980206 posted

    as you are doing a form post, to pass more data just use query's standard data format:

    $.ajax({
       url: "http://<<Server address>>/api/images",
       type: "POST",
       data: { 
          image: dataURL,
          name: fileName
       }
       contentType: "application/x-www-form-urlencoded",
       success: function (data, textStatus, jqXHR) {
          console.log('posted image');
       },
       error: function (jqXHR, textStatus, errorThrown) {
          console.log('error posting image');
       }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 23, 2020 10:37 PM
  • User475983607 posted

    To be clear: if someone knew to send a dataURL of an image to http://mydomain/api/image  then it would actually work and anyone on the Internet could possibly upload an image this way?

    Yes.

    Am I misunderstanding what CORS actually does?

    CORS only work in a browser with AJAX.  Any code based client, like .exe apps, can still access Web APi. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 25, 2020 12:31 AM

All replies

  • User475983607 posted

    jay8anks

    1) It's all at the same domain, so I did not enable CORS as the author of the above link did. The page sending the data will have security on it and requires a login. Without CORS enabled, how secure is this WebAPI?

    Securing Web API is covered in the official docs.

    https://docs.microsoft.com/en-us/aspnet/core/security/authentication/?view=aspnetcore-5.0

    https://docs.microsoft.com/en-us/aspnet/core/security/authorization/introduction?view=aspnetcore-5.0

    There are many ways to secure Web API.  Probably the easiest is basic authentication of only the web app accesses the Web API.  Another common method is using JWT tokens.  The framework comes with libraries to handle JWT if you go that direction.

    jay8anks

    2) I need to make a new, unrelated WebAPI that will be accessed from a Windows .exe program.  Since the program isn't at the same domain, do I have to enable CORS for this WebAPI to work? 

    CORS only affects browsers.

    https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

    jay8anks

    3) The first two questions are the most important to me, but if anyone can throw their two cents in here, it would be most appreciated. The image is being transferred using Ajax and a dataURL (ajax call below). I would really like to catch the uploaded file name and send it with the dataURL, possibly another variable, as well. Can anyone suggest the best way to go about doing this? If I just get the right terminology going, sometimes it helps me search for solutions better. I got nothing on this one.

    You did not provide the actual code.  Usually the file name is part of the HTTP request and uploaded along with the file.  Any beginning level tutorial on file upload covers this.

    https://docs.microsoft.com/en-us/aspnet/core/mvc/models/file-uploads?view=aspnetcore-5.0

    jay8anks

    4) Again, not as important a question, but the upload page usually gets images, but sometimes a PDF. Obviously, not going to process that client side and compress it. Anyone care to suggest how they would separate out the PDF. I'm not sure it even needs to go to the WebAPI, as the current upload page handles it just fine at point. However, it might be cleaner to send it all to the WebAPI, so all the code is in the same place.

    The file extension identifies the file type.

    Monday, November 23, 2020 9:11 PM
  • User-474980206 posted

    as you are doing a form post, to pass more data just use query's standard data format:

    $.ajax({
       url: "http://<<Server address>>/api/images",
       type: "POST",
       data: { 
          image: dataURL,
          name: fileName
       }
       contentType: "application/x-www-form-urlencoded",
       success: function (data, textStatus, jqXHR) {
          console.log('posted image');
       },
       error: function (jqXHR, textStatus, errorThrown) {
          console.log('error posting image');
       }
    });

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, November 23, 2020 10:37 PM
  • User240536124 posted

    I got it to pass the file name to the WebAPI. I had a couple of issues, but the main one was I had a few test scripts on the same page and was actually working on the wrong script (D'oh). Basically, just added it to the string with a character to use to split the string and get my file name out. Then passed the rest of the dataURL on to get the image out.

    Other thing was, I had another working ajax script that did it by passing an object. I never could get this way to work and pass the dataURL at the same time. Just wasn't happening.

    Thanks,

    Tuesday, November 24, 2020 11:56 PM
  • User240536124 posted

    I actually looked at a few of those links before posting here. My line of thinking is that since nobody could get to the upload page without logging in -- plus access to the page is controlled by role -- that it should be fairly secure...plus without CORS on, any call made would have to come from within my own domain.

    To be clear: if someone knew to send a dataURL of an image to http://mydomain/api/image  then it would actually work and anyone on the Internet could possibly upload an image this way?

    Am I misunderstanding what CORS actually does?

    Thanks,

    Wednesday, November 25, 2020 12:10 AM
  • User475983607 posted

    To be clear: if someone knew to send a dataURL of an image to http://mydomain/api/image  then it would actually work and anyone on the Internet could possibly upload an image this way?

    Yes.

    Am I misunderstanding what CORS actually does?

    CORS only work in a browser with AJAX.  Any code based client, like .exe apps, can still access Web APi. 

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, November 25, 2020 12:31 AM
  • User240536124 posted

    I actually read the link you suggested before posting here. I missed the [Authorize] attribute somehow. That was super easy and does exactly what I want. For the .exe file I'm stuck working on, I came up with passing an encrypted, expiring token. Should work fine for my purposes.

    Thanks,

    Sunday, November 29, 2020 7:16 PM
  • User240536124 posted

    If anyone is interested, I uploaded a working demo here: https://github.com/jay8anks/ImgResizeAndUpload

    It resizes an image client side before uploading it. If the file is a pdf, it just uploads it.

    In addition to OneZeroEight's code, it adds:

    1. The ability to handle a PDF.
    2. The ability to pass file names and other parameters to the WebAPI.
    3. Creates an image thumbnail now.
    4. Sets up the ability to save everything to a database.

    (It does not make thumbnails of PDFs. That's a pain). :)

    Sunday, November 29, 2020 7:22 PM