sentimental programmer: FireFox

Sentimental Programmer | ysoftman

레이블이 FireFox인 게시물을 표시합니다. 모든 게시물 표시

dark reader 다크모드

크롬에서 다크모드를 사용하기위해

github => github dark theme

그외 사이트들은 => stylish

으로 다크모드를 사용했다.

그런데 dark reader 하나로 모든 사이트를 다크모드로 맘에 들게 변경할 수 있다.

https://darkreader.org/

chrome, firefox, safari, edge 모두 지원하며

오픈소스도 꽤 인기가 많다.

github 은 github dark theme 가 아직 코드 컬러링이 더 좋고
그외 모든 사이트들은 모두 dark reader 가 좋다.

rust 로 간단한 html 응답을 주는 웹 서버를 만들어 테스트하기 위해 chrome 에서 다음과 같이 입력하면 화면에 아무것도 나타나지 않는다.
chrome secret 모드에서도 안된다.
https://localhost:9090

같은 주소에 대해서 firefox 는 표시된다.
curl http://localhost:9090/ 요청도 html 응답을 받고 있다.
rust 서버에서 http request/response 출력해보면 응답도 잘 주고 있다.

chrome 79.0.3945.117 버전을 사용하는데,
chrome 개발툴 -> network 요청결과 status fail 이고,
chrome 개발툴 -> console 에는 다음과 같은 에러가 보인다.
GET http://localhost:9090/ net::ERR_CONNECTION_RESET 200 (OK)
맨 오른쪽 :9090/:1 링크를 클릭하면 그제야 html 화면이 보인다.

chrome 방문객 피싱(phishing) 조심

유튜브 URL 오타로 http://youteube.com 접속하면
여러 사이트가 랜덤하게 열리는데
이 중 apps5321.funnymonday1.live 사이트로 연결되면
갑자기 방문객 설문조사 페이지가 뜬다.
알고 보니 피싱(phishing) 사이트였다. 조심조심~

UA 보고 크롬, 파폭 구분해 그럴싸하게 페이지를 꾸미는것 같다.ㅋ

크롬에서...

파이어폭스에서...

구글에 피싱 페이지를 신고할 수 있다.
https://safebrowsing.google.com/safebrowsing/report_phish/Captcha

firefox esni, trr 기능

# https 암호화 전 접속 호스트명 SNI(Server Name Indication)가
# 암호화 되지 않아 ISP 에서 차단하는 사이트가 많은데,
# ESNI(Encrypted SNI)와
# TRR(Trusted Recursive Resolver)를 사용할 수 있는
# firefox 를 사용하면 차단 없이 접속 가능하다.

# firefox about 프로토콜에서 다음과 같이 설정한다.
about:config -> network.security.esni.enabled -> true
about:config -> network.trr.bootstrapAddress -> 1.1.1.1
about:config -> network.trr.uri -> https://mozilla.cloudflare-dns.com/dns-query
about:config -> network.dns.echconfig.enabled -> true
about:config -> network.trr.mode -> 3

# trr.bootstrapAddress(1.1.1.1) 로 trr.uri 주소를 파악하게 된다.
# trr.mode
# 0: native resolver (default)
# 1: native resolver, trr 중 응답 빠른것을 사용
# 2: trr 시도 후 안돼면 native resolver 사용
# 3: trr 만 사용
# 4: reserved(shadow mode 로 추가될 예정)

# firefox about 프로토콜 설명
https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/The_about_protocol

# 85버전 부터는 ESNI 대신 보안이 더 강화된 ECH(Encrypted Client Hello)를 사용한다.
# ECH 모드를 활성화 하려면 다음 2개 설정을 활성화 해야 한다.
about:config -> network.dns.echconfig.enabled -> true
about:config -> network.dns.use_https_rr_as_altsvc -> true

# ESNI -> ECH 설명에서 설정 방법 참고
https://blog.mozilla.org/security/2021/01/07/encrypted-client-hello-the-future-of-esni-in-firefox/

웹페이지 dark mode 보기

