JavaScript에서 따옴표를 이스케이프 처리

211

데이터베이스에서 값을 출력하고 있습니다 (실제 공개 공개는 아니지만 회사의 사용자가 공개 할 수 있습니다-즉, XSS 에 대해 걱정하지 않습니다 ).

다음과 같은 태그를 출력하려고합니다.

<a href="" onclick="DoEdit('DESCRIPTION');">Click Me</a>

DESCRIPTION은 실제로 다음과 같은 데이터베이스의 값입니다.

Prelim Assess "Mini" Report

"를 \"로 바꾸려고했지만 아무리 노력해도 Firefox는 Assess 라는 단어 뒤에 공백이 있으면 JavaScript 호출이 계속 끊어 지므로 모든 종류의 문제가 발생합니다.

나는 분명한 답을 그리워해야하지만 내 인생에서 나는 그것을 알아낼 수 없다.

내 바보를 지적하는 사람이 있습니까?

여기에 전체 HTML 페이지가 있습니다 ( ASP.NET 페이지가 될 것입니다. 그러나이 문제를 해결하기 위해 문제 코드 이외의 다른 것을 모두 제거했습니다)

<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;">edit</a>
    </body>
</html>
javascript  quotes  escaping 
— 맷 도디
소스
3
onclick이벤트 첨부 파일을 눈에 잘 띄지 않게 만들고 모든 데이터베이스 정보를 데이터 섬으로 옮기는 것이 좋습니다 . 상황이 더 깨끗 해지고 문자열이 잘못 이스케이프되면 실제로 일종의 구문 오류가 발생합니다.
— Justin Johnson
1
— 피터 Mortensen
escape ( "string") 및 unescape ( "string") jquery 메소드를 사용할 수도 있습니다.
— Abhiram

답변:

212

DoEdit큰 따옴표 문자를 제거하려면 쓰고있는 문자열을 이스케이프해야합니다 . 그들은 일으키는 onclickHTML 속성이 조기에 종료 할 수 있습니다.

\HTML 컨텍스트 에서는 JavaScript 이스케이프 문자을 사용하는 것만으로는 충분하지 않습니다. 큰 따옴표를 적절한 XML 엔터티 표현으로 바꿔야합니다 &quot;.

