I have seen a few bug reports on github but couldn't figure out my issue. I have cookies that the server sets. Now during POST method,I want to pass this data back to the server. It is an Observable because response from the server will determine further steps to take. Note that I have no access to the backend but CORS and credentials are set. My current code is:
public logout () : Observable<any> {
/*
Send a clear session request to cbase
*/
let vm : any = this;
const httpPostOptions =
{
headers:
new HttpHeaders (
{
"Content-Type": "application/x-www-form-urlencoded"
}),
withCredentials: true
};
return new Observable((observer) => {
vm.http.post(
Config.syncGatewayLoginStage + 'logout/', httpPostOptions
).subscribe(
data => {
observer.next(data);
},
err => { observer.error(err); console.log(err); },
() => {
observer.complete();
}
);
});
}
The server responds with error 500 that the session doesn't exist and of course, I see no session cookies passed to the server in the request header even though I see cookies set.
The server response is:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost:4200
Connection: keep-alive
Content-Length: 1406
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Wed, 20 Feb 2019 10:09:29 GMT
Vary: Origin
X-Content-Type-Options: nosniff
X-Powered-By: Express
Related
How can I download a file using the POST method along with some headers and data (of the type: "content-type: application/x-www-form-urlencoded") in React Native?
When I send a request to the URL, the following is returned in the Response Header:
content-disposition: attachment; filename="PAPR_Pginas_Web_2.pdf"
content-type: application/pdf
date: Sun, 07 Aug 2022 13:59:00 GMT
last-modified: Thu, 01 Jan 1970 00:00:00 GMT
server: Apache
strict-transport-security: max-age=86400
x-powered-by: JSF/1.2
x-xss-protection: 1; mode=block
I'm using this code:
const donwloadPDF = async (uri) => {
const downloadInstance = FileSystem.createDownloadResumable(uri, FileSystem.documentDirectory + "file.pdf");
const result = await downloadInstance.downloadAsync();
if (result.status === 200) {
Sharing.shareAsync(result.uri, { dialogTitle: "Share or Save" });
} else {
console.log("Failed to Download");
}
};
const getFile = async (payload) => {
try {
const response = await fetch(URL, {
method: "POST",
headers: headers2,
body: formBody(payload),
});
const content = await response.json();
donwloadPDF(content); // Some URI
} catch (error) {
console.error(error);
}
};
But is returned the error: JSON Parse error: Unrecognized token '%'
Problem
I have a REST API that has a login endpoint. The login endpoint accepts a username and password, the server responds by sending a HTTPOnly Cookie containing some payload (like JWT).
The approach I always use had been working for a few years until the Set-Cookie header stopped working roughly last week. I have not touched the REST API's source prior to its non-functionality, as I was working on a Svelte-based front-end.
I suspect it has something to do with the Secure attribute being set to false as it is in localhost. However, according to Using HTTP cookies, having an insecure connection should be fine as long as it's localhost. I've been developing REST APIs in this manner for some time now and was surprised to see the cookie no longer being set.
Testing the API with Postman yields the expected result of having the cookie set.
Approaches Used
I tried to recreate the general flow of the real API and stripped it down to its core essentials.
package main
import (
"fmt"
"io/ioutil"
"log"
"net/http"
"os"
"os/signal"
"syscall"
"time"
"github.com/gofiber/fiber/v2"
"github.com/gofiber/fiber/v2/middleware/cors"
"github.com/golang-jwt/jwt/v4"
)
const idleTimeout = 5 * time.Second
func main() {
app := fiber.New(fiber.Config{
IdleTimeout: idleTimeout,
})
app.Use(cors.New(cors.Config{
AllowOrigins: "*",
AllowHeaders: "Origin, Content-Type, Accept, Range",
AllowCredentials: true,
AllowMethods: "GET,POST,HEAD,DELETE,PUT",
ExposeHeaders: "X-Total-Count, Content-Range",
}))
app.Get("/", hello)
app.Post("/login", login)
go func() {
if err := app.Listen("0.0.0.0:8080"); err != nil {
log.Panic(err)
}
}()
c := make(chan os.Signal, 1)
signal.Notify(c, os.Interrupt, syscall.SIGTERM)
_ = <-c
fmt.Println("\n\nShutting down server...")
_ = app.Shutdown()
}
func hello(c *fiber.Ctx) error {
return c.SendString("Hello, World!")
}
func login(c *fiber.Ctx) error {
type LoginInput struct {
Email string `json:"email"`
}
var input LoginInput
if err := c.BodyParser(&input); err != nil {
return c.Status(400).SendString(err.Error())
}
stringUrl := fmt.Sprintf("https://jsonplaceholder.typicode.com/users?email=%s", input.Email)
resp, err := http.Get(stringUrl)
if err != nil {
return c.Status(500).SendString(err.Error())
}
body, err := ioutil.ReadAll(resp.Body)
if err != nil {
return c.Status(500).SendString(err.Error())
}
if len(body) > 0 {
fmt.Println(string(body))
} else {
return c.Status(400).JSON(fiber.Map{
"message": "Yeah, we couldn't find that user",
})
}
token := jwt.New(jwt.SigningMethodHS256)
cookie := new(fiber.Cookie)
claims := token.Claims.(jwt.MapClaims)
claims["purpose"] = "Just a test really"
signedToken, err := token.SignedString([]byte("NiceSecret"))
if err != nil {
// Internal Server Error if anything goes wrong in getting the signed token
fmt.Println(err)
return c.SendStatus(500)
}
cookie.Name = "access"
cookie.HTTPOnly = true
cookie.Secure = false
cookie.Domain = "localhost"
cookie.SameSite = "Lax"
cookie.Path = "/"
cookie.Value = signedToken
cookie.Expires = time.Now().Add(time.Hour * 24)
c.Cookie(cookie)
return c.Status(200).JSON(fiber.Map{
"message": "You have logged in",
})
}
What does this is basically look through JSON Placeholder's Users and if it finds one with a matching email, it sends the HTTPOnly Cookie with some data attached to it.
Seeing as it might be a problem with the library I'm using, I decided to write a Node version with Express.
import axios from 'axios'
import express from 'express'
import cookieParser from 'cookie-parser'
import jwt from 'jsonwebtoken'
const app = express()
app.use(express.json())
app.use(cookieParser())
app.use(express.urlencoded({ extended: true }))
app.disable('x-powered-by')
app.get("/", (req, res) => {
res.send("Hello there!")
})
app.post("/login", async (req, res, next) => {
try {
const { email } = req.body
const { data } = await axios.get(`https://jsonplaceholder.typicode.com/users?email=${email}`)
if (data) {
if (data.length > 0) {
res.locals.user = data[0]
next()
} else {
return res.status(404).json({
message: "No results found"
})
}
}
} catch (error) {
return console.error(error)
}
}, async (req, res) => {
try {
let { user } = res.locals
const token = jwt.sign({
user: user.name
}, "mega ultra secret sauce 123")
res
.cookie(
'access',
token,
{
httpOnly: true,
secure: false,
maxAge: 3600
}
)
.status(200)
.json({
message: "You have logged in, check your cookies"
})
} catch (error) {
return console.error(error)
}
})
app.listen(8000, () => console.log(`Server is up at localhost:8000`))
Both of these do not work on the browsers I've tested them on.
Results
Go responds with this.
HTTP/1.1 200 OK
Date: Mon, 21 Feb 2022 05:17:36 GMT
Content-Type: application/json
Content-Length: 32
Vary: Origin
Access-Control-Allow-Origin: http://localhost:3000
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: X-Total-Count,Content-Range
Set-Cookie: access=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJwdXJwb3NlIjoiSnVzdCBhIHRlc3QgcmVhbGx5In0.8YKepcvnMreP1gUoe_S3S7uYngsLFd9Rrd4Jto-6UPI; expires=Tue, 22 Feb 2022 05:17:36 GMT; domain=localhost; path=/; HttpOnly; SameSite=Lax
For the Node API, this is the response header.
HTTP/1.1 200 OK
Set-Cookie: access=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjoiTGVhbm5lIEdyYWhhbSIsImlhdCI6MTY0NTQyMDM4N30.z1NQcYm5XN-L6Bge_ECsMGFDCgxJi2eNy9sg8GCnhIU; Max-Age=3; Path=/; Expires=Mon, 21 Feb 2022 05:13:11 GMT; HttpOnly
Content-Type: application/json; charset=utf-8
Content-Length: 52
ETag: W/"34-TsGOkRa49turdlOQSt5gB2H3nxw"
Date: Mon, 21 Feb 2022 05:13:07 GMT
Connection: keep-alive
Keep-Alive: timeout=5
Client Source
I'm using this as a test form to send and receive data.
<script>
let email = "";
async function handleSubmit() {
try {
let response = await fetch(`http://localhost:8000/login`, {
method: "POST",
body: JSON.stringify({
email,
}),
headers: {
"Content-Type": "application/json",
},
});
if (response) {
console.info(response);
let result = await response.json();
if (result) {
console.info(result);
}
}
} catch (error) {
alert("Something went wrong. Check your console.");
return console.error(error);
}
}
</script>
<h1>Please Login</h1>
<svelte:head>
<title>Just a basic login form</title>
</svelte:head>
<form on:submit|preventDefault={handleSubmit}>
<label for="email">Email:</label>
<input
type="email"
name="email"
bind:value={email}
placeholder="enter your email"
/>
</form>
Additional Information
Postman: 9.8.3
Language Versions
Go: 1.17.6
Node.js: v16.13.1
Svelte: 3.44.0
Browsers Used
Mozilla Firefox: 97.0.1
Microsoft Edge: 98.0.1108.56
Chromium: 99.0.4781.0
I just had the same issue with axios, this was causing the Set-Cookie response header to be silently ignored. Which was annoying as usually if it rejects them it will show that little yellow triangle against that header and say why in the network inspector.
I solved this by adding a request interceptor to force it true for every request:
axios.interceptors.request.use(
(config) => {
config.withCredentials = true
return config
},
(error) => {
return Promise.reject(error)
}
)
Solution
It turns out the problem is in the front-end, specifically JavaScript's fetch() method.
let response = await fetch(`http://localhost:8000/login`, {
method: "POST",
credentials: "include", //--> send/receive cookies
body: JSON.stringify({
email,
}),
headers: {
"Content-Type": "application/json",
},
});
You'll need credentials: include property in your RequestInit object, not just for making requests that require cookie authentication, but for also receiving said cookie.
Axios usually fills this part out automatically (based from experience), but if it doesn't, you'll also need to put withCredentials: true on the third config argument of your request to allow the browser to set the cookie.
I am using VueJS and Axios to send a request like this:
axiosAPI.get('/login/flows', {params: {id: 'string'}})
.then(res => {
console.log('cookie', res.headers)
}
In return server sends me this response:
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Type
Cache-Control: private, no-cache, no-store, must-revalidate
Content-Length: 646
Content-Type: application/json; charset=utf-8
Date: Thu,xxxx 13:56:21 GMT
Set-Cookie: csrf_token=Lxv3zynm1Fua0hU0/W1+R2w=; Path=/.ory/kratos/public/; Domain=x.y ; Max-Age=31536000; HttpOnly; SameSite=Lax
Vary: Origin
Vary: Cookie
As you can see, server sends a csrf-token in Set-Cookies. but when I try to print out the headers I can not get and store the csrf-token. In addition, browser doesn't store the token at all in the storage section.
I need to use the csrf-token inside of this cookie but I don't know how I can do this?
Note: i don't have any access to back-end codes.
Maybe you can use the axios-cookiejar-support.
https://www.npmjs.com/package/axios-cookiejar-support
A medium article showing how to use it.
https://medium.com/#adityasrivast/handling-cookies-with-axios-872790241a9b
Sample (getting cookie from a login page):
const axios = require('axios');
const wrapper = require('axios-cookiejar-support').wrapper;
const CookieJar = require('tough-cookie').CookieJar;
const jar = new CookieJar();
const client = wrapper(axios.create({ jar }));
const url = '<your url>';
const params = new URLSearchParams();
params.append('username', '<username>');
params.append('password', '<password>');
client.post(`${url}/Login`, params, {
headers: {
'Accept': '*/*'
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
Using this will get you the whole string for that header:
const cookieHeaders = res.headers['Set-Cookie'];
After that, you could split the string in an array with
cookieHeaders.split('; ');
In the array, you can then get the specific one you need.
When downloading a binary file from a remove server using the angular 5 http client the file is consistently corrupted. I've been unable to find resources related to this version of the client for resolving this problem. Setting the response type to either 'arraybuffer' or 'blob' does not resolve the issue.
What is the proper way to download a binary file in Angular 5 and convert it to a Uint8Array?
My current code is as follows
this.data = this.http.get(_.get(record, 'href', ''), {
observe: 'events',
reportProgress: true,
responseType: 'blob'
}))
.do(httpEvent => {
if (httpEvent.type === HttpEventType.DownloadProgress) {
this.percent.next((httpEvent.loaded / httpEvent.total) * 100);
}
})
.switchMap(httpEvent => {
if (httpEvent.type === HttpEventType.Response) {
return this.blobToArrayBuffer(httpEvent.body);
}
return Observable.of(new ArrayBuffer(0));
})
.map(buffer => {
const buff = new Uint8Array(buffer);
... // Decode buffer here
}
...
private blobToArrayBuffer(blob: Blob): Observable<ArrayBuffer> {
return Observable.create(obs => {
const fileReader = new FileReader();
fileReader.onload = () => obs.next(fileReader.result);
fileReader.onloadend = () => obs.complete();
fileReader.readAsArrayBuffer(blob);
});
}
I don't see anything obviously wrong with the response headers
HTTP/1.1 200 OK
x-amz-id-2: ...
x-amz-request-id: ...
Date: Tue, 23 Jan 2018 18:25:07 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET
Access-Control-Max-Age: 3000
Vary: Origin, Access-Control-Request-Headers, Access-Control-Request-Method
Last-Modified: Thu, 18 Jan 2018 22:25:33 GMT
Server: AmazonS3
ETag: ...
Accept-Ranges: bytes
Content-Type: binary/octet-stream
Content-Length: 148341
Any insight would be helpful.
I am trying to implement this code example here to upload an image to an S3 bucket.
My server seems to return the pre-signed URL OK, but the PUT request that follows fails with a 400 error.
Here is the server-side pre-sign code:
var s3 = new aws.S3();
var params = {
Bucket: secrets.aws.bucket,
Key: body.filename,
ContentType: body.filetype,
ACL: 'public-read'
};
s3.getSignedUrl('putObject', params, function(err, data) {
if (err) {
console.log(err);
return err;
} else {
console.log('URL sent back to client ------------------------------------');
res.status(200).send(data);
}
});
And here is the upload action client-side:
export function uploadFile(data) {
var file = data[0];
return dispatch => {
dispatch(dropFileAccepted(data));
return makeUploadRequest('post', {filename: file.name, filetype: file.type}, '/signURLforS3')
.then(function (result) {
var signedUrl = result.data;
var options = {
headers: {
'Content-Type': file.type,
'x-amz-acl': 'public-read',
'x-amz-region': 'eu-central-1'
}
};
return axios.put(signedUrl, file, options);
})
.then(function (result) {
console.log(result);
})
.catch(function (err) {
console.log(err);
});
};
}
From the network request/response headers it looks like the content-type and CORS configuration on the bucket are correctly set, but I'm unsure whether there could be an issue with needing to set the region.
or do I need some additional settings on the bucket, like a bucket policy, or specify a Signature version ?
Request URL:https://XXXXXXXXXX.s3.amazonaws.com/brand.png?AWSAccessKeyId=AKXXXXXXXXXXXX&Content-Type=image%2Fpng&Expires=1460128516&Signature=%2BooCHlrwelBYC9fMYnu01PokgWM%3D&x-amz-acl=public-read
Request Method:PUT
Status Code:400 Bad Request
Remote Address:54.231.192.36:443
Response Headers
Access-Control-Allow-Methods:PUT, POST, GET, HEAD
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3000
Connection:close
Content-Type:application/xml
Date:Fri, 08 Apr 2016 15:00:17 GMT
Server:AmazonS3
Transfer-Encoding:chunked
Vary:Origin, Access-Control-Request-Headers, Access-Control-Request-Method
x-amz-id-2:rXMCu6YD5mLrN3beBCs+kmXDGzhzrQHV2fTUTNooWXBQuPfLNOKDcArGQWRj+NLk+zo=
x-amz-region:eu-central-1
x-amz-request-id:FC181ED154
Request Headers
Accept:application/json, text/plain, */*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:de-DE,de;q=0.8,en-US;q=0.6,en;q=0.4,fr-FR;q=0.2,fr;q=0.2
Connection:keep-alive
Content-Length:16819
Content-Type:image/png
Host:XXXXXXX.s3.amazonaws.com
Origin:http://localhost:3000
Referer:http://localhost:3000/admin/blog/create
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36
x-amz-acl:public-read
x-amz-region:eu-central-1
Query String Params
AWSAccessKeyId:AKXXXXXXXX
Content-Type:image/png
Expires:1460128516
Signature:+ooCHlrwelBYu01PokgWM=
x-amz-acl:public-read
Thanks in advance for any pointers. I've been pulling my hair out over this...