Self signed certificate: I am missing the relation between browser and server

Multi tool use
Multi tool use












2















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:



Connections is safe



However, the client can't retrieve data from the server. The client shows this error:
enter image description here



Here my keychain picture, showing this certificate:



enter image description here



What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.










share|improve this question























  • 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













  • 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
















2















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:



Connections is safe



However, the client can't retrieve data from the server. The client shows this error:
enter image description here



Here my keychain picture, showing this certificate:



enter image description here



What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.










share|improve this question























  • 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













  • 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














2












2








2


1






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:



Connections is safe



However, the client can't retrieve data from the server. The client shows this error:
enter image description here



Here my keychain picture, showing this certificate:



enter image description here



What is missing? Do I need 2 certificates in my keychain? Because I am running the client and the server in the same machine.










share|improve this question














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:



Connections is safe



However, the client can't retrieve data from the server. The client shows this error:
enter image description here



Here my keychain picture, showing this certificate:



enter image description here



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






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Dec 30 '18 at 19:50









AldoAldo

132110




132110













  • 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













  • 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



















  • 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













  • 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

















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












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
});


}
});














draft saved

draft discarded


















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
















draft saved

draft discarded




















































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.




draft saved


draft discarded














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





















































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
Bqu7fXidVt3NC34tdvwIsWDnBEy6PYsNCPJSQ5ftGpt,bnn32ea42,oy 2xcSwudSY Ugt,7PcKLtLPy2d12k,XWRDF0P0HKJc6

Popular posts from this blog

Monofisismo

Angular Downloading a file using contenturl with Basic Authentication

Olmecas