[JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현
소개
제목이 적당해서 죄송합니다
『이 정규 표현보다 이쪽이 좋다! 』등 있으면 가르쳐 주시면 기쁩니다.
「이 정규 표현 어디에서 사용합니까?」입니다만, 아무래도 가변의 값을 HTML로 표시하고 싶은 경우의 XSS 대책에 사용한다고 생각합니다.
어떻게 써 이렇게 고민해 버렸기 때문에 이번 qiita에 실었습니다.
용어 설명
자신의 사이트인데 여러가지 용어를 많이 사용해 버렸기 때문에, 여기에서 용어의 설명을 간단하게 하고 싶습니다 『용어 전혀 이해할 수 없어! 」라고하는 분은 여기는 읽어 날려주세요!
HTML 특수 문자
HTML에서는 특수 문자로 취급되는 문자.<strong>
를 HTML에 기술하면 HTML 태그로 인식된다든가 그런 것.
참고: h tp // w w. 슈레 y. 이 m / js / ぁ 보 / 짱 c r. HTML
문자 실체 참조
특수 문자를 일반 문자로 사용하고 싶을 때가 있습니다. 그렇게 말할 때는 미리 HTML로 이렇게 쓰면 그 문자를 표시할 수 있는 것이 있습니다. 참고는 위 사이트를.<
를 쓰고 싶다면 <
가변 값
고정 역. 그 값이 바뀔 것이다.
예를 들어,
사용자 입력.
예를 들어,
API 통신으로 얻는 값
XSS
본래 표시하고 있는 HTML의 문장에 의도한 js나 HTML등을 넣을 수 있을 것 같다! 넣어 버려! 라고 넣어 버리는 것.
정규식(code 전체)
var text = '<script>!!!</script>&<strong>aaa</strong>&<script>sssss</script>&&""""&&&&&&<b>aa</b><psss>dsds</p><script>!!!</script>';
var regex1 = /(&){1}/gi;
var chenge1 = text.replace(regex1, '&')
var regex2 = /("){1}/gi;
var chenge2 = chenge1.replace(regex2, '"')
var regex3 = /<[^\/]{1}.*?>/gi;
var chenge3 = chenge2.replace(regex3, '<strong>')
var regex4 = /<(\/){1}.*?>/gi;
var chenge4 = chenge3.replace(regex4, '</strong>')
console.log(chenge4);
출력↓
<strong>!!!</strong>&<strong>aaa</strong>&<strong>sssss</strong>&&""""&&&&&&<strong>aa</strong><strong>dsds</strong><strong>!!!</strong>
이것을 HTML로 표시↓
※사용 사이트: htps : // 코데펜. 이오/펜/
정규식 설명
var regex1 = /(&){1}/gi; //『&』1文字を検索
var chenge1 = text.replace(regex1, '&') //『&』1文字を『&』に変換
var regex2 = /("){1}/gi; //『"』1文字を検索
var chenge2 = chenge1.replace(regex2, '"')//『"』1文字を『"』に変換
var regex3 = /<[^\/]{1}.*?>/gi; //『/』で始めらない文字1文字から始めり、後はなんでも可能 <a>や<bb>など当てはまる
var chenge3 = chenge2.replace(regex3, '<strong>')//それらを<strong>に変換
var regex4 = /<(\/){1}.*?>/gi; //『/』で始まる文字1文字から始めり、後はなんでも可能 </a>や</bb>など当てはまる
var chenge4 = chenge3.replace(regex4, '</strong>')//それらを</strong>に変換
그건 그렇고,
정규식
의미
.
개행 문자 이외라면 뭐든지 매치!
문자 + *
문자가 표시되지 않거나 문자가 연속으로 표시되는지
문자 +?
문자가 표시되지 않는 패턴이나 한 번만 표시됩니다.
참고
JavaScript 정규식 요약
정규식 패턴 설명
사이고에게
이상! 끝입니다! (。・ω・。)
지금 배고프다!
Reference
이 문제에 관하여([JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sachiko-kame/items/251579d725b4f2816f89
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
자신의 사이트인데 여러가지 용어를 많이 사용해 버렸기 때문에, 여기에서 용어의 설명을 간단하게 하고 싶습니다 『용어 전혀 이해할 수 없어! 」라고하는 분은 여기는 읽어 날려주세요!
HTML 특수 문자
HTML에서는 특수 문자로 취급되는 문자.
<strong>
를 HTML에 기술하면 HTML 태그로 인식된다든가 그런 것.참고: h tp // w w. 슈레 y. 이 m / js / ぁ 보 / 짱 c r. HTML
문자 실체 참조
특수 문자를 일반 문자로 사용하고 싶을 때가 있습니다. 그렇게 말할 때는 미리 HTML로 이렇게 쓰면 그 문자를 표시할 수 있는 것이 있습니다. 참고는 위 사이트를.
<
를 쓰고 싶다면 <
가변 값
고정 역. 그 값이 바뀔 것이다.
예를 들어,
사용자 입력.
예를 들어,
API 통신으로 얻는 값
XSS
본래 표시하고 있는 HTML의 문장에 의도한 js나 HTML등을 넣을 수 있을 것 같다! 넣어 버려! 라고 넣어 버리는 것.
정규식(code 전체)
var text = '<script>!!!</script>&<strong>aaa</strong>&<script>sssss</script>&&""""&&&&&&<b>aa</b><psss>dsds</p><script>!!!</script>';
var regex1 = /(&){1}/gi;
var chenge1 = text.replace(regex1, '&')
var regex2 = /("){1}/gi;
var chenge2 = chenge1.replace(regex2, '"')
var regex3 = /<[^\/]{1}.*?>/gi;
var chenge3 = chenge2.replace(regex3, '<strong>')
var regex4 = /<(\/){1}.*?>/gi;
var chenge4 = chenge3.replace(regex4, '</strong>')
console.log(chenge4);
출력↓
<strong>!!!</strong>&<strong>aaa</strong>&<strong>sssss</strong>&&""""&&&&&&<strong>aa</strong><strong>dsds</strong><strong>!!!</strong>
이것을 HTML로 표시↓
※사용 사이트: htps : // 코데펜. 이오/펜/
정규식 설명
var regex1 = /(&){1}/gi; //『&』1文字を検索
var chenge1 = text.replace(regex1, '&') //『&』1文字を『&』に変換
var regex2 = /("){1}/gi; //『"』1文字を検索
var chenge2 = chenge1.replace(regex2, '"')//『"』1文字を『"』に変換
var regex3 = /<[^\/]{1}.*?>/gi; //『/』で始めらない文字1文字から始めり、後はなんでも可能 <a>や<bb>など当てはまる
var chenge3 = chenge2.replace(regex3, '<strong>')//それらを<strong>に変換
var regex4 = /<(\/){1}.*?>/gi; //『/』で始まる文字1文字から始めり、後はなんでも可能 </a>や</bb>など当てはまる
var chenge4 = chenge3.replace(regex4, '</strong>')//それらを</strong>に変換
그건 그렇고,
정규식
의미
.
개행 문자 이외라면 뭐든지 매치!
문자 + *
문자가 표시되지 않거나 문자가 연속으로 표시되는지
문자 +?
문자가 표시되지 않는 패턴이나 한 번만 표시됩니다.
참고
JavaScript 정규식 요약
정규식 패턴 설명
사이고에게
이상! 끝입니다! (。・ω・。)
지금 배고프다!
Reference
이 문제에 관하여([JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sachiko-kame/items/251579d725b4f2816f89
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
var text = '<script>!!!</script>&<strong>aaa</strong>&<script>sssss</script>&&""""&&&&&&<b>aa</b><psss>dsds</p><script>!!!</script>';
var regex1 = /(&){1}/gi;
var chenge1 = text.replace(regex1, '&')
var regex2 = /("){1}/gi;
var chenge2 = chenge1.replace(regex2, '"')
var regex3 = /<[^\/]{1}.*?>/gi;
var chenge3 = chenge2.replace(regex3, '<strong>')
var regex4 = /<(\/){1}.*?>/gi;
var chenge4 = chenge3.replace(regex4, '</strong>')
console.log(chenge4);
<strong>!!!</strong>&<strong>aaa</strong>&<strong>sssss</strong>&&""""&&&&&&<strong>aa</strong><strong>dsds</strong><strong>!!!</strong>
var regex1 = /(&){1}/gi; //『&』1文字を検索
var chenge1 = text.replace(regex1, '&') //『&』1文字を『&』に変換
var regex2 = /("){1}/gi; //『"』1文字を検索
var chenge2 = chenge1.replace(regex2, '"')//『"』1文字を『"』に変換
var regex3 = /<[^\/]{1}.*?>/gi; //『/』で始めらない文字1文字から始めり、後はなんでも可能 <a>や<bb>など当てはまる
var chenge3 = chenge2.replace(regex3, '<strong>')//それらを<strong>に変換
var regex4 = /<(\/){1}.*?>/gi; //『/』で始まる文字1文字から始めり、後はなんでも可能 </a>や</bb>など当てはまる
var chenge4 = chenge3.replace(regex4, '</strong>')//それらを</strong>に変換
그건 그렇고,
정규식
의미
.
개행 문자 이외라면 뭐든지 매치!
문자 + *
문자가 표시되지 않거나 문자가 연속으로 표시되는지
문자 +?
문자가 표시되지 않는 패턴이나 한 번만 표시됩니다.
참고
JavaScript 정규식 요약
정규식 패턴 설명
사이고에게
이상! 끝입니다! (。・ω・。)
지금 배고프다!
Reference
이 문제에 관하여([JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/sachiko-kame/items/251579d725b4f2816f89
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여([JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/sachiko-kame/items/251579d725b4f2816f89텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)