I have an Angular 1.5 client, published off of a Node 4,Express 4 server. I do 99% of my manual testing in IE Edge. (The rest is in Mocha, Karma, and before delivery, I hit Firefox.)
We recently added this line to our http server, using helmet:
//Prevent Mime type sniffing/infering
app.use(helmet.noSniff());
PROBLEM: The nosniff option broke all of my thumbnails.
In one of my other Angular modules, which is a controller and view component, I have this line:
...
<img ng-src="/api/thumbnail/{{title}}"/>
...
On my Node/Express server, my /api/thumbnail/:title/ route looks like this:
router.get('/api/thumbnail/:title/',function(req,res){
... get file to read from 'title'
fs.readFile(fileName,function(err,data){
if ( err ) { ... do error handling ... }
else { resp.send(data); }
});
})
Using IE's Network debugger, I noticed that the requests being sent to the server have 'application/octet stream' as the 'Content-Type'. Maybe because I am sending back an 'image/jpeg', so, I asked myself if that's what is causing the nosniff to kill the response?
In my server code, I have a "DEFAULT_THUMBNAIL" which I send back in the event that 'title' produced no viable thumbnail image for me. So, before I do a resp.send(data), I did this:
const mime = require('mime');
...
resp.setHeader('Content-type',mime.lookup(DEFAULT_THUMBNAIL));
And that seemed to fix the nosniff issue.
Related
I created an API endpoint using Google Cloud Functions and am trying to call it from a JS fetch function.
I am running into errors that I am pretty sure are related to either CORS or the output format, but I'm not really sure what is going on. A few other SO questions are similar, and helped me realize I needed to remove the mode: "no-cors". Most mention enabling CORS on the BE, so I added response.headers.set('Access-Control-Allow-Origin', '*') - which I learned of in this article - to ensure CORS would be enabled... But I still get the "Failed to fetch" error.
The Full Errors (reproducible in the live demo linked below) are:
Uncaught Error: Cannot add node 1 because a node with that id is
already in the Store. (This one is probably unrelated?)
Access to fetch at
'https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=37.75&lon=-122.5'
from origin 'https://o2gxx.csb.app' has been blocked by CORS policy:
Request header field access-control-allow-origin is not allowed by
Access-Control-Allow-Headers in preflight response.
GET
https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=37.75&lon=-122.5 net::ERR_FAILED
Uncaught (in promise) TypeError: Failed to fetch
See Code Snippets below, please note where I used <---- *** Message *** to denote parts of the code that have recently changed, giving me one of those two errors.
Front End Code:
function getCSC() {
let lat = 37.75;
let lng = -122.5;
fetch(
`https://us-central1-stargazr-ncc-2893.cloudfunctions.net/nearest_csc?lat=${lat}&lon=${lng}`,
{
method: "GET",
// mode: "no-cors", <---- **Uncommenting this predictably gets rid of CORS error but returns a Opaque object which seems to have no data**
headers: {
// Accept: "application/json", <---- **Originally BE returned stringified json. Not sure if I should be returning it as something else or if this is still needed**
Origin: "https://lget3.csb.app",
"Access-Control-Allow-Origin": "*"
}
}
)
.then(response => {
console.log(response);
console.log(response.json());
});
}
Back End Code:
import json
import math
import os
import flask
def nearest_csc(request):
"""
args: request object w/ args for lat/lon
returns: String, either with json representation of nearest site information or an error message
"""
lat = request.args.get('lat', type = float)
lon = request.args.get('lon', type = float)
# Get list of all csc site locations
with open(file_path, 'r') as f:
data = json.load(f)
nearby_csc = []
# Removed from snippet for clarity:
# populate nearby_csc (list) with sites (dictionaries) as elems
# Determine which site is the closest, assigned to var 'closest_site'
# Grab site url and return site data if within 100 km
if dist_km < 100:
closest_site['dist_km'] = dist_km
// return json.dumps(closest_site) <--- **Original return statement. Added 4 lines below in an attempt to get CORS set up, but did not seem to work**
response = flask.jsonify(closest_site)
response.headers.set('Access-Control-Allow-Origin', '*')
response.headers.set('Access-Control-Allow-Methods', 'GET, POST')
return response
return "No sites found within 100 km"
Fuller context for code snippets above:
Here is a Code Sandbox Demo of the above.
Here is the full BE code on GitHub, minus the most recent attempt at adding CORS.
The API endpoint.
I'm also wondering if it's possible that CodeSandbox does CORS in a weird way, but have had the same issue running it on localhost:3000, and of course in prod would have this on my own personal domain.
The Error would appear to be CORS-related ( 'https://o2gxx.csb.app' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.) but I thought adding response.headers.set('Access-Control-Allow-Origin', '*') would solve that. Do I need to change something else on the BE? On the FE?
TLDR;
I am getting the Errors "Failed to fetch" and "field access-control-allow-origin is not allowed by Access-Control-Allow-Headers" even after attempts to enable CORS on backend and add headers to FE. See the links above for live demo of code.
Drop the part of your frontend code that adds a Access-Control-Allow-Origin header.
Never add Access-Control-Allow-Origin as a request header in your frontend code.
The only effect that’ll ever have is a negative one: it’ll cause browsers to do CORS preflight OPTIONS requests even in cases when the actual (GET, POST, etc.) request from your frontend code would otherwise not trigger a preflight. And then the preflight will fail with this message:
Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response
…that is, it’ll fail with that unless the server the request is being made to has been configured to send an Access-Control-Allow-Headers: Access-Control-Allow-Origin response header.
But you never want Access-Control-Allow-Origin in the Access-Control-Allow-Headers response-header value. If that ends up making things work, you’re actually just fixing the wrong problem. Because the real fix is: never set Access-Control-Allow-Origin as a request header.
Intuitively, it may seem logical to look at it as “I’ve set Access-Control-Allow-Origin both in the request and in the response, so that should be better than just having it in the response” — but it’s actually worse than only setting it in the response (for the reasons described above).
So the bottom line: Access-Control-Allow-Origin is solely a response header, not a request header. You only ever want to set it in server-side response code, not frontend JavaScript code.
The code in the question was also trying to add an Origin header. You also never want to try to set that header in your frontend JavaScript code.
Unlike the case with the Access-Control-Allow-Origin header, Origin is actually a request header — but it’s a special header that’s controlled completely by browsers, and browsers won’t ever allow your frontend JavaScript code to set it. So don’t ever try to.
Hi My Main Application url is http:localhost:4000. It internally render iframe app which is http:localhost:4000/contentApp/index.html (with sandbox parameter as sandbox="allow-scripts allow-popups allow-modals allow-forms allowdownloads allow-same-origin") and its in React application.
PrintJS package, using 1.0 version and it makes call to printJS(URL)
//URL, blob:http:localhost:4000/[guid value]
It gets an error at below piece of code within printjs library.
print.js:
try{
iframeElement.focus(); // iframeElement = iframe#printJS { src: blob:http://localhost:4000/a33334343-33434-343434-343434adf', src: '', name: '', sandbox: DOMTockenList(0..)
...
// other browsers
iframeElement.contentWindow.print(); // throw CORS error at here.
} catch(error){ params.onError(error);}
finally {
(o,_function.cleanup)(params);
}
}
above, iframeElement.contentWindow.print() getting an error out with below error CORS:
Uncaught DOMException: Blocked a frame with origin "http://localhost:4000" frame accessing a cross-origin frame.
at performPrint (webpack-internal:///./node_modules/print-js/dist/print.js:898:35)
at HTMLIframeElement.iframeElement.onload (webpack-internal:///./node_modules/print-js/dist/print.js:852:11)
..
When I remove sandbox then it worked. However, I can not remove sandbox as its structure of application.
Is there any way to fix this CORS issue. Like adding some parameter in "iframe sandbox attribute" OR any option at 'printjs' to fix this issue ?
Appreciate for the help.
PrintJS, internally call iframeElement.contentWindow.print(); , I don't have control to do postMessage as its printJS package part. Though, I have control over localhost:4000/contentApp , sandbox attribute.
(Also, it looks like issue created at, "http://localhost:4000" != "BLOB:http://localhost:4000/GUIDvalue" , (which looks weird as, both are pointing to same origin".)
I've run a pen test tool (Burp) against my node(express)/angular application and it identified a reflected XSS vulnerability specifically when attempting a GET request for static assets (noticeably vulnerabilities were not found for any of the requests being made when a user interacts with the application).
The issue detail is:
The name of an arbitrarily supplied URL parameter is copied into a
JavaScript expression which is not encapsulated in any quotation
marks. The payload 41b68(a)184a9=1 was submitted in the name of an
arbitrarily supplied URL parameter. This input was echoed unmodified
in the application's response.
This behavior demonstrates that it is possible to inject JavaScript
commands into the returned document. An attempt was made to identify a
full proof-of-concept attack for injecting arbitrary JavaScript but
this was not successful. You should manually examine the application's
behavior and attempt to identify any unusual input validation or other
obstacles that may be in place.
The vulnerability was tested by passing an arbitrary url parameter to the request like so:
GET /images/?41b68(a)184a9=1
The response was:
HTTP/1.1 404 Not Found
X-Content-Security-Policy: connect-src 'self'; default-src 'self'; font-src 'self'; frame-src; img-src 'self' *.google-analytics.com; media-src; object-src; script-src 'self' 'unsafe-eval' *.google-analytics.com; style-src 'self' 'unsafe-inline'
X-XSS-Protection: 1; mode=block
X-Frame-Options: DENY
Strict-Transport-Security: max-age=10886400; includeSubDomains; preload
X-Download-Options: noopen
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 52
Date: Wed, 08 Oct 2015 10:46:43 GMT
Connection: close
Cannot GET /images/?41b68(a)184a9=1
You can see that I have CSP in place (using Helmet to implement) and other protections against exploits. The app is served over https, but no user auth is required. CSP restricts request to the app's domain only plus google analytics.
The pen test report advises validating input (I am, but surely that would make requests including data sent by a user unsafe if I wasn't?), and encoding html which angular does by default.
I'm really struggling to find a solution to preventing or mitigating this for those requests for static assets:
Should I whitelist all requests for my application under csp?
Can I even do this, or will it only whitelist domains?
Can/should all responses from node/express to requests for static assets be encoded in some way?
The report states that "The name of an arbitrarily supplied URL parameter is copied into a JavaScript expression which is not encapsulated in any quotation marks". Could this expression be somewhere in the express code that handles returning static assets?
Or that GET request param can somehow be evaluated in my application code?
Update
Having done some investigation into this it seems that at least part of the mitigation is to escape data in url param values and sanitize the input in the url.
Escaping of the url is already in place so:
curl 'http://mydomain/images/?<script>alert('hello')</script>'
returns
Cannot GET /images/?<script>alert(hello)</script>
I've also put express-sanitized in place on top of this.
However, if I curl the original test the request param is still reflected back.
curl 'http://mydomain/images/?41b68(a)184a9=1'
Cannot GET /images/?41b68(a)184a9=1
Which you would expect because html is not being inserted into the url.
The responses to GET requests for static assets are all handled by app.use(express.static('static-dir')) so the query is passed into this. express.static is based on serve-static which depends on parseurl.
The cause of the issue is that for invalid GET requests express will return something like:
Cannot GET /pathname/?yourQueryString
Which in many cases is a valid response, even for serving static assets. However, in my case and I'm sure for others the only valid requests for static assets will be something like:
GET /pathname/your-file.jpg
I have a custom 404 handler that returns a data object:
var data = {
status: 404,
message: 'Not Found',
description: description,
url: req.url
};
This is only handled for invalid template requests in app.js with:
app.use('/template-path/*', function(req, res, next) {
custom404.send404(req, res);
});
I've now added explicit handlers for requests to static folders:
app.use('/static-path/*', function(req, res, next) {
custom404.send404(req, res);
});
Optionally I could also strip out request query params before the 404 is returned:
var data = {
status: 404,
message: 'Not Found',
description: description,
url: url.parse(req.url).pathname // needs a var url = require('url')
};
I have a web-app with an AngularJS front-end and a Web Api 2 back-end, and it uses bearer-tokens for authentication.
All is well in FireFox & IE, but with Chrome, my initial login request is SOMETIMES pre-flighted.
Here's the call from the AngularJS service:
$http.post(http://localhost:55483/token, data, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).success(function (response) { ... });
The preflight request gets kicked back with an "Allow-Access-Control-Origin" error.
However, if I click the Login button again (thereby re-sending the above request) all is well.
Any idea on how to prevent/trap/handle this?
PS: I use the LOC
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
in the ApplicationOAuthProvider.cs file to put the CORS allow-header on the /Token request, which works fine in IE, FireFox and sometimes in Chrome.
The below is Fancy comment:
Figured this out with help from post by LeftyX on Jun 29: - Move
this LOC app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); to the
FIRST LINE in the ConfigureAuth method of Startup.Auth.cs. - Then,
REMOVE this LOC
context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin",
new[] { "*" }); from the GrantResourceOwnerCredentials() method of
ApplicationOAuthProvide.cs. Preflight CORS-request them gets
handled properly, and then the actual requet goes through
Thank man, you save my whole day.
Cause it happens for many guys, I bring your comment to answer box for other guys can see it.
I don't want to get vote up for this. Please comment on my answer instead
Thank you
I hope this is able to help somebody out there. For me:
adding the app.useCors(); LOC did not work.
Adding the app.useCors(); LOC worked for other people on my team.
So I needed a solution that would work across everyone's environments.
Ultimately what I ended up doing was adding the header and value right into the Web.config with the following (where localhost:9000 is my node application that is serving up angular):
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="http://localhost:9000" />
<add name="Access-Control-Allow-Headers" value="Content-Type"/>
</customHeaders>
</httpProtocol>
</system.webServer>
Then in production you can just change the origin value to the production front-end url.
If you want CORS enabled for all origins, change the value to "*".
By default - Access-Control-Max-Age: seconds is 0 and your requests not caching.
Try set it to max value: (Owin selfhost). It solve problem with extra OPTIONS requests
app.UseCors(new CorsOptions
{
PolicyProvider = new CorsPolicyProvider
{
PolicyResolver = context => Task.FromResult(new CorsPolicy
{
AllowAnyHeader = true,
AllowAnyMethod = true,
AllowAnyOrigin = true,
SupportsCredentials = false,
PreflightMaxAge = Int32.MaxValue // << ---- THIS
})
}
});
Let me add one thing I have learned today. This sample:
app.UseCors(CorsOptions.AllowAll);
worked for me since the beginning. I just wasn't aware, becuase the requests I have been doing to verify, did not have following headers:
Origin: http://hostname
Access-Control-Request-Method: GET
Only after I added those, the correct headers started to appear in responses.
Basically I have this code which uploads javascripts and other content to Rackspace using Jclouds:
SwiftObject obj = cloudFilesClient.newSwiftObject();
obj.getInfo().setName(name);
obj.getInfo().setContentType(contentType);
obj.setPayload(payloadFile);
cloudFilesClient.putObject(container, obj);
I noticed that Chrome complains about scripts being transferred with text/plain and so set out to investigate. curl -I report instead: Content-Type: application/unknown.
I've Googled a lot and tried to find some clues, and I've tried:
not setting content type at all
setting empty string (found some rumour about that somewhere)
setting to application/javascript (correct)
setting to text/javascript (wrong, but common)
obj.getAllHeaders().put("Content-Type", contentType);
When we used to upload with basic HTTP before, this just worked without setting anything manually at all.
Finally finally managed to figure it out by digging in the source code - this works:
FilePayload payload = new FilePayload(uploadableFile.localPath.toFile());
payload.getContentMetadata().setContentType(uploadableFile.contentType);
obj.setPayload(payload);
In case anyone else is looking for this in the future, posting Q&A.