'웹'에 해당되는 글 15건

개발 환경 :  ubuntu 18, php7.4, mysql 8.0

1. Mysql 설치

apt-get update
apt-get -y install mysql-server mysql-client
mysql -u root -p

create database HDVP;

create user 'HDVP'@'%' identified by '&HDVP@1234@HDVP';

grant all on HDVP.* to 'HDVP'@'%';

flush privileges;

use HDVP;

create table users (
         idx int not null auto_increment primary key,
         id char(20),
         name varchar(100),
         pw char(20)
         );

insert into users(id, name, pw) values('admin', '관리자', 'toor');
mysql -u HDVP -p

/etc/mysql/mysql.conf.d

vi mysqld.conf

bind-address            = 0.0.0.0
x   = 0.0.0.0

service mysql start

2. nginx + php 설치

apt-get -y install nginx

service nginx start

apt-get -y install php7.4-fpm

cd /etc/nginx/
vi nginx.conf

cd /etc/nginx/sites-available/
vi default

cd /etc/php/7.4/fpm/
vi php.ini        40% 즘

service php7.4-fpm reload
service nginx reload

cd /var/www/html/

vi info.php
<?php
phpinfo();
?>

http://ip주소/info.php

apt-cache search php7.4

apt-get -y install php7.4-mysql php7.4-curl php7.4-gd php7.4-intl php-pear php-imagick php7.4-imap
     php7.4-mcrypt php-memcache  php7.4-pspell php7.4-recode php7.4-sqlite3 php7.4-tidy
     php7.4-xmlrpc php7.4-xsl php7.4-mbstring php-gettext

apt-get -y install php-apcu

service php7.4-fpm reload

 index.php

특정 테이블에 10GB 데이터가 있는 경우

TEMP 함수로 SWAP과 같이 변환

1] A_TABLE -> A_TABLE_TEMP로  3개월치 데이터 

   insert into   select

2] A_TABLE  -> A_TABLE_BACK 테이블 이름 변경  

3] A_TABLE_TEMP -> A  테이블 이름 변경

4] A_TABLE_BACK  새로운  Database로 이관

유저가 과거 자료를 원하는 경우 4에서 데이터 추출하여 알림

출처 :

https://codepen.io/jaehee/pen/PZKeRy