개인적으로 어두운 색상이 눈도 편하고 맘에 들어 terminal, IDE 등에 dark 계열 테마를 적용해서 쓴다.
맥,윈도우 OS 자에도 다크모드를 지원해서 native 앱들도 잘 쓸 수 있다.
최근 웹 페이지들도 light(day) <-> dark(night) 를 스위칭할 수 있도록 해준다.
그런데 대부분의 웹페이지는 흰색 배경색이라 chrome extension 에서 stylish 를 사용해서, github, slack, wikipedia 등의 사이트에 맞는 테마를 다운받아 사용했다.
요것보다 모든 페이지를 다크모드로(밝기,선명도등 커스터마이징 가능)해주는 night eye 는 지금 blogger post 편집 화면도 dark 보여준다.
완벽하지 않지만 대부분 사이트를 dark 로 잘 변환해줘서 좋다~
아래 사진 처럼 특히 구글 웹페이지를 잘 바꿔준다.

chrome shortcut

# mac 기준 chrome shortcut

# window,linux 에선 보통 cmd -> ctrl 을 사용하면 된다.
# 웹페이지의 이미지가 변경되었는데, 캐시되어서 새로고침(refresh)해도 그대로인 경우

# 다음 단축키로 캐시를 날리고 hard refresh 할 수 있다.(chrome, firefox 동일)

cmd+shift+r

# 탭 닫기
cmt+w

# 이전탭 이동
ctrl+shift+tab

# 다음탭 이동
ctrl+tab

# 주소줄 바로가기
cmd+l

# 주소줄 자동완성 지우기
주소줄 자동완성 항목에서 shift + delete

# 설정 열기(chrome://settings/)
cmd+,

# 북마크 삭제,추가
cmd+d

# history

cmd+y

# elements 검사

cmd+shfit+c

# console 창 toggle

cmd+option+j

# 확대/축소

cmd+=

cmd+-

# 이전/다음 페이지

cmd+[

cmd+]

http 204 응답 브라우저 처리 방식

# http 응답이 다음과 같이 204 인 경우 브라우저 화면에 변화가 없다.

# 204 : 클라이언의 요청은 성공이지만 서버가 추가적으로 응답줘야할 내용이 없는 경우

status code: 204 No Content

# 찾아보니 204 응답을 받은 클라이언트는 현재 페이지를 벗어나지 않는다고 한다.

# 그래서 서버에서 204 응답으로 바디 내용 비운상태로 주더라도 브라우저는

# 이전 페이지(204 요청 전)를 보여주고 있어

# 마치 204 요청에 이상한 응답을 주것으로 착각할 수 있다.

# 실제 curl 로 확인하면 다음과 같이 내용이 없이 응답을 주는것을 확인 할 수 있다.

* TCP_NODELAY set

