[보안] snyk에서 언급한 React 보안 코드 적용

suritam92021.12.04 09:58조회 수 419댓글 0

하기 사이트에서는 React 에서 사용할 수 있는 패키지 모듈을 소개하는데, 실제 적용하려면 추가 작업이 필요하다.

*https://snyk.io/blog/10-react-security-best-practices/

1) dompurify 를 사용하기 위해서는 import 로 isomorphic-dompurify를 해야하고, npm install isomorphic-dompurify 로 설치가 필요하다.

import purify from "isomorphic-dompurify";

<div dangerouslySetInnerHTML={{__html: purify.sanitize ("<font size=10>dfdf</font><script>console.log();</script><bdo dir='rtl'>direction</bdo><h1 style=\"color: red\">예제</h1></bdo>")}}></div>

스크립트 코드와 일반 HTML의 출력이 되는 결과를 확인하면 script는 출력되지 않는 것을 알 수 있다.

2) validateURL 은 http를 제거하면서 결과를 확인하면 간단한 필터링 함수를 실행할 수 있다.

function validateURL(url) {

const parsed = new URL(url)

return ['https:'].includes(parsed.protocol)

}

<a href={validateURL(url) ? url : ''}>Click here!</a>

3) renderToStaticMarkup 메서드를 사용하기 위해서는 react-dom/server를 import 해야하고 모듈이 없다고 나오면 설치가 필요하다. (npm install ReactDOMServer)

import ReactDOMServer from 'react-dom/server';

text=ReactDOMServer.renderToStaticMarkup(

React.createElement("h1",null,text)

)

suritam9

[잡설] 스탠딩 코메디의 러닝타임 (by suritam9) [사념] 밀린글감 (by suritam9)

댓글 달기

검색 정렬

[보안] snyk에서 언급한 React 보안 코드 적용

[원문보기]

하기 사이트에서는 React 에서 사용할 수 있는 패키지 모듈을 소개하는데, 실제 적용하려면 추가 작업이 필요하다.

*https://snyk.io/blog/10-react-security-best-practices/

1) dompurify 를 사용하기 위해서는 import 로 isomorphic-dompurify를 해야하고, npm install isomorphic-dompurify 로 설치가 필요하다.

import purify from "isomorphic-dompurify";

<div dangerouslySetInnerHTML={{__html: purify.sanitize ("<font size=10>dfdf</font><script>console.log();</script><bdo dir='rtl'>direction</bdo><h1 style=\"color: red\">예제</h1></bdo>")}}></div>

스크립트 코드와 일반 HTML의 출력이 되는 결과를 확인하면 script는 출력되지 않는 것을 알 수 있다.

2) validateURL 은 http를 제거하면서 결과를 확인하면 간단한 필터링 함수를 실행할 수 있다.

function validateURL(url) {

const parsed = new URL(url)

return ['https:'].includes(parsed.protocol)

}

<a href={validateURL(url) ? url : ''}>Click here!</a>

3) renderToStaticMarkup 메서드를 사용하기 위해서는 react-dom/server를 import 해야하고 모듈이 없다고 나오면 설치가 필요하다. (npm install ReactDOMServer)

import ReactDOMServer from 'react-dom/server';

text=ReactDOMServer.renderToStaticMarkup(

React.createElement("h1",null,text)

)

[사념] 밀린글감

[원문보기]

일보다 놀이에 투자하는 이유 - 여행이 재미있는 이유는 일 안하고 평소에 소비하지 못한 행위들일 하기 때문에 즐거운 것이다. 소비가 곧 즐거움이다.

동질감과 소속의식 - 소속되어 있지 않아도, 공감대를 느끼고 공통의 소유물이 있으면 소속되어 있다는 착각을 하게된다.

통계에 의한 확률적 판단 - AI라고 부르는 것은 가능성이 높은 선택일 뿐 지능적 행동은 아니다.

영상길이=해상도=정보량 - 해상도가 높은 것은 정보량이 많은 것이므로 생각할 시간 대신 수신된 정보를 처리할 시간이 늘어난다. 생각 없은 정보 수신은 과거와는 차이가 있는 방법이다.

현강은 고해상도의 정보이다. 음성정보를 처리할 때, 시선을 돌리는 것은 영상정보까지 처리할 능력이 안 되므로 생각을 위한 정보 수신 차단이다. 눈을 감고 영상의 음성만 듣는 것도 같은 이유이다.

밥먹자는 밥먹자가 아니다. 집에 있었다는 집에 있었다이다. - 상투적인 인사, 집에 있었다는 쉬었다+그동한 못한일+취미생활+기타 이므로 설명하고 싶지 않은 행위를 통합하여 대답하는 것으로, 집에서 뭐했냐는 물음은 어리석다. 보통의 대답은 그냥.......... 일 테니.