<style>
body {margin: 30px;}
body * { margin: 0; padding: 0;}
a {text-decoration: none;}
ul {list-style: none}
li.selected  { width: 500px; background-color: #ddd;}

</style>

<h1>First UL</h1>
<ul id="uldata">
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet.</a></li>
    <li id="lidata"><a href="#none">Lorem ipsum dolor sit amet. Lorem ipsum dolor.</a></li>
</ul>
<br/>
<br/>

<script type="text/javascript">
(function(global, $){
    'use strict';

    var plugin = 'radioClass';
    $.fn[plugin] = $.fn[plugin] || function(className, context) {

            context = context || '';
            var _this = context ? this.closest(context) : this;
            _this.addClass(className);

            var $siblings = _this.siblings();
            $.each($siblings, function(index, item) {
                var _$sibling = $siblings.eq(index);
                if ( _$sibling.hasClass(className) ) {
                    _$sibling.removeClass(className);
                }
            });
            // jQuery 체이닝을 위한 this 반환 설정
            return this;

        }; // 끝: $.fn.radioClass

})(window, window.jQuery);

$(function () {
 console.log($(this.$ul));
    // 접근성을 위해 a 를 클릭하도록 합니다. (탭 포커스 이동시를 고려)
    var $ul = $('ul#uldata');
    $ul.on('click','li#lidata a', function (e) {

        e.preventDefault();
        // a 에 selected 가 되지 않도록 radioClass context 를 li 로 설정
        $(this).radioClass('selected', 'li');
    })
});
</script>

1. GET -> POST

HTTP를 통한 비밀번호 전송

2. Let's 인증서 설치

잘못된 SSL 인증서
안전하지 않은 TLS

3. 톰켓 샘플페이지 삭제

내부 서버 오류(500)
예외 보고서 공개(톰캣)
브라우저 탭을 탐색하여 피싱
내부 IP 주소 공개

4. server.xml 변경

내부 서버 오류(500)
예외 보고서 공개(톰캣)
누락 된 X-프레임-옵션 헤더

5. SpringSecurity.xml 적용

HTTP 엄격한 전송 보안   (HSTS) 정책비활성화
누락 된 X-프레임-옵션 헤더
누락된 콘텐츠 유형 헤더   (Content-Type)
영구 크로스 사이트 스크립팅
로그인 양샥의 크로스  사이트 요청위조 감지
크로스 사이트 요청 위조 감지

6. 자동완성 기능 해제

input (autocomplete="off")

7. 입력값 유효성 체크

영구 크로스 사이트 스크립팅
로그인 양샥의 크로스  사이트 요청위조 감지
크로스 사이트 요청 위조 감지

8. 방화벽 http 80번 차단

HTTP 엄격한 전송 보안   (HSTS) 정책비활성화

9. robots.txt   모두 거부

  User-agent: * 
Disallow: /  

10. Login  Javascript 암호화하여 패스워드 서버로 전송

Login Password(SHA256)  -> Spring(bcrypt) -> DB에 저장

11. 오래된 버전의  jQuery 사용

버전 업데이트 (jQuery v3.3.1 -> v3.4.1)

12.안전하지 않은 TLS(Transportation Security Protocol Supported)
server.xml 설정값 변경 TLS 1.2 프로토콜 지정

13. 누락 된 X-프레임-옵션 헤더
web.xml 설정값 변경
X-Frame-Options
(ALLOW-FROM -> DENY)

14. 크로스 사이트요청 위조 감지(XSS)

 Lucy fillter 적용
HTMLTagFilter사용

var express = require('express');
var morgan = require('morgan');

var app = express();

app.use(morgan('combined'));
app.use(morgan('common'));
app.use(morgan(':method + :date'));
app.use(morgan(':status + :url'));
app.use((request, Response) => {
    Response.send('express morgan');
});

app.listen(3000, () => {
    console.log('Server is running port 3000!');
});

여러개의 비동기 처리가 끝난 후

특정 로직을 실행하고 싶은 경우 발행

역슬레쉬

'use strict';

const string = '<h1>::: buy - 99,000 won :::</h1>';
const result1 = string.replace(/<h1>/g, '');
console.log('result1 :', result1);

const result2 = string.replace(/<h1>/g, '').replace(/<\/h1>/g, '');

// 역슬러쉬 정규식 표현시 앞에 사용
console.log('result2 :', result2);

.점

const string = '<h1>::: buy - </h1> <h2> 99,000 won :::</h2>';

const result1 = string.replace(/<..>/g, '');       // <..> 괄호속 어떤 문자2개면 삭제
const result2 = string.replace(/<.../g, '');        // <...  왼괄호 후  문자열3개 삭제

console.log('<..> : ', result1);
console.log('<...> : ', result2);

중괄호

'use strict';

const string = '<h1>::: buy - </h1> <h2> 99,000 won :::</h2>';
const stringDiv = '<div>::: buy - </div> <h2> 99,000 won :::</h2>';

const replaceH1 = string.replace(/<.{0,1}h1> /g, '');  // h1앞에 0,1글짜
const replaceTags = string.replace(/<.{0,4}> /g, '');  // > 앞에 0,4글짜

console.log(replaceH1);
console.log(replaceTags);

[]

const string = '<h1>::: buy - </h1> <h2> 99,000 won :::</h2>';

const Bracket = string.replace(/[()]/g, '');
const BracketComma = string.replace(/[()/\-,]/g, '');

console.log('before 전: ', string);
console.log('()after : ', Bracket);
console.log('/after : ', BracketComma);

php가변함수 참고 : https://demonteam.org/2018/07/18/php/

db에 웹쉘코드를 박고 실행이 될까 하는 의문점에서 시작한 POC

sql인젝션으로  DB에 웹쉘코드를 박고 활용하는 방안이다.

apt-get install php7.0-mysql

설치 후

phpinfo에서 PDO확인

1.php

2.php

eval함수를 이용한 웹쉘,,,

http://192.168.0.118/2.php?a=system&b=uname%20-a

가변함수로도 사용 가능

출처 :   https://www.lesstif.com/pages/viewpage.action?pageId=20775577

워드프레스는 DB에 html과 Css를 집어 넣은걸

호출하여 보여주는 형태이다.

서버 마이스레이션은 뻔하다.

이미지와 html , css의 프론트

웹스크립트언어와 DB의 백엔드 두개만 넣으면 끝아야 된다.

vmware에서 붙여보고 나중에 AWS로 이관 하기로 했다.

우분투에서 vmware에서 우선 진행하였다.

서버 스펙 : ubuntu-16.04.4-server

1] ssh설치

   apt-get install openssh-server

   service sshd start

2]아파치2 설치
  apt-get install apache2 -y

3] php7설치

apt-get install php7.2

apt-add-repository ppa:ondrej/php
apt install php7.2 libapache2-mod-php7.2 php7.2-mbstring php-xml php-mysql php-sqlite3
apt-get update

4] maria 설치
apt-get install mariadb-server
apt-get install mariadb-server-core
apt-get install mariadb-client

테이블을 제작하고 DB를 밀어 넣자.

create database DB명;

리모트mysql-workbench를 이용하기 위해서 외부에서 접근 가능 하도록 구축

create user '계졍명'@'%' identified by '패스워드';
grant all on 계정명.* to '계정명'@'%';

flush privileges;

use 계정명;

show tables;

테이블이 없는걸 확인 하자.

DocumentRoot는  우분투 기본인

/var/www/html

service apache2 start 하여  php7이 잘 올라오는지 확인 해야 된다.

phpinfo로 설치가 완료 되었으면

소스코드(html, css, php) 이미지를 업로드 하자.

여기까지는 그나마 무난했다 30분 이내 생초보도 할수 있는 부분이고 이제 대망의 DB작업을 실사하자 .

문제는 여기서 DB이다. 그것도 html소스가 박힌 DB

