Self signed certificate: I am missing the relation between browser and server
![Multi tool use Multi tool use](http://sgv.ssvwv.com/sg/ssvwvcomimagb.png)
Multi tool use
I created a Self Signed certificate using openSSL using this command:
openssl req -x509 -out localhost.crt -keyout localhost.key
-newkey rsa:2048 -nodes -sha256
-subj '/CN=localhost' -extensions EXT -config <(
printf "[dn]nCN=localhostn[req]ndistinguished_name = dnn[EXT]nsubjectAltName=DNS:localhostnkeyUsage=digitalSignaturenextendedKeyUsage=serverAuth")
I have a Express/Node server using it through this code:
https
.createServer(
{
key: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.key"),
cert: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.crt")
},
app
)
.listen(8080, () => console.log(env + " Server listening on port 8080"));
I started this server and it's running through https. I have a client (based on create-react-app) running in the same machine, different port, trying to connect to this server on port 8080.
On the first run, I trusted the certificate after Chrome said that it was invalid and, as the picture below shows, my client app does not complain about the certificate:
However, the client can't retrieve data from the server. The client shows this error:
Here my keychain picture, showing this certificate:
What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.
node.js reactjs express openssl create-react-app
|
show 3 more comments
I created a Self Signed certificate using openSSL using this command:
openssl req -x509 -out localhost.crt -keyout localhost.key
-newkey rsa:2048 -nodes -sha256
-subj '/CN=localhost' -extensions EXT -config <(
printf "[dn]nCN=localhostn[req]ndistinguished_name = dnn[EXT]nsubjectAltName=DNS:localhostnkeyUsage=digitalSignaturenextendedKeyUsage=serverAuth")
I have a Express/Node server using it through this code:
https
.createServer(
{
key: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.key"),
cert: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.crt")
},
app
)
.listen(8080, () => console.log(env + " Server listening on port 8080"));
I started this server and it's running through https. I have a client (based on create-react-app) running in the same machine, different port, trying to connect to this server on port 8080.
On the first run, I trusted the certificate after Chrome said that it was invalid and, as the picture below shows, my client app does not complain about the certificate:
However, the client can't retrieve data from the server. The client shows this error:
Here my keychain picture, showing this certificate:
What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.
node.js reactjs express openssl create-react-app
The browser screencap shows you connecting tolocalhost:3000
but the client app is connecting tolocalhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?
– v25
Dec 30 '18 at 20:38
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
Whatever is generating the redERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?
– v25
Dec 30 '18 at 21:35
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
1
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32
|
show 3 more comments
I created a Self Signed certificate using openSSL using this command:
openssl req -x509 -out localhost.crt -keyout localhost.key
-newkey rsa:2048 -nodes -sha256
-subj '/CN=localhost' -extensions EXT -config <(
printf "[dn]nCN=localhostn[req]ndistinguished_name = dnn[EXT]nsubjectAltName=DNS:localhostnkeyUsage=digitalSignaturenextendedKeyUsage=serverAuth")
I have a Express/Node server using it through this code:
https
.createServer(
{
key: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.key"),
cert: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.crt")
},
app
)
.listen(8080, () => console.log(env + " Server listening on port 8080"));
I started this server and it's running through https. I have a client (based on create-react-app) running in the same machine, different port, trying to connect to this server on port 8080.
On the first run, I trusted the certificate after Chrome said that it was invalid and, as the picture below shows, my client app does not complain about the certificate:
However, the client can't retrieve data from the server. The client shows this error:
Here my keychain picture, showing this certificate:
What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.
node.js reactjs express openssl create-react-app
I created a Self Signed certificate using openSSL using this command:
openssl req -x509 -out localhost.crt -keyout localhost.key
-newkey rsa:2048 -nodes -sha256
-subj '/CN=localhost' -extensions EXT -config <(
printf "[dn]nCN=localhostn[req]ndistinguished_name = dnn[EXT]nsubjectAltName=DNS:localhostnkeyUsage=digitalSignaturenextendedKeyUsage=serverAuth")
I have a Express/Node server using it through this code:
https
.createServer(
{
key: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.key"),
cert: fs.readFileSync("/Users/Me/.localhost-ssl/localhost.crt")
},
app
)
.listen(8080, () => console.log(env + " Server listening on port 8080"));
I started this server and it's running through https. I have a client (based on create-react-app) running in the same machine, different port, trying to connect to this server on port 8080.
On the first run, I trusted the certificate after Chrome said that it was invalid and, as the picture below shows, my client app does not complain about the certificate:
However, the client can't retrieve data from the server. The client shows this error:
Here my keychain picture, showing this certificate:
What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.
node.js reactjs express openssl create-react-app
node.js reactjs express openssl create-react-app
asked Dec 30 '18 at 19:50
![](https://lh4.googleusercontent.com/-1OZSdNpYnmY/AAAAAAAAAAI/AAAAAAAAANk/FoWS1eavvmU/photo.jpg?sz=32)
![](https://lh4.googleusercontent.com/-1OZSdNpYnmY/AAAAAAAAAAI/AAAAAAAAANk/FoWS1eavvmU/photo.jpg?sz=32)
AldoAldo
132110
132110
The browser screencap shows you connecting tolocalhost:3000
but the client app is connecting tolocalhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?
– v25
Dec 30 '18 at 20:38
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
Whatever is generating the redERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?
– v25
Dec 30 '18 at 21:35
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
1
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32
|
show 3 more comments
The browser screencap shows you connecting tolocalhost:3000
but the client app is connecting tolocalhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?
– v25
Dec 30 '18 at 20:38
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
Whatever is generating the redERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?
– v25
Dec 30 '18 at 21:35
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
1
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32
The browser screencap shows you connecting to
localhost:3000
but the client app is connecting to localhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?– v25
Dec 30 '18 at 20:38
The browser screencap shows you connecting to
localhost:3000
but the client app is connecting to localhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?– v25
Dec 30 '18 at 20:38
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
Whatever is generating the red
ERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?– v25
Dec 30 '18 at 21:35
Whatever is generating the red
ERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?– v25
Dec 30 '18 at 21:35
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
1
1
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32
|
show 3 more comments
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%2f53980916%2fself-signed-certificate-i-am-missing-the-relation-between-browser-and-server%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%2f53980916%2fself-signed-certificate-i-am-missing-the-relation-between-browser-and-server%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
hV9aKf Oa6Pq8JB,WrAvwx VivS4l2Y1BiX y,I0zJOhsuiBOtRzEluCSs7PsnkRXNObP8,vYU5kLD ZuBSa12q,rtT2b5FW
The browser screencap shows you connecting to
localhost:3000
but the client app is connecting tolocalhost:8080
. Sounds like the client, which the error is from, doesn't like the self signed cert. Is the 'client' a browser or some other JS module?– v25
Dec 30 '18 at 20:38
@v25 I am not sure what you mean if the client is the browser: I have a react.js app running in the browser, in localhost:3000. My server, is a service running in localhost:8080. When the client tries to fetch data from the server, it raises the error shown.
– Aldo
Dec 30 '18 at 20:43
Whatever is generating the red
ERR_CERT_AUTHORITY_INVALID
error doesn't recognise/care that you accepted the self-signed certificate in Chrome. This may be a waste of time to fix when you can get a free cert from Let's Encrypt. Is there a reason you need SSL here? If it's just a single development box then plain HTTP should be fine, and avoids these issues, surely?– v25
Dec 30 '18 at 21:35
Also if you were running this in production you should have nginx between your node app as described in this A which fields a similar question to your own. Your node app would still run in HTTP mode, with nginx handling the LE certs fully and presenting a secure connection to the browser.
– v25
Dec 30 '18 at 21:48
1
Based on @v25's comment, and the screenshot, it seems like your application is being hosted at :3000, while you are making requests to :8080. The :3000 cert is trusted and accepted by Chrome, whereas the :8080 cert is not. If you open up the devtools in Chrome, the network tab should show the same error. Right click on that failed request, and "open in new tab", then trust the cert from the new tab.
– Michael Camden
Dec 30 '18 at 22:32