CSP Errors Encountered During Local Deployment Supporting Both Ports 3000 and 80

[ncnynl]

Problem Description:

Following the official script deployment code, port 3000 is configured, and it can be accessed normally via xxx.xxx.xxx.xxx:3000.

However, when I try to access the website via xxx.com using nginx reverse proxy to xxx.xxx.xxx.xxx:3000, a CSP error occurs, preventing access via the domain name.

The error is as follows:
connect-src xxx.xxx.xxx.xxx:3000 xxx.com:3000 api.github.com raw.githubusercontent.com api.rollbar.com xxx.xxx.xxx.xxx:3808 ws: localhost:3000 localhost:3808 browser-http-intake.logs.datadoghq.com blob:

After reviewing the code, I found a default CSP entry. Modifying this code resolved the error and allowed access via the domain name.

https://github.com/FarmBot/Farmbot-Web-App/blob/staging/config/application.rb

Adding the desired domain name to the string in the connect_src definition solves the problem.

The code can also be modified accordingly.

The source code is:

ALL_LOCAL_URIS = ([ENV["API_HOST"]] + (ENV["EXTRA_DOMAINS"] || "").split(","))

.map { |x| x.present? ? "#{x}:#{ENV["API_PORT"]}" : nil }.compact

Regardless of whether the port in .env is 3000, all IPs or domains will automatically have this port added. In fact, it should also include the port number without it.

Similar to:
connect-src xxx.xxx.xxx.xxx:3000 xxx.com:3000 api.github.com raw.githubusercontent.com api.rollbar.com xxx.xxx.xxx.xxx:3808

After modifying the code, it looks like:

ALL_LOCAL_URIS =

([ENV["API_HOST"]] + (ENV["EXTRA_DOMAINS"] || `"").split(","))

.map(&:presence)

.compact

.flat_map do |raw|

host, port = raw.split(":", 2)

uris = []

uris << host # without port

uris << "#{host}:#{port}" if port # originally with port

uris << "#{host}:#{ENV['API_PORT']}" if ENV["API_PORT"].present?

uris
end

.uniq

This will give all IPs and domains content with and without ports

connect-src xxx.xxx.xxx.xxx:3000 , xxx.xxx.xxx.xxx, xxx.com:3000, xxx.com, api.github.com raw.githubusercontent.com api.rollbar.com xxx.xxx.xxx.xxx:3808

This way, whether using an nginx reverse proxy or iptables to forward ports 80 to 3000, access will be normal.

This way, access via the domain xxx.com or via ip:3000 will be normal.

Is there a better way to solve this problem?

by the way

By comparing the efficiency of the official website and our self-deployed website, our website is significantly slower. The official website loads in about 10 seconds, while our self-deployed website takes about 25 seconds. We are using the ip:3000 domain. Our website is configured on a 4-core, 8GB RAM, 5Mbps bandwidth Ubuntu server.

Both the official and self-deployed websites seem somewhat slow. Is there room for optimization?

Current considerations:

1. Split all large JS and CSS files into multiple parts to speed up loading.

2. Caching static resources; the first load is slightly slower, but subsequent loads are faster.

3. Using gzip compression for transmission.

We are not yet very familiar with the official code; a deeper understanding of the architecture and further optimization is needed.