jquery ajax iis filesystems basic-authentication

Files requiring authentication when folder is already authenticated ajax

Intro:

I have a website in IIS and it have a folder called "container/files" which needs basic authentication to access, the folder files will have some 8 to 9 files which a user will download through my website. Also I want to store username and password inside the application, so don't want to see that windows dialog for authentication.

What I have Done:

I have written a ajax request which gives me access to the folder and lists all the files using my userID and password, but when I click on a file to download, it asks me for authentication again.

What I want to Achieve:

How do I bypass this file level authentication as user is already authenticated to access this folder, why can't he just download the files.?

My code :

$(function() {

    var id = "ss221",
        pass = "test12",
        url = "container/files/",
        $s = $(".shell ul");

    // Setup our method to retrieve the file list
    var getFiles = function() {
        $.ajax({
            url: url,
            type: 'GET',
            headers: {
                "Authorization": "Basic " + btoa(id + ":" + pass)
            },
            success: function(data) {
                alert('ok');
                var links = $(data).find("a");
                // for each item in links...
                links.each(function(l) {
                    // extract the href attr
                    var href = $(this).attr("href");
                    $s.append("<li><a target='_blank' href=\"" + href + "\">" +
                        $(this).text() + "</a></li>");
                });
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                alert("error");
            }
        });
    };
    // assign my click handler to #btnGet
    $("#btnGet").click(function() {

        $(".shell ul").empty();
        getFiles();
    });
});

.shell {
    width: 300px;
}

.shell ul li {
    list-style: none;
}

.shell a {
    color: #232323;
    display: block;
    width: 100%;
    height: 30px;
    margin: .5em 0;
    padding: 5px 10px;
    font-weight: bold;
    border: 1px solid #999;
    border-radius: 3px;
    text-decoration: none;
}

<!doctype html>
<html>
<meta charset="utf-8">

<head>
    <style type="text/css">

    </style>
</head>

<body>
    <div>
        List All files here...
    </div>
    <button id="btnGet">
        get</button>
    <div class="shell">
        <!-- This is the place we're going to build our list -->
        <ul>
        </ul>
    </div>
</body>
<!-- Get us some jQuery goodness! -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>
<script type="text/javascript">
</script>

</html>

Solution

Solved this issue by updating above code and calling ajax promise on all files also so that whenever folder gets authenticated and displays all files, clicking on files will authenticate them with same creds and it will open the files too.

$(function() {

  var id = "ss221",
    pass = "test12",
    $s = $(".shell ul");

  // Setup our method to retrieve the file list
  var getAuthenticated = function(url) {
    return $.ajax({
      url: url,
      type: 'GET',
      headers: {
        "Authorization": "Basic " + btoa(id + ":" + pass)
      }
    });
  };
  $(".shell ul").empty();
  var promise = getAuthenticated("files/");
  promise.success(function(data) {

    var links = $(data).find("a");
    // for each item in links...
    links.each(function(l) {
      if (l > 0) {
        // extract the href attr
        var href = $(this).attr("href");
        $s.append('<li><a class="file-download" rel="nofollow" onclick="' + getAuthenticated(href) + '"  href="' + href + '" >' +
          $(this).text() + '</a></li>');
      }

    });

    $("#downloadBtn").on("click", function(e) {
      e.preventDefault();
      $('.file-download').multiDownload({
        delay: 500
      });
    });

  });



});

.shell {
  width: 300px;
}
.shell ul li {
  list-style: none;
}
.shell a {
  color: #232323;
  display: block;
  width: 100%;
  height: 30px;
  margin: .5em 0;
  padding: 5px 10px;
  font-weight: bold;
  border: 1px solid #999;
  border-radius: 3px;
  text-decoration: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="shell">
  <!-- This is the place we're going to build our list -->
  <ul>
  </ul>
  <input type="button" id="downloadBtn" value="Download ALL">
</div>