onClick 핸들러 내부의 JavaScript 코드 내에서 문자열을 이스케이프하려면 어떻게 해야 합니까?

StackOverflow https://stackoverflow.com/questions/97578

문제

어쩌면 나는 이것에 대해 너무 열심히 생각하고 있지만 링크의 onClick 핸들러 내부의 일부 JavaScript 코드에서 문자열에 사용하기 위해 이스케이프하는 것이 무엇인지 알아내는 데 문제가 있습니다.예:

<a href="#" onclick="SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;">Select</a>

그만큼 <%itemid%> 그리고 <%itemname%> 템플릿 대체가 발생하는 곳입니다.내 문제는 항목 이름에 작은따옴표와 큰따옴표를 포함한 모든 문자가 포함될 수 있다는 것입니다.현재 작은따옴표가 포함되어 있으면 JavaScript 코드가 손상됩니다.

내 첫 번째 생각은 템플릿 언어의 기능을 사용하여 항목 이름을 JavaScript로 이스케이프 처리하는 것이었습니다. 이는 따옴표만 이스케이프 처리하는 것이었습니다.링크의 HTML을 깨뜨리는 큰따옴표가 포함된 문자열의 경우는 수정되지 않습니다.이 문제는 일반적으로 어떻게 해결됩니까?전체 onClick 핸들러를 HTML로 이스케이프해야 합니까?

그렇다면 템플릿 언어의 이스케이프 기능이 괄호, 따옴표 및 세미콜론도 HTML화하므로 정말 이상해 보일 것입니다.

이 링크는 검색 결과 페이지의 모든 결과에 대해 생성되므로 결과당 하나씩 생성해야 하므로 JavaScript 태그 내에 별도의 메소드를 생성하는 것은 불가능합니다.

또한 저는 제가 일하는 회사에서 자체 개발한 템플릿 엔진을 사용하고 있으므로 툴킷 관련 솔루션은 저에게 쓸모가 없습니다.

도움이 되었습니까?

해결책

JavaScript에서는 작은따옴표를 "\x27"로, 큰따옴표를 "\x22"로 인코딩할 수 있습니다.따라서 이 방법을 사용하면 JavaScript 문자열 리터럴의 큰 따옴표(큰 따옴표 또는 작은 따옴표) 안에 있으면 문자열에 포함된 따옴표가 "깨지는" 것에 대한 걱정 없이 \x27 \x22를 사용할 수 있습니다.

\xXX는 127 미만의 문자에 대한 것이고 \uXXXX는 유니코드, 이 지식으로 무장하면 강력한 JSEncode 일반적인 화이트리스트에 없는 모든 캐릭터에 대한 기능입니다.

예를 들어,

<a href="#" onclick="SelectSurveyItem('<% JSEncode(itemid) %>', '<% JSEncode(itemname) %>'); return false;">Select</a>

다른 팁

서버측 언어에 따라 다음 중 하나를 사용할 수 있습니다.

.NET 4.0

string result = System.Web.HttpUtility.JavaScriptStringEncode("jsString")

자바

import org.apache.commons.lang.StringEscapeUtils;
...

String result = StringEscapeUtils.escapeJavaScript(jsString);

파이썬

import json
result = json.dumps(jsString)

PHP

$result = strtr($jsString, array('\\' => '\\\\', "'" => "\\'", '"' => '\\"', 
                                 "\r" => '\\r', "\n" => '\\n' ));

루비 온 레일즈

<%= escape_javascript(jsString) %>

각 매개변수에 하나씩 숨겨진 범위를 사용합니다. <%itemid%> 그리고 <%itemname%> 그 안에 값을 적으세요.

예를 들어, <%itemid%> 다음과 같이 보일 것이다 <span id='itemid' style='display:none'><%itemid%></span> 그리고 자바스크립트 함수에서 SelectSurveyItem 이 범위에서 인수를 선택하려면 ' innerHTML.

HTML에서 문자열 리터럴을 사용하지 말고 JavaScript를 사용하여 JavaScript 이벤트를 바인딩해 보세요.

또한, 'href=#'을 사용하지 마세요. 정말 당신이 무엇을하고 있는지 알아요.강박적인 중간 클릭커(탭 오프너)의 유용성이 너무 높아졌습니다.

<a id="tehbutton" href="somewhereToGoWithoutWorkingJavascript.com">Select</a>

내가 선택한 JavaScript 라이브러리는 jQuery입니다.

<script type="text/javascript">//<!-- <![CDATA[
jQuery(function($){
   $("#tehbutton").click(function(){
        SelectSurveyItem('<%itemid%>', '<%itemname%>');
        return false;
   });
});
//]]>--></script>

그러한 링크 목록을 렌더링하려는 경우 다음을 수행할 수 있습니다.

<a id="link_1" href="foo">Bar</a>
<a id="link_2" href="foo2">Baz</a>

