Azure-sdk-for-js: SAS Storage Blob Connection string?

[sarink]

How do you connect via a connection string with SAS? The current examples only show something like,

const account = ''; // Fill in
const accountKey = ''; // Fill in
const sharedKeyCredential = new SharedKeyCredential(account, accountKey);
const pipeline = StorageURL.newPipeline(sharedKeyCredential);
const serviceUrl = new ServiceURL(`https://${account}.blob.core.windows.net`, pipeline);

or

  // Use AnonymousCredential when url already includes a SAS signature
  const anonymousCredential = new AnonymousCredential();


  // List containers
  const serviceURL = new ServiceURL(
    // When using AnonymousCredential, following url should include a valid SAS or support public access
    `https://${account}.blob.core.windows.net`,
    pipeline
  );

Where/how do you get a "url including SAS signature"?

And where does the SAS Token get used?

[sarink]

Update: I was able to figure this out, I just didn't fully understand how all these pieces fit together, and the docs don't explain things very well. In case it helps anyone:

const parseSasConnectionString = (connString: string) => {
  type ConnectionStringKeys = 'BlobEndpoint' | 'QueueEndpoint' | 'FileEndpoint' | 'TableEndpoint' | 'SharedAccessSignature';
  const parsed = connString.split(';').reduce((accParsed, part) => {
    const splitIndex = part.indexOf('=');
    const key = part.substring(0, splitIndex) as ConnectionStringKeys;
    const val = part.substring(splitIndex + 1);
    return { ...accParsed, [key]: val };
  }, {});
  return parsed as Record<ConnectionStringKeys, string>;
};

const parsedConn = parseSasConnectionString('your connection string');
const containerName = 'your container name';

const anonymousCredential = new AnonymousCredential();
const pipeline = StorageURL.newPipeline(anonymousCredential);
const serviceUrl = new ServiceURL(
  `${parsedConn.BlobEndpoint}?${parsedConn.SharedAccessSignature}`,
  pipeline
);
const containerUrl = ContainerURL.fromServiceURL(serviceUrl, containerName);

export const testStorageConnection = () => serviceUrl.getProperties(Aborter.none);
export const deleteContainer = () => containerUrl.delete(Aborter.none);
export const createContainer = () => containerUrl.create(Aborter.none);

[HarshaNalluru]

Thanks for the issue, @sarink.

The storage-blob version 10 API that you've been using doesn't provide the support for passing the connection string directly.

The new support for the SAS connection string has been added in the version 12.0.0-preview.2 - Link.

npm link for 12.0.0-preview.2 version - https://www.npmjs.com/package/@azure/storage-blob/v/12.0.0-preview.2

Here's the sample that shows the usage - withConnString.ts

[sarink]

@HarshaNalluru is 12.0.0-preview.2 production ready/stable?

[sarink]

Also, it appears that my code still doesn't work for uploading an image. If you put the SAS Token in the query parameter like that, it looks like the sig parameter just gets stripped out anyway?

I cannot figure out how to make browser uploads work with SAS. Is there an example anywhere?

I got the idea that it might work from here: https://github.com/Azure/azure-sdk-for-js/blob/d397183e84fa6f248525610899c9d6f252f91352/sdk/storage/storage-blob/src/BlobServiceClient.ts#L293

[sarink]

@HarshaNalluru wow... v12 is like _another_ complete rewrite? Looks like....

  Aborter,
  BlobUploadCommonResponse,
  BlobURL,
  BlockBlobURL,
  ContainerURL,
  ServiceURL,
  StorageURL,
  uploadBrowserDataToBlockBlob,
  uploadFileToBlockBlob,

None of these exist anymore? I literally just moved from the "legacy SDK", am I already writing outdated code?

[HarshaNalluru]

Thanks for the questions, @sarink.

---

Question 1

Also, it appears that my code still doesn't work for uploading an image. If you put the SAS Token in the query parameter like that, it looks like the sig parameter just gets stripped out anyway?

Is this with V10? Can you provide a little more info or code so that I can repro the issue on my end?

---

Question 2

I cannot figure out how to make browser uploads work with SAS. Is there an example anywhere?

In case you are referring to V10, you can leverage uploadBrowserDataToBlockBlob.
You can look at https://github.com/Azure/azure-storage-js/issues/18 or Wiki - Customize-HTTP-Pipeline-During-Uploading.

For V12, you can refer to the 12.0.0 - storage-blob/samples.

---

Question 3

API updates in version 12.

You can refer to the release pages 12.0.0 preview 1 release and 12.0.0 preview 2 release or the CHANGELOG DOCUMENT to see all the API changes in version 12.

V10 is the production-ready version.
We are working towards shipping a couple more previews(for V12) and then go GA later this year.

[sarink]

@HarshaNalluru the code is the same as above. SDK is v10.4. I've simplified a bit if this helps:

const anonymousCredential = new AnonymousCredential();
const pipeline = StorageURL.newPipeline(anonymousCredential);
const blobEndpoint = 'http://localhost:3000/azureStorageEmulatorProxy/devstoreaccount1';
const sas = 'spr=http&sig=Eby8vdM02xNOcqFlqUwJPLlmEtlCDXJ1OUzFT50uSRZ6IFsuFq2UVErCz4I6tq/K1SZFPTOtr/KBHBeksoGMGw==';

const fullUrl = blobEndpoint + '?' + sas;
console.log(fullUrl); // Has 'sig' parameter

const serviceUrl = new ServiceURL(fullUrl, pipeline);
console.log(serviceUrl.url); // Does not have 'sig' parameter

[XiaoningLiu]

@sarink Your SAS is invalid. A valid SAS sample here:

?sv=2017-04-17&ss=bfqt&srt=sco&sp=rwdlacup&se=2019-09-18T05:33:48Z&st=2017-09-16T21:33:48Z&spr=https,http&sig=S4WFjjmiuWEJTPqhaKeCqU90HQWHKrIqXMiDxXgfK1g%3D

[sarink]

Original issue was solved by parsing it out myself, and it looks like this is fixed in v12. Next problem was the sig parameter not passing through, but it seems that it _does_, so long as your SAS is definitely valid.

[msftbot[bot]]

Thanks for working with Microsoft on GitHub! Tell us how you feel about your experience using the reactions on this comment.