예술의 소비층 - 예술이라는 무가치한 시각적 산물들은 무지성한 이들의 바보 짓을 포장하는 거짓된 사유 활동이다.

나는 20대 여성이 아니다. - 선택에 대한 기회가 없다.

유투브 컨설팅의 허수 = 확률의 오류

유투브 인기 - 바보, 저급, 자극, 공중파 시청률

절실함이 결과를 만든다.

대학원 기간이 상대적으로 군대 기간보다 길어지는 사태로, 과거와는 다르게 대학원이 교수의 노예가 되는 기간이 길어져 꺼려지거나 두려운 대상으로 공론화 되고 있다.

공지는 꽁지다.

재수하는 사회 - 취업 재수, 결혼 재수, 인생은 재수가 없다.

공부가 재미있는 것은 본업이 아니라 취미로 할 때 이다.

요운그맨과 크나우즈 - young man을 읽지 못하는 어릴 때 요운그맨으로 생각했다. knows는 공부 잘하는 애가 잘 못 알려준 발음이다. 형이 이를 지적했지만 친구의 말을 신뢰했다.

네고왕 인간적

분량이 안나온다 - 사이다 그룹은 유투브에 부적합

마른반찬 - 부폐아님

알 필요 없다 - 내 영문이름의 성은 PAK 로 표기한다. 왜 R이 없냐고 하면 중의적으로 R 필요 없다로 대답이 가능하다.

대충은 주기적 표현이다. - 대충하다는 관심의 정도를 낮게 하여 처리하는 것이니, 아예 하지 않는 다는 것은 아니다. 대충은 효율적인 처리 방식이다.

쏘카느낌 - 적은 량/기간 1회성, 여러가지. 만족감이 높은 서비스이다.

지압 - 전가

무감각한 현우진 처럼 - 할 일에 대해 기복이 적은 감정상태로 지속적으로 무언가를 할 수 있는 사람이다. 허지웅 같은 냉철한 성격을 가진 사람.

수학을 누구에게 가르쳐 본 사람은 문제를 끝까지 해결하려는 노력을 해온 것이다.

굉장히 싫은 일이지만 현우진 처럼 때가 닥쳐서 그 일을 묵묵히 해내는 인간이 되자.

[독서] 시티픽션

[원문보기]

지인이 M사에서 면접을 보고 받아온 책을 주었다.

오랜만에 유투브가 아닌 책을 읽게 되어 반가웠다.

"우리가 보는 것이 같은 빨간색일까 묻는 사람들은 있어도 우리가 느끼는 1초가 같은 1초일까 묻는 이들은 없다.

똑딱, 초침이 넘어갈 때 방 안의 사람들은 같은 1초를 공유하는 것처럼 보이지만 실은 모두 다른내적 시계로 셈을 하고 있다.

시간에는 측정할 수 있는 물리적 실체가 없다. 다세포 생물들은 감각의 초인지적 통합을 거쳐 시간을 지각한다.

보이는 것, 들리는 것, 진동하고 울리는 감각들에 대한 뇌의 총체적 해석과 편집이 바로 시간에 대한 감각이다.

인간은 하루, 한 시간, 1분, 1초, 한 달과 1년을 구분할 수 있지만, 각각의 뇌 속에서 흘러가는 시간은 다르게 지각된다."

이것을 생체시계라 한다. 과거에 지인이 소리의 절대적 단위를 주장했던 적이 있다.

모든 기기는 이상하게 dB라는 단위가 있지만 이 단위로 음량을 표현하지 않는다.

좀 더 알아볼 예정이며, 아인슈타인의 상대성이론처럼 생체시계에 의해 인지되는 시간과 공간은 청각과도 관련이 있을 것이다.

작가는 화학을 전공했는데, 물리학적인 시공간 해석에 대한 글을 썼다.

시간은 사람들에게 동일하게 주워지는데, 생산하는 것은 제각각인 것으로 보면 사람들은 동형암호를 사용한다고 할 수 있다.

시간에 무엇이 있는지 알 수 없지만 사람들은 삶을 통해 새로운 것들을 만들어 낸다.

[수업료] 자가 차량

[원문보기]

지난해로 기억하는데, 불법 주정차로 32,000원을 납부했다.

그리고 금일. 지난주 위반한 것 같다는 느낌이 있었는데, 틀리지 않았다.

과속 32,000원

조심 조심 다닌다고 하는데, 오히려 잘 지키다가 100m 도 남지 않은 구간에서 걸렸다.

마지막 순간에 완전히 지나치고 나서 긴장을 푸는 운행을 해야한다.

수업료로 이 정도 지불해야 다음에 걸리지 않겠지.

블랙박스 영상 보면서 조심하는데, 차량이 없을 때는 방어 운전이 되지 않는다.

