Refused to set unsafe header "User-Agent"

[oltreseba]

Description

Every time an api call is made i get the error:
Refused to set unsafe header "User-Agent"

I'm using the API package in an electron app.

What type of issue is this? (place an x in one of the [ ])

• bug
• enhancement (feature request)
• question
• documentation related
• testing related
• discussion

Requirements (place an x in each of the [ ])

• I've read and understood the Contributing guidelines and have done my best effort to follow them.
• I've read and agree to the Code of Conduct.
• I've searched for any related issues and avoided creating a duplicate issue.

---

Bug Report

Filling out the following details about bugs will help us solve your issue sooner.

Packages:

Select all that apply:

• @slack/web-api -> not sure about the others
• @slack/events-api
• @slack/interactive-messages
• @slack/rtm-api
• @slack/webhooks
• I don't know

Reproducible in:

• package version: 5.8.0
• node version: v12.13.0
• Electron version: 8.1
• Chromium version: 80.
• OS version(s): This is happening in al system tested (different version of windows, mac and linux)

Steps to reproduce:

1. make any api call from inside an electron application

Expected result:

The API call is done properly, but since the Slack APIs try to change the user agent (probably to track node version and os version), this throw an error in chrome, since it's not allowing this.

This lead to errors being logged in console for every call. The call itself is not actually compromised, but the console can be flooded with errors.

Actual result:

Error are logged by chrome. I would expect these error not to be logged, being catchable, or having the possibility to prevent the user agent change.

Creating the client in this way:

new SlackWebClient(data.authed_user.access_token, { headers: { 'User-Agent': undefined } })

i.e. forcing it to not have a user-agent is not fixing the problem (apparently the library is still trying to set it as "undefined".

Attachments:

Backtrace:

/Users/oltreseba/project/node_modules/axios/lib/adapters/xhr.js:126 Refused to set unsafe header "User-Agent"
setRequestHeader @ /Users/oltreseba/project/node_modules/axios/lib/adapters/xhr.js:126
forEach @ /Users/oltreseba/project/node_modules/axios/lib/utils.js:238
dispatchXhrRequest @ /Users/oltreseba/project/node_modules/axios/lib/adapters/xhr.js:120
xhrAdapter @ /Users/oltreseba/project/node_modules/axios/lib/adapters/xhr.js:12
dispatchRequest @ /Users/oltreseba/project/node_modules/axios/lib/core/dispatchRequest.js:52
Promise.then (async)
request @ /Users/oltreseba/project/node_modules/axios/lib/core/Axios.js:61
Axios.<computed> @ /Users/oltreseba/project/node_modules/axios/lib/core/Axios.js:86
wrap @ /Users/oltreseba/project/node_modules/axios/lib/helpers/bind.js:9
(anonymous) @ /Users/oltreseba/project/node_modules/@slack/web-api/dist/WebClient.js:570
run @ /Users/oltreseba/project/node_modules/p-queue/index.js:99
(anonymous) @ /Users/oltreseba/project/node_modules/p-queue/index.js:116
add @ /Users/oltreseba/project/node_modules/p-queue/index.js:94
task @ /Users/oltreseba/project/node_modules/@slack/web-api/dist/WebClient.js:567
(anonymous) @ /Users/oltreseba/project/node_modules/p-retry/index.js:41
RetryOperation.attempt @ /Users/oltreseba/project/node_modules/retry/lib/retry_operation.js:112
(anonymous) @ /Users/oltreseba/project/node_modules/p-retry/index.js:39
pRetry @ /Users/oltreseba/project/node_modules/p-retry/index.js:30
makeRequest @ /Users/oltreseba/project/node_modules/@slack/web-api/dist/WebClient.js:614
apiCall @ /Users/oltreseba/project/node_modules/@slack/web-api/dist/WebClient.js:458

[gndgn]

Same here. Every single API-Call is generating an "Unsafe Header" error.

[MeilCli]

same case me too, and I escaped this case.

// typescript
import * as slack from "@slack/web-api";
const client= new slack.WebClient("TOKEN");
delete client["axios"].defaults.headers["User-Agent"];

[mksmzpsv]

@seratch can I pick up this issue for my first contribution?
And have a question, I reviewed the code and have an idea how to fix this issue, but are there any other platforms (not only Electron) where User-Agent shouldn't be explicitly added?

[seratch]

Hi @5tarlxrd, that's nice! As far as I know, there is no other platforms to support. We may want to make the exclusion logic customizable but it'd be totally optional for the initial implementation.

[aguynamedben]

Related: axios/axios#1231 (comment)

@MeilCli Thanks for posting that workaround.

[jlee0425]

It doesn't work anymore on Nextjs 12.1.

const slackApi = new WebClient(token);
delete slackApi['axios'].defaults.headers['User-Agent'];
(async () => {
    await slackApi.chat.postMessage({
        text: '테스트',
        channel: channelId,
 });
})()

> Access to XMLHttpRequest at 'https://slack.com/api/chat.postMessage' 
> from origin 'http://localhost:3000' has been blocked by CORS policy:
> Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.
> POST https://slack.com/api/chat.postMessage net::ERR_FAILED

[charisra]

I got it to work successfully, Nextjs 12.5..5, I'm pretty confident it works on previous minor versions, too.
You have to use the slack client on the server side.
This means either inside getServerSideProps on your frontend components or by having the components call Next's api, and placing the slack client code inside an /api route.

[jlee0425]

I got it to work successfully, Nextjs 12.5..5, I'm pretty confident it works on previous minor versions, too. You have to use the slack client on the server side. This means either inside getServerSideProps on your frontend components or by having the components call Next's api, and placing the slack client code inside an /api route.

Yes. Slack doesn't allow their API's to be called on client side AFAIK.
You're correct to call it from a server

[charisra]

I got it to work successfully, Nextjs 12.5..5, I'm pretty confident it works on previous minor versions, too. You have to use the slack client on the server side. This means either inside getServerSideProps on your frontend components or by having the components call Next's api, and placing the slack client code inside an /api route.

Yes. Slack doesn't allow their API's to be called on client side AFAIK. You're correct to call it from a server

Exactly. I posted my answer and how to make it work just to help anyone else having this problem. Also as a solution response to your previous answer

[jlee0425]

I got it to work successfully, Nextjs 12.5..5, I'm pretty confident it works on previous minor versions, too. You have to use the slack client on the server side. This means either inside getServerSideProps on your frontend components or by having the components call Next's api, and placing the slack client code inside an /api route.

Yes. Slack doesn't allow their API's to be called on client side AFAIK. You're correct to call it from a server

Exactly. I posted my answer and how to make it work just to help anyone else having this problem. Also as a solution response to your previous answer

Thanks. I should've posted it myself when I found it but I forgot that I posted something here. Kudos!