왜 html소스가 박힌 DB가 어렵나면 게시판에 내용도

칼럼에 데이터가 너무 길경우 개행문자에 대한 처리 부분과

정규식부분(괄호, 특수문자)에서 처리가 되었다고 하지만

잘 안들어 가게 된다.

한글까지 포함 된다면 머 한줄 한줄 밀어 넣어야 되는 최악의 사태도 발생할수 있다.

덤프는 PhpMyadmin에서 내보내기 하면 된다.

내보내기 한 파일 쿼리 sql 

1] 콘솔에서 밀어 넣어보았다

 실패 mysqldump -u 계정명 -p  디비명 < 쿼리.sql

2] PhpMyadmin을 구축하였다 30메가인데 덤브파일이

  25메가 밖에 업로드가 안된다고 한다. 패스

  zip파일에서 압축해서

php.ini에서 용량 늘리기 가능함

  file_uploads = On
 upload_max_filesize = 100M
 post_max_size = 100M

3] mysql콘솔에 복사 붙이기 해보았다. 
   3시간 정도 걸리던데 결국 html소스들 때문에 삽입은 되었으나

  정상적으로 작동이 불가능 했다.

  (여기서 너무 많은 시간을 허비 했다)

4] index.html소스만 복사해서 붙여 보았다. 당연 반응형에서

   제대로 동작 안하였고 실패

5] mysql-workbench를 구축 하였다.

   비주얼 툴도 머 이상한거 설치하고

./mysql/mariadb.conf.d/50-server.cnf:bind-address    = 127.0.0.1 ->0.0.0.0

  으로 변경하였다.

마리아 DB최신 소스라서 검색한 경로에 없길래  grep으로 문자열 검색 하여 찾았다.

컨넥션이 완료되고  프로그램이 종료 되는것이다.

오라클 토드나,, ms-sql과 왜이렇게 다르지 했는데 프로그램 다시 실행하니

컨넥션 정보가 남아 있다 저길 클릭하고 들어 가야 된다.

덤프뜬 데이타베이스를 이쁘게 잘 밀어 넣었다.

제대로 동작할가?

제대로 동작한다면 서버이관 작업이 빡시다고 하지도 않는다.

이관전 디자이너는 아주 이쁘게도 3가지 타입의 코딩을 하였다

1] 호스팅주소코딩   2] dns코딩   3]상대경로 코딩

모두다 3번으로 코딩하면 아주 쉽게 끝날일을

1,2번을 수정해야 되었다.

여기서 방법이 2가지가 있다.

mysql-workbench에서 찾아 바뀌기 컨트롤+H해서 수정하는 방법이 있고

업로드 후라면 쿼리를 이용하는 방법도 있다.

스타트 URL과 홈페이지 주소이다 WP-admin에 있는것과 같은거다.

UPDATE wp_posts SET guid = replace(guid, '수정전','수정후');

소스코드 html소스이다.

UPDATE wp_posts SET post_content = replace(post_content, '수정전','수정후');
UPDATE wp_postmeta SET meta_value = replace(meta_value, '수정전','수정후');

wp-config.php 내용도 변경해야됨 마지막 부분에

/* DOMAIN SETTING */

/* DOMAIN SETTING */
define('WP_HOME','변경해야됨 ');
define('WP_SITEURL','변경해야됨 ');

vmware에서는 이관이 다 완료 되었다.

문제는 AWS에 이관할려니 mysql-workbench가 당연히 안붙는다 AWS방화벽도 해제 해도 마찬가지다.

phpmyAdmin을 다시 구축하였다 콘솔로는 답이 없기 때문에

문구를 자세히 읽어 보니

압축한 파일에 대해서는 25메가가 가능하다고 나온다. 그래서 내 파일을 zip으로 압축해 보았다.

2메가가 되는것이다.

text다 보니 압축도 잘된다.

바로 import시키니 잘 붙는다.

멘탈만 안나갔으면 2번에서 쉽게 끝날일을 삽질을 좀 많이 했다.

나와 같은 삽질을 하지말라고 이 게시물을 포스팅 한다.

그리고 워드프레스  wp-admin에서 화면 편집이 위저드 처럼 가능하다.

용도는 어디에 쓰냐면 홈페이지에 방문자가

문의한 내용을 메일로 받을때 사용한다.

출처 : https://github.com/PHPMailer/PHPMailer

예전 신입시절 telnet으로 메일 보내기 했는데

지금은 메일서버 구축 따로 없이 구글로 메일을 보내 보았다.

깃허브 소스는 다  깃 클론으로 다운로드 받아 주고,

경로만 잘 맞춰주면 잘 작동한다.

1] PHP Malier 경로

use PHPMailer\PHPMailer\PHPMailer;

use PHPMailer\PHPMailer\Exception;

require_once('./PHPMailer/src/Exception.php');

require_once('./PHPMailer/src/PHPMailer.php');

require_once('./PHPMailer/src/SMTP.php');

2] 구글에서 만들어준 앱용 패스워드

  https://security.google.com/settings/security/apppasswords

이 두가지만 고려 하면 딱히 구축하는데 크게 어려움은 없다.