<script type="text/javascript">
   jQuery(function($){
        var l = [[1,'Bar'],[2,'Baz']];
        $(l).each(function(k,v){
           $("#link_" + v[0] ).click(function(){
                SelectSurveyItem(v[0],v[1]);
                return false;
           });
        });
   });
 </script>

HTML 속성으로 들어가는 경우 HTML 인코딩이 모두 필요합니다(최소: > 에게 &gt; < 에게 &lt 그리고 " 에게 &quot;) 그것, 그리고 작은 따옴표(백슬래시 포함)를 이스케이프 처리하여 자바스크립트 인용을 방해하지 않도록 하세요.

이를 수행하는 가장 좋은 방법은 템플릿 시스템을 사용하는 것입니다(필요한 경우 확장). 하지만 간단히 두 개의 이스케이프/인코딩 기능을 만들고 거기에 들어가는 모든 데이터를 둘 다 둘러쌀 수도 있습니다.

그리고 그렇습니다. HTML 속성의 전체 내용을 HTML 이스케이프하는 것은 HTML 속성에 자바스크립트가 포함되어 있더라도 완벽하게 유효합니다(정확하고 심지어).

또 다른 흥미로운 해결책은 다음과 같습니다.

<a href="#" itemid="<%itemid%>" itemname="<%itemname%>" onclick="SelectSurveyItem(this.itemid, this.itemname); return false;">Select</a>

그런 다음 자바스크립트 인용으로 인한 추가 복잡성에 대해 걱정할 필요 없이 두 변수 모두에 대해 표준 HTML 인코딩을 사용할 수 있습니다.

응, 이거 하다 엄격하게 유효하지 않은 HTML을 만듭니다.그러나 그것은 ~이다 유효한 기술이며 모든 최신 브라우저는 이를 지원합니다.

내 것이었으면 아마도 첫 번째 제안을 따르고 값이 HTML로 인코딩되었는지 확인했을 것입니다. 그리고 작은따옴표가 이스케이프되었습니다.

<head> 섹션에 별도의 함수를 선언하고 onClick 메서드에서 해당 함수를 호출합니다.로트가 있는 경우 번호를 매기는 명명 체계를 사용하거나 onClicks에 정수를 전달하고 함수에 크고 굵은 스위치 문을 포함할 수 있습니다.

나는 또한이 문제에 직면했습니다.작은 따옴표를 HTML을 손상시키지 않는 이스케이프된 큰 따옴표로 변환하는 스크립트를 만들었습니다.

function noQuote(text)
{
    var newtext = "";
    for (var i = 0; i < text.length; i++) {
        if (text[i] == "'") {
            newtext += "\"";
        }
        else {
            newtext += text[i];
        }
    }
    return newtext;
}

사용 Microsoft Anti-XSS 라이브러리 여기에는 JavaScript 인코딩이 포함됩니다.

첫째, onclick 핸들러를 다음과 같이 설정하면 더 간단해집니다.

<a id="someLinkId"href="#">Select</a>
<script type="text/javascript">
  document.getElementById("someLinkId").onClick = 
   function() {
      SelectSurveyItem('<%itemid%>', '<%itemname%>'); return false;
    };

</script>

그런 다음 itemid 및 itemname을 JavaScript용으로 이스케이프해야 합니다(즉, " 된다 \", 등.).

서버 측에서 Java를 사용하는 경우 클래스를 살펴볼 수 있습니다. StringEscapeUtils 자카르타의 공통 언어에서.그렇지 않으면 자신만의 'escapeJavascript' 메소드를 작성하는 데 너무 오랜 시간이 걸리지 않습니다.

JavaScript를 사용하여 따옴표를 이스케이프 처리할 수 없으며 이스케이프된 문자열로 시작해야 한다는 답변이 여기에 있습니다.

그러므로.JavaScript가 'Marge가 Peter에게 "그럴 것 같아"라고 말했습니다.'라는 문자열을 처리할 수 있는 방법이 없으며 데이터를 스크립트에 제공하기 전에 정리해야 합니까?

그만한 가치가 있는 좋은 템플릿 엔진에는 "따옴표 탈출" 기능이 있습니다.우리 회사(내가 일하는 곳이기도 함)에는 자바스크립트에 대한 따옴표를 이스케이프 처리하는 기능도 있습니다.두 경우 모두 원하는 대로 템플릿 변수에 _esc 또는 _js_esc가 추가됩니다.사용자 생성 콘텐츠를 이스케이프되지 않은 브라우저인 IMHO에 출력해서는 안 됩니다.

나는 같은 문제에 직면했고 까다로운 방법으로 해결했습니다.먼저 전역 변수 v1, v2, v3을 만듭니다.그리고 onclick에서 표시기 1, 2 또는 3을 보내고 함수 검사에서 1, 2, 3을 확인하여 v1, v2 및 v3를 다음과 같이 입력합니다.

onclick="myfun(1)"
onclick="myfun(2)"
onclick="myfun(3)"

function myfun(var)
{
    if (var ==1)
        alert(v1);

    if (var ==2)
        alert(v2);

    if (var ==3)
        alert(v3);
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top