— 아론
소스
그래, 그렇지 않니? <a href="#" onclick="DoEdit('Preliminary Assessment \"Mini\"'); return false;"> 수정 </a> 시도했지만 여전히 문제가 있습니다. 이것은 단순한 WTF 여야하지만 내 인생에서는 볼 수 없습니다.
— Matt Dawdy
큰 따옴표를 이스케이프 처리하는 내장 JavaScript 함수가 있습니까? 'quo "'. replace ( '"', '& quot;') 외에는 아무것도 찾을 수 없습니다.
— kevin
4
자바 스크립트 문제가 아니며 HTML / XML 인코딩 문제입니다. 속성없이 속성 값 안에 큰 따옴표를 사용할 수 없습니다 ... 그렇지 않으면 브라우저 / 파서가 속성 값 선언을 끝내고 있다고 생각합니다.
— Aaron
22
대체 코드 예 :'mystring'.replace(/"/g, '&quot;');
— Joshua Burns
3
이전 의견에는 여분의 인용문이 있습니다. 작동하는 코드는 'mystring'.replace (/'/ g, '& quot;')입니다.
— Agustin Lopez
95

&quot; HTML 컨텍스트 때문에 나에게 제안한 것처럼이 특별한 경우에 작동합니다.

당신이 당신의 자바 스크립트 코드를 독립적으로 문맥 이스케이프하려는 경우, 당신은 네이티브 자바 스크립트 인코딩을 선택할 수 있습니다 :
'하게 \x27
"된다\x22

따라서 onclick은 다음과 같습니다.
DoEdit('Preliminary Assessment \x22Mini\x22');

예를 들어 JavaScript 문자열을 매개 변수로 다른 JavaScript 메서드에 전달할 때도 작동합니다 (이것은 alert()쉬운 테스트 방법입니다).

중복 스택 오버플로 질문, onClick 처리기 내부의 JavaScript 코드 내에서 문자열을 이스케이프 처리하려면 어떻게합니까? .

— tsemer
소스
2
감사합니다! 문맥에 관계없이 기본 JavaScript이므로 귀하의 답변이 더 정확합니다.
— scarver2
2
&quot;물론 HTML을 사용하여 의지를 사용하는 것은 정답 입니다.
— Oliver
참고 &quot;입력 값에 필요, 즉, <input value="\x22quoted string\x22">작동하지 않습니다.
— thdoan
@ 10basetom은 당연히 JavaScript 이스케이프는 이벤트 핸들러 ( onclick="...") 와 같은 JavaScript 컨텍스트에서만 작동합니다 . value속성 값은 JavaScript 컨텍스트 내에서 처리되지 않으며 HTML 컨텍스트 내에서만 처리됩니다.
— tsemer
대체 코드 :'mystring'.replace(/"/g, '\\x22').replace(/'/g, '\\x27')
— 닭
33 
<html>
    <body>
        <a href="#" onclick="DoEdit('Preliminary Assessment &quot;Mini&quot;'); return false;">edit</a>
    </body>
</html>

트릭을해야합니다.

— 크리스티안
소스
24

여러분, 이미 unescapeJavaScript에서 이스케이프 처리를하지 않는 함수가 있습니다 \":

<script type="text/javascript">
    var str="this is \"good\"";
    document.write(unescape(str))
</script>
— rohtakdev
소스
2
"탈출"/ "비 탈출"의 조합은 내가 원하는 것을 수행했습니다. 감사.
— Luis R.
8
이스케이프 / 언 스케이프는 더 이상 사용되지 않습니다. encodeURI는 따옴표 이상을 수행합니다. gotochriswest.com/blog/2011/05/23/escape-unescape-deprecated
— chug2k
12

문제는 HTML이 이스케이프 문자를 인식하지 못한다는 것입니다. HTML 속성에 작은 따옴표를 사용하고 onclick에 큰 따옴표를 사용하면이 문제를 해결할 수 있습니다.

<a href="#" onclick='DoEdit("Preliminary Assessment \"Mini\""); return false;'>edit</a>
— dl.
소스
5
Yikes. 나는 왜 과거에 속성에 '를 사용하여 자연스럽게 의지했는지 궁금했습니다. 나는 그 모든 것을 깊이 깊이 파고 들지 않았습니다. 감사.
— Matt Dawdy
6

이것이 기본적으로 내가하는 방법 str.replace(/[\""]/g, '\\"')입니다.

var display = document.getElementById('output');
var str = 'class="whatever-foo__input" id="node-key"';
display.innerHTML = str.replace(/[\""]/g, '\\"');

//will return class=\"whatever-foo__input\" id=\"node-key\"
<span id="output"></span>
스 니펫 확장

— 로니 로이스 턴
소스
2

Java로 HTML을 어셈블하는 경우 Apache commons-lang의 멋진 유틸리티 클래스를 사용하여 모든 이스케이프를 올바르게 수행 할 수 있습니다.

org.apache.commons.lang.StringEscapeUtils
Java, Java Script, HTML, XML 및 SQL 용 문자열을 이스케이프 및 이스케이프 해제합니다.

— iTake
소스
org.apache.commons.lang3.StringEscapeUtils.escapeEcmaScript (text)를 사용하여 Java에서 methodExpression을 구성합니다. 감사.
— Harun
1

jQuery를 사용하여 샘플을 수행했습니다.

var descr = 'test"inside"outside';
$(function(){
   $("#div1").append('<a href="#" onclick="DoEdit(descr);">Click Me</a>');       
});

function DoEdit(desc)
{
    alert ( desc );
}

그리고 이것은 Internet Explorer와 Firefox에서 작동합니다.

— 라훌
소스
5
물론 속성에 직접 넣지 않기 때문입니다. 귀하의 방법을 사용하려면 JS 문자열 배열을 만든 다음 임의의 수의 $ ( "# divxxx") ... 할당을 수행해야합니다. 최적은 아니지만 제안에 감사드립니다.
— Matt Dawdy
1

이 두 함수 (아래에 나열된)를 복사하여 모든 따옴표와 특수 문자를 이스케이프 / 이스케이프 해제 할 수 있습니다. 이를 위해 jQuery 또는 다른 라이브러리를 사용할 필요가 없습니다.

function escape(s) {
    return ('' + s)
        .replace(/\\/g, '\\\\')
        .replace(/\t/g, '\\t')
        .replace(/\n/g, '\\n')
        .replace(/\u00A0/g, '\\u00A0')
        .replace(/&/g, '\\x26')
        .replace(/'/g, '\\x27')
        .replace(/"/g, '\\x22')
        .replace(/</g, '\\x3C')
        .replace(/>/g, '\\x3E');
}

function unescape(s) {
    s = ('' + s)
       .replace(/\\x3E/g, '>')
       .replace(/\\x3C/g, '<')
       .replace(/\\x22/g, '"')
       .replace(/\\x27/g, "'")
       .replace(/\\x26/g, '&')
       .replace(/\\u00A0/g, '\u00A0')
       .replace(/\\n/g, '\n')
       .replace(/\\t/g, '\t');

    return s.replace(/\\\\/g, '\\');
}
— 오 마노 소프트
소스
1

아래 코드에서 정규 표현식을 사용하여 입력 한 문자열의 일부로 작은 따옴표를 이스케이프하십시오. 사용자가 입력 한 문자열이 쉼표로 구분되어 있는지 확인하고 동시에 문자열의 일부로 입력 된 작은 따옴표도 이스케이프합니다.

작은 따옴표를 이스케이프하려면 백 슬래시와 문자열의 일부로 \ ' 와 같은 작은 따옴표를 입력하십시오 . 이 예제에서는 jQuery 유효성 검사기를 사용했으며 편의에 따라 사용할 수 있습니다.

유효한 문자열 예 :

'여보세요'

'안녕하세요', '세계'

'안녕하세요', '세계'

'안녕하세요', '세계', ''

'내 세상이야.', '나 없이는 이것을 즐길 수 없다.', '환영합니다'

HTML :

<tr>
    <td>
        <label class="control-label">
            String Field:
        </label>
        <div class="inner-addon right-addon">
            <input type="text" id="stringField"
                   name="stringField"
                   class="form-control"
                   autocomplete="off"
                   data-rule-required="true"
                   data-msg-required="Cannot be blank."
                   data-rule-commaSeparatedText="true"
                   data-msg-commaSeparatedText="Invalid comma separated value(s).">
        </div>
    </td>

자바 스크립트 :

     /**
 *
 * @param {type} param1
 * @param {type} param2
 * @param {type} param3
 */
jQuery.validator.addMethod('commaSeparatedText', function(value, element) {

    if (value.length === 0) {
        return true;
    }
    var expression = new RegExp("^((')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))(((,)|(,\\s))(')([^\'\\\\]*(?:\\\\.[^\'\\\\])*)[\\w\\s,\\.\\-_\\[\\]\\)\\(]+([^\'\\\\]*(?:\\\\.[^\'\\\\])*)('))*$");
    return expression.test(value);
}, 'Invalid comma separated string values.');
— 디 네시 롬테
소스
0

공백도 피하십시오. 파이어 폭스가 하나가 아닌 세 가지 주장을 가정하는 것처럼 들립니다. &nbsp;비 공백 공백 문자입니다. 전체 문제가 아니더라도 여전히 좋은 생각 일 수 있습니다.

— 햄스터
소스
0

이중 백 슬래시로 따옴표를 이스케이프해야합니다.

이것은 실패합니다 (PHP의 json_encode에 의해 생성됨 ).

<script>
  var jsonString = '[{"key":"my \"value\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>

이것은 작동합니다 :

<script>
  var jsonString = '[{"key":"my \\"value\\" "}]';
  var parsedJson = JSON.parse(jsonString);
</script>
— 물소
소스
0

escape () 및 unescape () jQuery 메소드를 사용할 수 있습니다. 아래와 같이

escape(str);문자열을 이스케이프하고를 사용 하여 다시 복구하는 데 사용하십시오 unescape(str_esc);.

— 아비람
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.