How to serve Vue application over HTTPS? - vue.js

I am trying to serve Vue application over HTTPS instead of HTTP.
I have tried to add --https flag to webpack-dev-server and add https: true in build/webpack.dev.cong.js but when I try to open the app in the browser it crashes with the following error:
[DEP0066] DeprecationWarning: OutgoingMessage.prototype._headers is deprecated
internal/buffer.js:945
class FastBuffer extends Uint8Array {}
^
RangeError: Invalid typed array length: -4095
at new Uint8Array (<anonymous>)
Is there something that I missed or what is the solution for this?
And if the HTTPS properly configured to webpack devServer, after building the project it would work the same when served with web server like nginx or I have to add some reverse proxying?

If you want to do this on your local machine, then you are going to want to use NGINX to serve up the HTTPS-traffic and use it to reverse proxy to whatever port on your local machine that you mount your webpack-dev-server. There might be a way to get Webpack to do this, but it wasn't designed to do this.

Related

SSL Offloading Problems since Shopware 6.4.12.0

We are running Shopware 6 on a Apache HTTP webserver in Docker on our CI. Then Traefik is doing the SSL termination.
Now on a new Shopware 6.4.12.0 setup we have the problem, that the admin interface which is accessed via https://example.com/admin tries to load its resources from http://example.com/admin.
We believe that is because Shopware sees only the HTTP connection and does not know how to construct the right URLs.
APP_URL in the .env is set to https://example.com
Is this a new behavior in 6.4.12.0 ? How can the SSL offloading be configured?
Looks like we simply forgot a .env setting on the new instance
TRUSTED_PROXIES=127.0.0.1,127.0.0.2,172.0.0.0/8

Vue JS Project with HTTP and HTTPS urls

I'm working with Vue JS using the webpack template, and dev mode.
How can I have part of my server using the HTTPS protocol and other part using HTTP?
I know that to use HTTPS is just add "https: true" to the devServer variable of the file build/webpack.dev.conf.js . Example:
devServer: {
https: true,
// other variables...
}
But when I do that just the HTTPS requests are accepted, no HTTP anymore.
How can I work with both protocols? If it's not possible, is there a VueJS way to redirect an HTTP request to an HTTPS?
It doesn't look totally straightforward to configure multiple entry points on your webpack server. Your best bet is likely to reverse-proxy the http requests using whatever other webserver you have handy. IIS will do this for you, for example. Google "reverse proxy [name-of-your-webserver]" :-)

Drupal - Mixed content error when using ssl certificate

I had a drupal installation working fine. I tried to migrate that one on a Docker Container runing behind a nginx reverse proxy. Everything seems fine but i have some .js and .css files that can't load because in drupal they are linked with http. The error is:
Mixed Content: The page at https://proxy.xx.xx/ was loaded
over HTTPS, but requested an insecure stylesheet
http://proxy.xx.xx/sites/default/files/css/css_xE-rWrJf-
fncB6ztZfd2huxqgxu4WO-qwma6Xer30m4.css'. This request has been
blocked; the content must be served over HTTPS.
I have something like 7 of them and i can't find where those files are called in drupal or how to change the http to https.
Best regards.
Alright, so I got to work by adding the following to the Drupal settings.php:
$conf['reverse_proxy'] = TRUE;
$base_url = 'https://whatever-your-domain-is.com';
$conf['reverse_proxy_addresses'] = array('internal_nginx_proxy_ip');
$conf['reverse_proxy_header'] = 'HTTP_X_FORWARDED_FOR';
This works for jwilder's nginx-proxy container(s) together with JrCs' letsencrypt companion container. The nginx container is handling the HTTPS/SSL (certificates) and talks HTTP with the Drupal-container internally. The Drupal container only needs to be run with the 3 ENV VARS VIRTUAL_HOST, LETSENCRYPT_HOST, LETSENCRYPT_EMAIL for everything to be set up and work its magic.
Only downside: The Drupal container's apache logs show the internal IP of the nginx proxy. But the nginx logs show the correct client IPs and Drupal apparently gets them right as well, so it's only a minor nuisance for me.
I guess the additions to the settings.php should also be applicable to custom/manual setups.
We found what was wrong. Drupal was communicating with the Nginx proxy without ssl. Some config and it was ok.

npm node app.js different apache

I was able to start my own RTCMultiConnection in my dedicated hosting.
https://github.com/muaz-khan/RTCMultiConnection
The problem I hit is when I want to integrate it in a full php / ajax / jquery website I made.
A site with login using ajax calls.
because the RTCMultiConnection requires node js and a different port (like https://www.__MyDomain.com:9001/ ),
I thought I could insert it in my site usign a XMLHttpRequest.
**** Problem ; I get a Allow-Control-Allow-Origin error
-- I tried to add it in .htaccess but without success... ;(
-- I went to my regular php.ini and installed mod_headers ; same thing no success ;(
•• I tried curl -I https://__MyDomain.com:9001/
and "Surprise surprise I get : HTTP/1.1 200 OK......
but my regular site (without the :9001) have Apache/2.2.31
The QUESTION HERE (is related to node and not RTCMultiConnection) ; WHY does "node server.js" have a different apache ???
Is it possible to "tell" or "ask" node to use the same apache config that I have ??
Thanks
You can keep running server.js on port 9001 and access/use/invoke socket.io/nodejs from your main PHP website. E.g.
rtcMultiConnection.socketURL = 'https://yourdomain.com:9001/';
Now your PHP pages will successfully use socket.io that is running on port 9001.
You can try this for testing purpose:
rtcMultiConnection.socketURL = 'https://rtcmulticonnection.herokuapp.com:443/';
Note: You can NOT run both nodejs and appache/php on same port: 80 or 443. That's why it is suggested to keep running nodejs on-a-separate-port 9001 and access/use socket.io from your PHP pages.

Cannot load socket.io.js with apache proxy setup

I feel like this question might be a duplicate but from all similar threads I have checked still wasn't able to find a answer.
I have vhost setup to proxy /node/ request to NodeJS/Socket.IO server.
ProxyRequests On
ProxyPass /node http://192.168.2.151:1337/
ProxyPassReverse /node http://192.168.2.151:1337/
This setup successfully serves everything from Apache, expect requests: http://domain.com/node/
Everything works fine when it comes to NodeJS.
I just can't get this line:
<script src="/node/socket.io/socket.io.js"></script>
to load socket.io.js, it always spits out what NodeJS server has to say.
The setup:
index.html is served by Apache. http://domain.com/index.html
index.html is simple HTML with script tag for loading socket.io.js (like I wrote above).
When I request http://domain.com/index.html script src is loaded but the content is NodeJS servers response instead of socket.io.js.
I have 'npm install socket.io' in the directory where NodeJS server is running from.
I have tried to serve index.html with NodeJS as well, regardless - socket.io.js content is still NodeJS responce.
Did anyone had this problem? Or could link me to an answer? :)
Cheers!
Look at this question and all of the answers at serverfault: Configuring Apache2 to proxy WebSocket?.
The problem is that mod_proxy doesn't support WebSockets and just makes it an HTTP request. You could use a different port and avoid proxying, switch to Nginx, try haproxy or use various other Apache module alternatives. For instance, mod_proxy_wstunnel is basically mod_proxy with WebSockets support. See the serverfault link above for details on all of the solutions.