Vue(Vite)設定Content-Security-Policy支援

vue3支援csp方法只需要設定vite.config.js :

import { fileURLToPath, URL } from 'node:url'

import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'


// https://vitejs.dev/config/
export default defineConfig(({ mode }) => {
  // eslint-disable-next-line no-undef
  const env = loadEnv(mode, process.cwd());
  // this might be needed in Dev mode
  const nonce = mode === "development" ? "nonce" : "{SERVER-GENERATED-NONCE}";

  return {
    plugins: [
      vue(),

    ],
    html: {
      cspNonce: `${nonce.toString()}`
    },
    // eslint-disable-next-line no-undef
    base: env.VITE_WORKDIR
    ,
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    server: {
      headers: {
        'Content-Security-Policy': `default-src 'self'; script-src 'self' 'nonce-${nonce.toString()}'; style-src   'nonce-${nonce.toString()}'; font-src 'self' data:; img-src 'self'; frame-src 'self';form-action none  `,
      },
     
       
      }
    }
  }
})

nginx with let’s encrypt ssl , php-fpm , tomcat , mariadb environment

nginx 啟動時會自動安裝let’s encrypt ssl ,nginx與tomcat及php-fpm間使用proxy_pass,大概如下:

server {
    # Listen to port 443 on both IPv4 and IPv6.
    listen 443 ssl default_server reuseport;
    listen [::]:443 ssl default_server reuseport;

    # Domain names this server should respond to.
    server_name a.yslifes.com;

    root /var/www/html;
    # Load the certificate files.
    ssl_certificate         /etc/letsencrypt/live/a.yslifes.com/fullchain.pem;
    ssl_certificate_key     /etc/letsencrypt/live/a.yslifes.com/privkey.pem;
    ssl_trusted_certificate /etc/letsencrypt/live/a.yslifes.com/chain.pem;

    # Load the Diffie-Hellman parameter.
    ssl_dhparam /etc/letsencrypt/dhparams/dhparam.pem;

    #return 200 'Let\'s Encrypt certificate successfully installed!';
    #add_header Content-Type text/plain;


    gzip on;
    gzip_types text/plain application/xml application/json;
    gzip_comp_level 9;
    gzip_min_length 1000;


    #brotli on;
 
    # 預設為 6, 0 ~ 11; 值愈大壓縮率愈高,使用的 CPU 愈多~
    #brotli_comp_level 6;
    #brotli_static on;
 
    # 壓縮對像
    #brotli_types application/atom+xml application/javascript application/json application/rss+xml application/vnd.ms-fontobject application/x-font-opentype application/x-font-truetype application/x-font-ttf application/x-javascript application/xhtml+xml application/xml font/eot font/opentype font/otf font/truetype image/svg+xml image/vnd.microsoft.icon image/x-icon image/x-win-bitmap text/css text/javascript text/plain text/xml;
 



    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    #location / {
    #        proxy_pass http://api/;
    #}


        # Add index.php to the list if you are using PHP
    index index.php index.html index.htm index.nginx-debian.html;


#    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
#            try_files $uri $uri/ =404;
#    }
    location / {
        proxy_pass http://tomcat10:8080/;

        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Forwarded $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
    }
#    location ~ [^/]\.php(/|$) {
#       fastcgi_split_path_info ^(.+?\.php)(/.*)$;
#       if (!-f $document_root$fastcgi_script_name) {
#           return 404;
#       }

       # Mitigate https://httpoxy.org/ vulnerabilities
#       fastcgi_param HTTP_PROXY "";
   
#       fastcgi_param SCRIPT_FILENAME  $document_root$fastcgi_script_name;
#       fastcgi_param PATH_INFO        $fastcgi_path_info;

#       fastcgi_pass phpfpm7.4:9000;
#       fastcgi_index index.php; 

       # include the fastcgi_param setting
#       include fastcgi_params;

       # SCRIPT_FILENAME parameter is used for PHP FPM determining
       #  the script name. If it is not set in fastcgi_params file,
       # i.e. /etc/nginx/fastcgi_params or in the parent contexts,
       # please comment off following line:
       # fastcgi_param  SCRIPT_FILENAME   $document_root$fastcgi_script_name;
#    }
}

docker-compose.yml檔如下:

Read More

Mariadb Tomcat Docker environment

This is a docker-compose yml,Integrated Mariadb、phpMyAdmin、tomcat Docker

How to start

  • install docker-ce and docker-compose
  • change to project directory to build and run docker
    sudo docker-compose up -d --build
  • use phpMyAdmin restore database (options)
  • build project war file and put to tomcat-webapps directory
  • browse http://yourip:8080/warFileName

docker information

  • mariadb:latest
  • phpmyadmin/phpmyadmin:latest
  • tomcat:8.5.49-jkd8-openjdk

default information

  • tomcat manager account and password admin / mypassword112233
  • mariadb root default password myadmin123
  • phpMyAdmin default port 8088
  • tomcat default port 8080 ;AJP port 8009
  • tomcat workspace is tomcat-webapps
Read More