[JavaScript] HTML 태그는 한정 태그로 변환, HTML 특수 문자→문자 실체 참조 정규 표현

소개



제목이 적당해서 죄송합니다
『이 정규 표현보다 이쪽이 좋다! 』등 있으면 가르쳐 주시면 기쁩니다.
「이 정규 표현 어디에서 사용합니까?」입니다만, 아무래도 가변의 값을 HTML로 표시하고 싶은 경우의 XSS 대책에 사용한다고 생각합니다.
어떻게 써 이렇게 고민해 버렸기 때문에 이번 qiita에 실었습니다.

용어 설명



자신의 사이트인데 여러가지 용어를 많이 사용해 버렸기 때문에, 여기에서 용어의 설명을 간단하게 하고 싶습니다 『용어 전혀 이해할 수 없어! 」라고하는 분은 여기는 읽어 날려주세요!

HTML 특수 문자
HTML에서는 특수 문자로 취급되는 문자.<strong> 를 HTML에 기술하면 HTML 태그로 인식된다든가 그런 것.
참고: h tp // w w. 슈레 y. 이 m / js / ぁ 보 / 짱 c r. HTML

문자 실체 참조
특수 문자를 일반 문자로 사용하고 싶을 때가 있습니다. 그렇게 말할 때는 미리 HTML로 이렇게 쓰면 그 문자를 표시할 수 있는 것이 있습니다. 참고는 위 사이트를.<를 쓰고 싶다면 &lt;
가변 값
고정 역. 그 값이 바뀔 것이다.
예를 들어,
사용자 입력.
예를 들어,
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, '&amp;')
var regex2 = /("){1}/gi;
var chenge2 = chenge1.replace(regex2, '&quot;')
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>&amp;<strong>aaa</strong>&amp;<strong>sssss</strong>&amp;&amp;&quot;&quot;&quot;&quot;&amp;&amp;&amp;&amp;&amp;&amp;<strong>aa</strong><strong>dsds</strong><strong>!!!</strong>

이것을 HTML로 표시↓


※사용 사이트: htps : // 코데펜. 이오/펜/

정규식 설명


var regex1 = /(&){1}/gi; //『&』1文字を検索
var chenge1 = text.replace(regex1, '&amp;') //『&』1文字を『&amp;』に変換
var regex2 = /("){1}/gi; //『"』1文字を検索
var chenge2 = chenge1.replace(regex2, '&quot;')//『"』1文字を『&quot;』に変換
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 정규식 요약
정규식 패턴 설명

사이고에게



이상! 끝입니다! (。・ω・。)
지금 배고프다!

좋은 웹페이지 즐겨찾기