아 9월인데, 열 받는다.

[신조어] 끔찍하거나 소름 돋거나 어이 없는

[원문보기]

박박, 나나, 짜짜는 무엇인가?

대박, 존나, 진짜라는데, 오래갈 것 같진 않다.

상위호환, 하위호환, 우디르급 태세전환.

게임이나 IT관련 신조어, 유행어는 오래 갈 것이다.

방법하다 처럼 10년 후에 재조명을 받거나.

호소인과 조무사를 이상한 용어들에 붙여 기분을 좋지 않게 한다.

치안조무사와 피해호소인. 그 외 가해지목자라는 말도 있다니 너무도 실망스럽다.

취업준비생을 취준생이라고 부르는 것만큼이나 싫다.

대상이 되지 못하는 하위 단계에 대한 용어를 만들고 단계화 하여 그 단계에 더 하위 레벨을 만든다.

특정 집단에 속하지 못하면, 계속 계급화되어 나락으로 떨어진다. (휴거, 엘사 등이 더더욱 진화하면 이 계급에도 못 들어가는 단계가 나올 것인다.)

게임하듯이 승급을 해야하는데, 뽑기만 하게되고(로또나 사는), 승급이 아닌 오히려 강등되는 세상이 너무도 안타깝다.

그렇기 때문에 현실보다는 메타버스 같은 플랫폼의 가상세계를 선호하는 선택지도 무시할 수 없다.

간혹, 고인물, 썩은물, 화석 등으로 순화되거나 '흐르는 물'로 승화되기도 하지만, 금수저, 은수저, 흙수저도 모자라 뼈수저.........

손가락은 국물을 뜰 수 없으니, 그릇이라도 있으면 마시는 것으로 해결해야 한다.

[졸업] 공학박사

[원문보기]

[잡담] 제 2 코로나 검사

[원문보기]

제 1 코로나 검사는 대학 강의를 하면서 증빙을 제출하라고 해서 강원도 양양 보건소에서 받았다.

5월 12일로 3개월 전이다.

제 2 코로나 검사는 구내 식당에서 확진자가 머물렀던 시간에 식당을 이용하여 동선이 겹쳐서 받게되었다.

인천 서구 아시아드 경기장 드라이브 스루 검사소에서 받을 수 있었다.

밖에 서서 대기 안하고 편하게 기다리면서 금방 끝났는데, 차를 늦게 이동한다고 면박을 당했다.

검사를 위한 천막의 폭이 넓지 않아 천천히 이동한 것이었는데, 바쁜 직원들에게 폐를 끼치게 된 것이다.

검사지 작성을 위한 볼펜을 나눠주는데 가방에 있었기 때문에 받지 않았다.

[학습 목표는 인트로다]

유투브를 보면서 거북하게 생각하는 것은 인트로 영상이다..

흥미를 자극하는 예고편이라고 하지만 그 내용이 본문에 나오기 때문에 스포일러에 가깝다고 생각해 같은 장면을 보고싶지 않은 나로서는 넘겨버리고 싶다.

2학기 강의자료를 준비하면서 학습목표 슬라이드를 작성하면서 문득 이런 생각이 들었다.

"학습목표는 본문의 주제들을 보여주는 인트로구나. 흥미를 자극할 수 있게 만들어야 하지 않을까?"

학습이 재미있다면 얼마나 좋겠는가?

[쌉쌀하다, 드라이하다]

와인을 선물 받았다. 선물이라기 보다는 그냥 받아 온 것이다.

텁텁한 느낌을 드라이하다라고 표현한다. 쌉쌀하다는 올드한 표현이라 그런 용어을 쓰는 건지 와인에 걸맞는 용어를 쓰는 건지는 개인의 생각에 달렸다.

막걸리는 쌉쌀하다라고 더 빈번하게 하지 드라이하다라고는 잘 안한다.

막걸리를 마시며 드라이하다라고 하면 신병 같은 헛웃음이 나올 것이다.

[담배도 반반 불이 붙으면 잘 타지 않는다]

20대 학생 때는 담배를 피던, 젓가락질을 하던 상추 쌈을 싸먹던 누군가의 간섭이 있다.

그렇게 하는 거 아니라고. 지금은 표면적으로 이를 말하지는 않겠지만, 속으로는 면박을 줄 수도 있다.

사람의 스타일이 다른 것을 인정하지 않고 참견하러 드는 것은 참으로 어처거니 없다.

세상에 맞는 것이 어디있는가? 이를 지적하는 사람이 알고 있는 것이 다를 뿐이다.

유투브나 방송에서는 다른 사람들의 삶을 보고 평가하고 지적하고 장단점을 이야기한다.

본인은 전혀 생산적인 일을 하지 않으면서 다른 사람의 삶을 관음하며 대리만족을 한다.

