Mixing
Manage HTTP Headers for Azure static website
There doesn't seem to be a clear and defined way to manage HTTP headers with an Azure static website. I know this feature is still in preview but my team and I are attempting to make this into a production ready web application.
I think most people utilizing the static website feature will be using javascript frameworks like Reactjs or Angular, and for my case, reactjs. Since there isn't a web.config to manage http headers it becomes unclear on how to approach this. The headers in question are Content Security Policy, X-Content-Type-Options, and X-XSS-Protection.
For clarity I'm using the new static web hosting on Azure, as talked about here: https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/
Thanks!
reactjs http-headers
azure-web-sites azure-storage asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
|
show 1 more comment
There doesn't seem to be a clear and defined way to manage HTTP headers with an Azure static website. I know this feature is still in preview but my team and I are attempting to make this into a production ready web application.
I think most people utilizing the static website feature will be using javascript frameworks like Reactjs or Angular, and for my case, reactjs. Since there isn't a web.config to manage http headers it becomes unclear on how to approach this. The headers in question are Content Security Policy, X-Content-Type-Options, and X-XSS-Protection.
For clarity I'm using the new static web hosting on Azure, as talked about here: https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/
Thanks!
reactjs http-headers
azure-web-sites azure-storage asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58
|
show 1 more comment
There doesn't seem to be a clear and defined way to manage HTTP headers with an Azure static website. I know this feature is still in preview but my team and I are attempting to make this into a production ready web application.
I think most people utilizing the static website feature will be using javascript frameworks like Reactjs or Angular, and for my case, reactjs. Since there isn't a web.config to manage http headers it becomes unclear on how to approach this. The headers in question are Content Security Policy, X-Content-Type-Options, and X-XSS-Protection.
For clarity I'm using the new static web hosting on Azure, as talked about here: https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/
Thanks!
reactjs http-headers
azure-web-sites azure-storage asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
There doesn't seem to be a clear and defined way to manage HTTP headers with an Azure static website. I know this feature is still in preview but my team and I are attempting to make this into a production ready web application.
I think most people utilizing the static website feature will be using javascript frameworks like Reactjs or Angular, and for my case, reactjs. Since there isn't a web.config to manage http headers it becomes unclear on how to approach this. The headers in question are Content Security Policy, X-Content-Type-Options, and X-XSS-Protection.
For clarity I'm using the new static web hosting on Azure, as talked about here: https://azure.microsoft.com/en-us/blog/azure-storage-static-web-hosting-public-preview/
Thanks!
reactjs http-headers
azure-web-sites azure-storage reactjs http-headers
azure-web-sites azure-storage asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
asked Nov 20 '18 at 20:09
UberCptNerdUberCptNerd
113
113
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58
|
show 1 more comment
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400778%2fmanage-http-headers-for-azure-static-website%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53400778%2fmanage-http-headers-for-azure-static-website%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Yeah, it's pretty limited what you can do currently. One option is to setup an Azure Function proxy in front of it that can add the headers as needed.
– juunas
Nov 20 '18 at 20:28
@juunas I'm actually in the middle of trying this and I'm running into issues. Have you accomplished this proxy while using the build output of a react project? The references to the compiled js and css files 404 when I load the proxy's url. I was using this article: blog.headforcloud.com/2018/07/29/static-hosting-headers as a reference, just to make sure we're on the same page
– UberCptNerd
Nov 20 '18 at 22:01
I have actually, the main thing you have to check is that the route templates are correct in the proxy, and that the SAS token is valid to access the files. You can also try making the container public to isolate the problem. Storage returns a 404 if it thinks you can't access the file.
– juunas
Nov 21 '18 at 7:50
@juunas Any chance you have a screenshot or example of how you set up your route templates? I think that's the missing piece
– UberCptNerd
Nov 21 '18 at 15:33
I put an anonymized version with the routes in here: pastebin.com/E6zL8Mat
– juunas
Nov 22 '18 at 8:58