Node.js에서 사용자로부터 입력 받은 문자열을 안전하게 HTML로 출력하기 위해서는 해당 문자열에서 특수 문자를 이스케이프 해야 합니다. 이는 XSS(크로스 사이트 스크립팅) 공격을 방지하기 위해 필요합니다.
1. 클라이언트 측에서의 처리
1.1. 특수문자 입력 허용
기본적으로 HTML의 input 요소는 특수문자를 포함한 모든 문자를 입력 받을 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<title>Input Test</title>
</head>
<body>
<form name="myForm" action="/submit" method="post" onsubmit="return validateForm()">
<input type="text" name="userInput" placeholder="Enter some text">
<input type="submit" value="Submit">
</form>
</body>
</html>
1.2. 입력 검증
JavaScript를 사용하여 사용자가 입력한 값에 대한 검증을 수행할 수 있습니다.
이때 특수문자가 있는지에 대한 정규식을 통해서 검색할 수 있습니다.
<script>
function containsSpecialCharacters(str) {
var regex = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]+/;
return regex.test(str);
}
function validateForm() {
var userInput = document.forms["myForm"]["userInput"].value;
if (containsSpecialCharacters(userInput)) {
alert("특수 문자가 포함되어 있습니다.");
return false;
}
return true;
}
</script>혹은
<script>
function escapeHtml(unsafe) {
return unsafe.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
function validateForm() {
var userInput = document.forms["myForm"]["userInput"].value;
var escapedInput = escapeHtml(userInput);
document.forms["myForm"]["userInput"].value = escapedInput;
return true;
}
</script>처럼 자바스크립트에서 이스케이프를 사용해서 특수문자를 변환해서 전송할 수 있습니다.
하지만, 클라이언트 측 검증만으로는 postman과 같은 툴로 강제로 데이터를 보내서 우회하는 걸 막을 수 없습니다.
그렇기 때문에 서버 측에서의 추가적인 검증이 필요합니다.
2. 서버 측에서의 처리
2.1. 입력값 검증
서버에서는 사용자로부터 받은 데이터를 검증합니다.
const express = require('express');
const bodyParser = require('body-parser');
const app = express();
app.use(bodyParser.urlencoded({ extended: true }));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/index.html');
});
app.post('/submit', (req, res) => {
let userInput = req.body.userInput;
let escapedInput = escapeHtml(userInput);
res.send(`You entered: ${escapedInput}`);
});
app.listen(3000, () => {
console.log('Server started on http://localhost:3000');
});2.2. 특수문자 이스케이프
사용자로부터 받은 데이터를 데이터베이스에 저장하거나, HTML로 출력할 때는 특수문자를 이스케이프해야 합니다.
function escapeHtml(unsafe) {
return unsafe
.replace(/&/g, "&")
.replace(/</g, "<")
.replace(/>/g, ">")
.replace(/"/g, """)
.replace(/'/g, "'");
}
3. 소스파일
아래의 파일은 위 소스를 정리하여 압축한 파일입니다.
결론
특수문자를 포함하여 사용자로부터 데이터를 안전하게 입력받고 처리하기 위해서는 클라이언트와 서버 양쪽 모두에서 적절한 대응과 코드 구현이 필요합니다. 기본적인 입력 허용부터 시작하여, 안전한 데이터 처리를 위한 다양한 방법을 적용하면서 웹 애플리케이션의 안전성을 높여야 합니다.
함께보면 좋은글
[MySQL] SQL 인젝션이란? 공격방어방법
데이터베이스와 웹 애플리케이션의 보안에서 중요한 주제인 SQL 인젝션에 대해 알아보겠습니다. SQL 인젝션은 공격자가 데이터베이스 쿼리에 악의적인 코드를 삽입하여 원하지 않는 동작을 일으
devit.koreacreatorfesta.com
[MYSQL] insert, update 시 특수문자 입력하기
데이터베이스에서 쿼리를 작성하거나 수정할 때, 특수 문자를 사용해야하는 상황이 자주 발생합니다. 예를 들어, 문자열 내부에 따옴표(')나 다른 특수 문자를 포함해야 할 때가 있습니다. 데이
devit.koreacreatorfesta.com
'Language > Nodejs' 카테고리의 다른 글
| [nodejs] 문자값 연산 -1 하기(문자->아스키코드, 아스키코드->문자 변환) (0) | 2023.12.05 |
|---|---|
| [Node.js]에서 로그아웃 후 브라우저 캐시를 이용한 뒤로가기 방지하기 (0) | 2023.09.09 |
| [nodejs] bard api 무료사용하기 (0) | 2023.07.14 |
| CORS는 왜 사이트를 만들 때 어렵게 만드는거야? (0) | 2023.04.18 |
| [Nodejs] RestAPI 서버를 만들었는데 TypeError: Failed to fetch 에러 (0) | 2023.04.18 |
