Azure Storage CORS

Question

I have a application on www.somedomain.com. Now all my files(enduser uploaded) are stored on Azure storage which has a domain like somesubdomain.blob.core.windows.net. Whenever the user wants to view the document, the public link of the document on azure is added to a iframe source and can be viewed. The only problem is that, that file in many cases is a html with Javascript inclusion, which is trying to access some basic security free variables on the parent which is originally on my first host.

Every time the html file on azure storage tries to access the parent document variables, I get the error "Blocked a frame with origin 'http://somesubdomain.blob.core.windows.net' from accessing a frame with origin "http://somedomain.com". Protocols, domains, and ports must match.'

Any guidance and help on this would be helpful.

Answer 1

Here's a similar answer than the one from Pier-Luc Gendreau but related to the new azure-cli v2.0.

az storage cors add --account-name $ACCNT_NAME --account-key $ACCNT_KEY \
    --methods GET --origins '*' --services t --allowed-headers '*'

Note that v2.0 is python based as opposed to the v1.0 which was based on Node.js.

The official installation instruction is available here, but to me, the following seems a better option to keep the system clean:

virtualenv --system-site-packages -p python3 ~/azure-cli/
source ~/azure-cli/bin/activate
pip3 install azure-cli

Here's an extract from the help message related to the required parameters your might want to change for your specific case.

--methods  [Required]: List of HTTP methods allowed to be executed by the origin.  Allowed
                       values: DELETE, GET, HEAD, MERGE, OPTIONS, POST, PUT.
--origins  [Required]: List of origin domains that will be allowed via CORS, or "*" to allow all
                       domains.
--services [Required]: The storage service(s) to add rules to. Allowed options are: (b)lob,
                       (f)ile, (q)ueue, (t)able. Can be combined.

Answer 2

The easiest way to enable CORS on an Azure storage account is by using the azure-cli

npm i azure-cli -g

Then, it is possible to configure CORS through the command line:

azure storage cors set
  -a "storage-account"
  -k "storage-account-key"
  --blob/table/queue/file
  --cors "[{\"AllowedOrigins\":\"*\",\"AllowedMethods\":\"GET\",\"MaxAgeInSeconds\":\"86400\",\"AllowedHeaders\":\"*\",\"ExposedHeaders\":\"*\"}]"

Answer 3

Another way to fix is to create yourself a custom domain that points to your storage files - something like filestore.somedomain.com.

Answer 4

You need to enable CORS on your storage account's blob service to cross-domain JavaScript access. You can learn more about Azure Storage and CORS here: https://msdn.microsoft.com/en-us/library/azure/dn535601.aspx.

I also wrote a blog post some time ago on the same, which you can read here: http://gauravmantri.com/2013/12/01/windows-azure-storage-and-cors-lets-have-some-fun/.

If you're using .Net Storage Client library, you can use code below to set CORS rule:

static void AddCorsRuleStorageClientLibrary()
{
    //Add a new rule.
    var corsRule = new CorsRule()
    {
        AllowedHeaders = new List<string> { "*" },
        AllowedMethods = CorsHttpMethods.Get
        AllowedOrigins = new List<string> { "http://somedomain.com" },//This is the URL of your application.
        MaxAgeInSeconds = 1 * 60 * 60,//Let the browser cache it for an hour
    };

    //First get the service properties from storage to ensure we're not adding the same CORS rule again.
    var storageAccount = new CloudStorageAccount(new StorageCredentials(accountName, accountKey), true);
    var client = storageAccount.CreateCloudBlobClient();
    var serviceProperties = client.GetServiceProperties();
    var corsSettings = serviceProperties.Cors;

    corsSettings.CorsRules.Add(corsRule);
    //Save the rule
    client.SetServiceProperties(serviceProperties);
}