나도 개인적으로 그렇게 살게 되는 수순으로 가고 있다.

평가하기만 하고 행동하지 않는 사회는 파멸의 길을 걸으며 책임을 전가하기만 하는 지옥이 되겠지.

[가사] 립스틱 짙게 바르고

[원문보기]

립스틱 짙게 바르고는 1987년 임주리 가수에 의해 발표된 노래인데, 1993년 드라마 삽입곡으로 나오면서 인기를 끌었다고 한다.

당시에는 '역주행'이란 말이 없었던 것으로 기억하는데, 지금 표현의 역주행인 것이다.

2008년 다비치에 의해 동일한 이름의 곡이 나왔으며, '립스틱을 바르는 행위의 의미'는 유사하다.

[다비치 노래의 가사]

"사랑같은거 하지 않을래 다시는 바보같은짓 절대 안할꺼야 립스틱을 짙게 바르고 긴머리를 자르고 네가 준 상처를 지우고"

[임주리] 이별을 당한 여자가 고독을 씹고 있는게 아니라 이별을 남자가 준 마지막 선물로 여기고 립스틱을 짙게 바르고서 다른 사랑을 찾아나서는게 요즘 세태와 맞아떨어진 것 같다

[의견] 립스틱을 바르고 헤어스타일을 바꾸는 의미는 기존 기억을 지우고 새로 시작하겠다는 의지이다. 삭발을 하고 의지를 다지는 듯한 행위이다.

그러나 립스틱은 버리기 보다는 덧칠하는, 덮어버리는 행위라 숨길 수 없는 무언가가 남아 있을 수도 있다.

따라서 1987년에서 2008년으로 넘어오면서 20년 후에는 버리는 것이 많이 가사에 들어갔다.

긴머리 자르기, 상처 지우기 그리고

"널 다 버리고 널 다 지우고 너 없이도 행복할거야"

해당 부분을 잘 못 들으면, 놀다 버리고, 놀다 지우고로 들린다.

패륜적인 가사로 들을 수 있는데, null 이었다니.

역시 null 은 버리고 지워야 하는 것이다.

입자 인지설

[원문보기]

모든 인지는 입자에 의해 일어난다.

빛은 입자이면서 파동이라고 했는데, 파동 자체도 감각기관에서는 입자로 인지한다.

소리는 입자가 전달하는 에너지이다.

입자가 없으면 인지할 수 없다.

모든 감각기관은 입자가 닿아서 전달된다.

접촉이 발생하지 않으면 인지할 수 없다.

모든 전달과 수신은 매개를 이용하거나 그렇지 않거나 입자에 의해 이루어 진다.

[적요] 짧은 글 들

[원문보기]

마지막 남은 영화 예매권을 사용하기 위해 방에서 뒹굴다가 예매 후 출발하였다.

그래도 혹시나 영화관을 잘 선택했는지 확인하기 위해 앱을 확인한 순간, 예감대로 '강남'으로 잘 못 예매했다.

강남 가면 영화가 끝나 있겠지.

일단 취소를 시도했으나, 20분이 남지 않은 상황이라 취소가 되지 않았다.

고객센터 챗봇에 대화를 시도했으나 답이 없었다.

버린 셈 치고 1:1 대화에 예매권 캡처 사진과 취소 요청하고 집에 왔는데, 다행히 취소 처리가 되어있었다.

멍청한 짓을 하고 기어이 2시간 후의 영화를 다시 예매하여 관람하고 왔다.

그 영화는 행원들이 싫어할 만한 영화라 생각한다. 좀 답답하긴 했지만 색다른 시도로 보여진다.

젓가락질은 그 사람의 삶으 방식이나 잘하고 못하고의 기준은 절대적이지 않다고 생각한다.

나는 나만의 젓가락질을 하면 살 것이다.

밥먹고 아이스크림 하나, 메로나. 삶의 오아시스.

AI목소리 등장으로 성우들의 목소리가 주목 받는다고 생각한다. 기계적인 목소리, 감정이 없는 소리보다는 사람의 소리를 그리워 하는 것이다.

성대모사에 담긴 원 목소리를 가진 사람에 대한 추억은 음성합성 기술이 따라잡기 어려울 것이다.

성우들의 유투브 컨텐츠를 보다가 하수구 배관 청소 유투브도 보고, 파이프라인 영화도 보고. 배관에 대한 정보가 좀 더 쌓였다.

검색 정렬

이전 1 ... 17 18 19 20 21 22 23 24 25 26... 81 다음

APLOS BOARD 2 FREE LICENSE
DESIGN BY MACARON

검색

첨부 (0)

박영식 홈페이지

[보안] snyk에서 언급한 React 보안 코드 적용

댓글 달기

댓글 달기 닫기