* Connected to localhost (::1) port 8080 (#0)

> GET /ysoftman/test HTTP/1.1

> Host: localhost:8080

> User-Agent: curl/7.57.0

> Accept: */*

< HTTP/1.1 204 No Content

< Content-Type: application/json; charset=UTF-8

< X-Content-Type-Options: nosniff

< X-Request-Id: d6e8e682-86f5-45d6-91d5-67a1c26efd38

< Date: Wed, 01 Aug 2018 06:13:50 GMT

* Connection #0 to host localhost left intact

# 204 상태 코드 설명 참고

https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/204

IE11 네이버 검색, 메일 먹통 경험

InternetExplorer(IE) 11 로 네이버 검색 요청을 하면 응답이 없는 현상이 발생했다. 네이버 메일(mail.naver.com) 사이트도 응답이 없다.

여러가지 테스트로 얻은 상황을 보면...

1. ie11 로 네이버 검색을하면 응답이 없다.

2. chrome, firefox 모두 네이버 검색이 잘 된다.

3. ie11 로 구글, 다음 검색은 아무 이상 없이 잘 된다.

4. ie11 inprivate 브라우징(ctrl + shift + p)로 새 창을 열고 네이버 검색하면 잘 된다.

5. ie11 에서 네이버 메인페이지의 실시간 급상승어를 클릭해도 응답이 없다.

(https://search.naver.com 로 시작하는 URL 에 응답이 없다.)

해결 시도...

1. ie11 브라우저를 모두 닫고 재시작 -> X

2. ie11 기본 설정 복원 후 재시작 -> X

검색과 메일 서버에 ping 을 날렸지만 응답이 없다.

ping search.naver.com

ping mail.naver.com

해결 방법
윈도우 재시작하니 정상동작함... 흠...

웹 브라우저 실행시 다수 웹 접속하기

보통 사람들은 웹 브라우저를 실행시키고 자주 가는 사이트를 하나씩 새창(또는 새탭)을 열어 접속한다.

고정적으로 사용하는 웹 페이지가 있다면 매번 새창을 열어 일일히 URL 을 입력하는 것은 좀 귀찮을 수 있다.

브라우저를 강제로 종료하고 다시 실행시키면 복구 기능으로 종료 되기 전의 웹들을 시작과 동시에 볼 수 있다. 하지만 정상적인 종료의 경우 이런 복구 기능은 사용할 수 없다.

이런 경우 웹 브라우저 실행시 다수의 웹 페이지를 자동으로 띄워준다면 편하다.

다음과 같이 크롬 실행 시 인자로 띄울 웹페이지를 명시하면 된다.(.bat 파일로 만들어 놓으면 편함)

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" www.google.com www.naver.com www.daum.net

"C:\Program Files (x86)\Mozilla Firefox\firefox.exe" www.google.com www.naver.com www.daum.net

참고로 IE 위 기능이 작동하지 않는다.ㅠ

JavaScript No Access-Control-Allow-Origin 에러 해결하기

# 보안상의 이유로 ajax(XMLHttpRequest) 로 요청하는 도메인과 요청받는 도메인이
# 다를 경우(크로스 도메인) 브라우저 개발 콘솔창에서 다음 에러메시지를 확인 할 수 있다.
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. "
# Firefox 로 보면
# CORS(cross origin resource sharing), same origin(동일 출처) 원칙에 따르면 현재 웹페이지의 리소스(스크립트, 이미지, 동영상등)의 출처가 현재 도메인과 다르면 안되지만 이를 가능하게 하는 메커니즘이다.

"교차 원본 요청 차단: 동일 출처 정책으로 인해 http://10.10.10.10/ysoftman 에 있는 원격 자원을 읽을 수 없습니다. 자원을 같은 도메인으로 이동시키거나 CORS를 활성화하여 해결할 수 있습니다."

# 예를 들어 로컬 디스크에서 개발중인 ajax내용이 있는 .html파일 크롬으로 실행시키면 발생할 수 있다.

# 내 PC 도메인은 file:///C:어쩌구저쩌구... 인데 실제 ajax 로 요청하는 호스트 도메인은 http://10.10.10.10 등으로 서로 다르기 때문이다.
# 서버단에서 해결방법
# 서버쪽에서 응답 헤더에 Access-Control-Allow-Origin 값을 모두 허용하도록 설정
# 서버 언어에 맞게 응답 헤더에 설정하도록 한다.
header("Access-Control-Allow-Origin", "*");
header("Access-Control-Allow-Origin: *");

# 클라(브러우저)에서 해결방법
# 크롬의 경우 현재 열려진 모든 크롬을 닫고 아래 옵션을 주어 실행
chrome --disable-web-security

# 아래 크롬 주소창로 크롬 실행시 어떤 옵션으로 실행되었는지 파악할 수 있다.
chrome://version

# IE의 경우
# 요청 후 나타나는 "차단된 콘텐츠 허용" -> 예 선택

# 외부 URL 요청이라면 웹브라우저가 preflight 요청을 수행한다.

# preflight 는 method=options 로 설정하고 해당 URL 로 미리 요청을 날려 요청이 허용(allow) 되는지 파악하는 과정이다.

# preflight 요청시에 다음과 같이 헤더 설정을 한다.
# POST 메소드를 사용할것이고 X-PINGOTHER 헤더가 포함될것이라고 알린다.
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER

# preflight (method=options) 요청후 서버 응답으로 서버에서 사용가능한 리소스, 메소드, 헤더등의 정보를 알려준다.

# http://foo.example 도메인에서만 허용된다.

# POST, GET, OPTIONS 메소드 허용된다.

# 86400 초 동안 preflight 응답을 캐싱

Access-Control-Allow-Origin: http://foo.example
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

# preflight 응답이 다음과 같다면 모든 도메인에서 접근(요청)이 가능하다.

Access-Control-Allow-Origin: *

# 참고

# https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/OPTIONS#preflighted_requests_in_cors

# https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials

# https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials