히파루스의 솔직한 여행 이야기

보안은 나날이 강화되고 있고 앱을 올릴때도 SSL이 필수가 되었고(물론 예외 처리는 가능) 웹은 말할 필요가 없다.

일찍이 크로스사이트가 막혔고 이젠 혼합콘텐츠란걸 알게 되었다.

혼합콘텐츠란 SSL이 적용된 사이트에서 SSL이 적용되지 않은 사이트의 컨텐츠(이미지, 동영상, 스크립트, CSS 등)를 불러오는 방식인데 자세한 내용은 구글의 블로그를 참고하자

(https://developers.google.com/web/fundamentals/security/prevent-mixed-content/what-is-mixed-content?hl=ko)

자세히 잘 설명되어 있다.

읽다보면 "나(구글)님께서 널 때렸는데 니가 왜 맞아야 하는지 설명해줄께" 처럼 아주 잘 와닿는다.

혼합컨텐츠가 뭔진 알았을테고

혼합컨텐츠로 인해 컨텐츠가 불러와지지 않는 심각한 문제가 생겼다면 해결하는 방법은 다음과 같다.

크롬은 사진처럼 주소창의 자물쇠 아이콘을 눌러 사이트 설정 > 안전하지 않은 콘텐츠의 차단(기본값)을 허용으로 바꿔주면 동작한다.

(익스플로러는 망한 브라우저니 대충 알아서 옵션 설정을 하면 됨)

그럼 이게 왜 필요한지 생각해보자

특수한 경우이긴 하지만 이 특수한 경우를 접하게 되면 사람 돌아버린다.

하루 이틀 시간 낭비는 예사다.

인생 짧으니 내 경험을 공유하고자 한다.

상황은 이러하다.

동영상이나 음원처럼 용량이 큰 파일을 CDN을 통해 서비스한다 치자

(회사의 CDN 주소를 공개하기엔 뭐하니 웹상에 있는 클래식 음원을 하나 불러와보자.)

그럼 플레이어로 불러와야 하는데 그냥 박아넣으면 용용죽는다. 안된다.

그럼 어쩌야 할까?

이렇게 해야 한다.

        var player = new Audio('http://www.hochmuth.com/mp3/Haydn_Cello_Concerto_D-1.mp3');

        player.controls = false; //컨트롤 안보여줄래요

        document.body.appendChild(player);

        player.play();

넣었다 뺐다 넣었다 뺐다

쉬운가?

찾아내는데 2시간 넘게 걸렸다. -_-

그다음은 혼합컨텐츠 문제

이렇게 처리해도 내 사이트가 SSL인데 위에 저 클래식 음원은 SSL을 지원하지 않는다면 HTTP로 호출할 수 밖에 없다.

크롬의 검사 기능을 통해 왜 플레이가 안되는지 확인해보면 ERR_CERT_AUTHORITY_INVALID 오류를 내뱉고 있다.

안타깝게도 국내 CDN서비스 업체들은 아직 상황 판단을 못하는건지 HTTPS를 지원하지 않는다.

모 대기업 CLOUD 상담센터 상담원에게 HTTPS지원안하냐? 계획없냐? 물어보면 "SSL CDN 어버버 네???" 이런다.

한숨 나와서 그냥 아니에요~ 하고 끊어버렸다.

이건 방법이 없다.

HTTPS를 지원하는 CDN업체를 찾아서 하던지 (가령 Cloudflare) 아니면 위에 언급했듯이 이용자에게 브라우저 설정을 바꿔주세요 라고 할 수 밖에 없다.

2020년 현재일 기준으로 테스트 해본 결과 크롬, 엣지, 모바일 사파리, 모바일 크롬 브라우저 중 혼합 컨텐츠를 차단시키는 브라우저는 PC크롬브라우저가 유일했다.

아마 다른 부라우저들도 수년내로 따라가지 않을까 싶다.

보안은 그렇게 강화하며 따라가곤했으니

2000원 정도로 우육탕면을 맛볼 수 있다기에 냉큼 이마트 노브랜드 관에서 집어옴
검증되지 않았으므로 테스트로 한개만

조리방법은 간편함
포장 뜯고 그냥 가스렌지나 전기(인덕션은 안됨)렌지에 은박채로 끓이면 되는데
동영상처럼 우육탕 은박 용기가 부들부들 떨어댐

젓가락으로 눌러줘야 저 덜덜 떨림이 멈춤
난 뭔 큰일 나는줄 알았음 -_-

내용물은 여느 라면과 동일한데 튿색있게 고수봉지가 들어있음
나름 기대했는데 고수맛이 흠... 약해도 너무 약함
고수 못먹는 사람들 때문에 따로 건더기 스프랑 분리해서 제공한건데 너무 맛이 약함

그리고 내용물도 즉 우육탕면 건더기도 좀 거시기 함
짜파게티에 들어있는 그 동그란 고기 역할 인조건더기가 들어있음

이마트 노브랜드 상품은 가성비로 먹는건데
흠... 재구매 의사가 안듦

결론 : 사먹지 마

편의점 도시락 순위를 논하자면 GS25 >>> 세븐일레븐 > CU 순이라 본다.
GS는 비교적 합리적인 가격대에 다양하고 알찬 구성으로 도시락을 내놓기 때문

지난번 바싹 불고기도 그렇고 이번 "중화요리 판 돌리고 싶은"은 돈값은 커녕 제품의 질 자체가 아쉬울 따름이다.

일단 양장피, 깐풍기, 탕수육으로 매우 훌륭한 라인업이다.
양장피는 호불호가 갈릴 수 있겠지만 한국사람들 중 탕수육 싫어하는 사람 못봤고 깐풍기도 치킨의 민족이니 마다할 이유가 없는 훌륭한 구성이다.

그런데 문제는 품질이다.
일단 탕수육은 말라비틀어진 냉동 고기인지 뭔지로 식감이 매우 별로다.
또한 고기 함유량도 크기에 비해 부실하다.
빈약한 분식에 나오는 오징어튀김 보는줄 알았다
소스는 쏘쏘

반면 깐풍기는 탕수육에 비해 그나마 낫다.
하지만 맵기만 할 뿐 깐풍기에 기대하는 그 고유의 소스맛이 아닌 매운 양념치킨맛이라 표현함이 맞다 본다.

끝으로 양장피
뭐 그리 나쁘진 않지만 그렇다고 훌륭하지도 않다.
소스가 겨자스렁 면서 허니머스타드스러운게 단점이랄까?

집앞 편의점에서 정가 5,900원짜릴 3,900원인가에 할인하길래 KT10% 할인 + 제로페이 10% 영끌찬스로 구매했으니 망정이지

GS식품 개발팀 예전처럼 좀 더 분발해주길 기대해본다.
GS파이팅~

<textarea name="TITLE" class="TITLE">내 제목, 입니다.</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

<textarea name="TITLE" class="TITLE">내 제목 입니다.2</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

<textarea name="TITLE" class="TITLE">내 제목 입니다.3</textarea>
<script type="text/javascript">
    CKEDITOR.replace("TITLE", { height: 100 });
</script>

대충 이런식으로 TEXTAREA에 CKEDITOR를 적용해놓고 저장을 하는데 가끔 CKEDITOR를 배열로 배치하여 사용할 때 배열 구조상 문장에 ", " 이런 문자열이 들어가면 문제가 생길 수 있다.

뒤 처리단에서 동일안 컨트롤 이름으로 SPLIT하여 처리하게 될 경우 ", "로 인해 의도치 않게 데이터가 짤려버리는 상황처럼 말이다.

따라서 팁으로 보내기전에 해당 문자열은 다른 문자열로 치환시킨 후 처리하는 뒷단 페이지에서 다시 원상복구 시켜주면 해결되는데 이게 그냥 하면 안되고 아래처럼 getData로 값을 받아서 setData로 치환된 데이터를 넣어줘야 한다.

            $(".TITLE").each(function() {
                var editor = CKEDITOR.instances['TITLE' + nCkeditorNum];
                strData = editor.getData();
                editor.setData(strData.replace(/, /g, "!^"));
                nCkeditorNum++;
            });

처리하는 뒷단에선 "!^"를 ", "로 다시 원상복구 하여 저장시키든 말든 하면 끝남
굳이 자바스크립트 정규표현식까진 설명 안하겠음.

블로그 : https://blog.addpipe.com/using-recorder-js-to-capture-wav-audio-in-your-html5-web-site/

git : https://github.com/addpipe/simple-recorderjs-demo

사용법 : 위 github로 접속하여 소스 다운로드만 하면 잘 됨
github.com/addpipe/simple-recorderjs-demo/archive/master.zip

js폴더 하위에 app.js만 수정해주면 되는데 기본은 php로 되어있다.
난 classic asp이므로 function createDownloadLink(blob) 이 부분을 수정해주면 된다.
원본은 리스터로 업로드 버튼을 클릭하면 업로드를 진행하게 되어 있는데 자동으로 업로드를 해줘야 했기 때문에
upload.addEventListener("click", function(event) {
})

// 자동업로드시작
  var xhr=new XMLHttpRequest();
  xhr.onload=function(e) {
      if(this.readyState === 4) {
          alert(e.target.responseText);
      }
  };

  var fd=new FormData();     

  fd.append("audio_data", blob, "filename.wav"); // 파일 이름은 원본 소스에 날짜시간 뭐 이런식으로 되어 있는데 알아서 바꿔주면 된다.

  fd.append("userid", "myid");

  xhr.open("POST","/upload/voiceupload.asp",true); //js폴더 기준으로 업로드 파일의 경로를 제대로 지정해줘야 한다.

  xhr.send(fd);

// 자동업로드끝

주의사항 : SSL(https)가 아닌경우 권한 문제 발생되므로 반드시 SSL환경에서 구현할 것
edge, (android, ios, pc)

chrome, safari 등 어지간한 브라우저는 다 지원함.
망할 IE는 안됨. 당연히

1회성 시간 비교가 아닌 타이머 같은 시스템을 구현할 경우 서버 시간과 클라이언트 시간이 차이가 나거나 이용자의 악의적인 클라이언트 시간 변경에 따른 시간차가 발생할 경우가 예상될 경우 해결방법은 여러가지가 있겠다.
가령 매 초마다 ajax로 호출하여 서버쪽 시간을 받아오고 클라이언트 시간은 사용 자체를 안한다던지
좀 더 투박한 방법이지만 hidden iframe 등을 사용하여 지속 갱신해가며 마찬가지로 클라이언트 시간은 사용 안하는 방법 등등

하지만 두 방법 모두 지속적인 서버 호출이란 단점이 존재하므로 사용하기엔 바람직해보이지 않는다.

아래 소개하는 방법을 요약하자면

1. 페이지가 처음 로딩될 때 서버시간을 받아온다.
2. 클라이언트 시간을 추출한 후 서버시간과 클라이언트와의 시간차를(초) 구하여 클라이언트 시간을 보정해주면 그만이다.
3. 이제 타이머를 동작시키면 정확히 서버와 클라이언트 시간은 일치하게 된다.

그런데 여기서 한가지 문제가 있다.
만약 시간이 지속 경과하는 와중에 페이지가 로딩된 이후 클라이언트 컴퓨터의 시간을 바꿔버린다면 위 로직은 망가져버린다.
때문에 interval함수 내부에는 매번 클라이언트 시간을 구하지 말고 페이지가 로딩될 당시의 클라이언트 시간에 interval의 간격시간만큼 더해주면 깔끔하게 해결된다.

아무리 시간을 앞으로 더하든 뒤로 돌리든 서버시간과 일치하는 타이머가 구현된다.

<%
Function CONVERTDATETIME(objDate, dateFormat)
Dim rtnValue

    if false = IsDate(obj_date) then
        obj_date = now
            end if

            if dateFormat = "" then
                dateFormat = "yyyy-mm-dd h:n:s"
            end if

    rtnValue = Replace(dateFormat, "yyyy", Year(objDate))
    rtnValue = Replace(rtnValue, "mm", right("0" & Month(objDate) , 2))
    rtnValue = Replace(rtnValue, "dd", right("0" & Day(objDate) , 2))
    rtnValue = Replace(rtnValue, "h", right("0" & Hour(objDate) , 2))
    rtnValue = Replace(rtnValue, "n", right("0" & Minute(objDate) , 2))
    rtnValue = Replace(rtnValue, "s", right("0" & Second(objDate) , 2))

    CONVERTDATETIME = reValue
End Function
%>


<script type="text/javascript">
        var tStart = new Date("<%=regESADATE %>");
        var tClient = new Date();

<%
       Dim SERVERTIME
       SERVERTIME = CONVERTDATETIME(Now(), "")
%>

        var tServer = new Date("<%=SERVERTIME %>");
        var rSecond = (tClient.getTime() - tServer.getTime()) / 1000;

        if (rSecond < 0) {
            tClient = new Date(tClient.getTime() + (Math.abs(rSecond) * 1000));    
        } else {
            tClient = new Date(tClient.getTime() + ((rSecond * (-1)) * 1000));
        }

var progressTimerId;

progressTimerId = setInterval(function() {
    var tStart = new Date("<%=regESADATE %>");
    tClient = new Date(tClient.getTime() + 1000);
}, 1000);
</script>

일단 정가는 5,900원 되시겠다.
하지만 7월 25일부터 말일까지 3,900원에 할인 판매 중이다.

결론부터 말하자면
3,900원이라면 사먹어볼 수 있겠지만 정가인 5,900원 주고는 어렵겠다.

구성품은 고기와 마늘, 쌈장, 쌈채소 그리고 이렇게
친절하게 물티슈로 되어있다.

뚜껑을 개봉하고 랩을 벗긴 후 쌈장용기와 쌈채소 용기를 꺼내고 전자렌지에 돌려야 한다.


이제부터 분석

감점 이유

1. 밥이 없다.
집이 아니라면 햇반까지 돌려야하니 가격 메리트 측면에서 도시락으로 하기엔 힘들다.
대충 술안주로 나온 제품인것 같은데 쌈 컨셉인데 술안주라 조금 에바스럽다.

2. 고기가 그렇게 맛있진 않다.
대충 상상하는 석쇠불고기는 자글자글한 고기육질과 불향이 그윽하게 풍겨져 나오는 모습인데 그냥 찐득한 소스맛도 아닌 나다 만듯한 그냥 마른 고기 수준이다.

3. 쌈채소가 너무 적다
1/3로 나눠 먹어야 할 수준이다.
채소가 비싸 어쩔 수 없어도 1/2수준은 돼야 한다본다.


득점이유

1. 쌈채소가 너무 훌륭하다
신선하고 맛까지 좋다.
여느 고깃집에 가도 이정도 퀄의 쌈채소는 접하기 힘들다.

2. 마늘이 맛있다.
마늘과 함께 한쌈 넣자마자 눈채챌 수 있었다.
얘네 마늘 국산썼구나!
중국산의 그 혀를 고문하는 아린 맛이 아닌 나 마늘이에요 함께해요 속삭이는 국산 본연의 그 맛과 적당하게 매우면서 단맛이 어우러지는 그런 맛
이런 마늘맛은 국산에서만 느낄 수 있다.

쌈장 또한 빼놓을 수 없다.
후반부엔 부족한 쌈채소 대신 쌈장과 마늘로 고기맛을 죽여가며 먹어야하는데 국산 마늘과 쌈장 때문에 고기를 남기지 않아 음식물 쓰레기를 줄일 수 있었다.



최종 요약

도시락이라 하기엔 밥이 없어서 애매하고
가격도 높아서 또 애매하다.
그렇다고 술안주로 하자니 메인 식재료인 고기가 술안주 레벨이 아니다.


GS25 도시락 쌈채소 석쇠불고기 평가 끝

GS마케팅 및 제품 개발 임직원께서 보신다면 다른 사람 몰래 도시락 보내주실 경우 이런 솔직한 리뷰가 아닌 성심껏 MSG쳐가며 맛있다는 구라 포스팅 가능합니다.

경쟁사인 일곱열하나, 봐유, 작은정지 등등 언제나 환영합니다.
영혼 저렴하게 판매 가능합니다.

<select name="SELECTBOXIDX" id="SELECTBOXIDX">
<option value="1" IDX="A">
<option value="2" IDX="B">
</select>

        $("#SELECTBOXIDX").change(function() {

            var IDX = $(this).find('option:selected').attr("IDX");

            alert(IDX);

        });

늘 느끼는 일이지만 애플 고객센터는 상냥하기만 하고 평균 이상의 문제에 대해선 해결된 적이 없다.

개발자 계정 이중보안 문제고 그러했고 앱리뷰와 관련된 안내도 그러했으며 이번 iOS 14 베타 업그레이드 다운그레이드시 발생한 이 망할 사이드 버튼 3회 눌러 화면 밝기를 조절할 때 마다 발생하는 "확대/축소 비활성화됨" "확대/축소 활성화됨" 안내창은 역대 최고의 헛 상담이었다.

무슨 iOS13 마지막 버전이 나오면 해결 될거라나 ㅡㅡ
업그레이드해도 똑같이 화면 밝기 조절때마다 저 안내창이 나와 해외까지 뒤져 찾아낸 이 망할 버그 잡는 방법을 공유한다.

해외 검색 결과를 토대로 따라하려다보니 아이폰 언어설정을 영어로 하고 캡쳐 떠서 첨부 이미지는 영문 캡쳐로 되어 있으나 나님께서 친절히 한글 메뉴명을 써주셨으미 탐복해도 됨

1. 설정 > 손쉬운사용 > 맨하단 손쉬운사용단축키

2. 나타난 화면에서 확대/축소 언체크 후 화이트포인트 줄이기 체크

이 망할 아이폰 버그 때문에 한달을 불편함에 몸서리 쳤다.
이 버그가 흔한 버그가 아닌지라 국내 웹상에선 딱 한 명 지식인에 질문이 올라왔을 정도이고 그나마 달린 답변도 엉뚱한 껐다 켜봐라는 잘못된 답변뿐이었다.

해외에선 구글에서 zoom enabled alert bright 키워드로 검색하니 대번에 첫 검색결과로 나와줌

https://discussions.apple.com/thread/7399443

기본 jquery, jquery ui 등 include시켜놓고

<div id="DIVDRAGAREA">
이 안에 테이블도 좋고 div도 좋고 ul ui 등도 좋고.. 여하튼 리스트로 구현해두면 됨
</div>

        $("#DIVDRAGAREA").sortable({
            stop: function(event, ui) {
                alert("New position: " + ui.item.index());
                //필요시 이 안에 ajax로 update service를 call 때리면 됨                
            }
        });